How to add ID property to Html.BeginForm() in asp.net mvc?

Jqueryasp.net MvcForms

Jquery Problem Overview


I want to validate my form using jquery but it doesn't have an ID property as of now how to add it to the form in asp.net mvc? I am using this...

<% using (Html.BeginForm()) {%>

and my jquery validator plugin takes this,

var validator = $("#signupform").validate({

Now i want to give id as signupform... Any suggestion...

Jquery Solutions


Solution 1 - Jquery

This should get the id added.

ASP.NET MVC 5 and lower:

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "signupform" }))
   { } %>

ASP.NET Core: You can use tag helpers in forms to avoid the odd syntax for setting the id.

<form asp-controller="Account" asp-action="Register" method="post" id="signupform" role="form"></form>

Solution 2 - Jquery

I've added some code to my project, so it's more convenient.

HtmlExtensions.cs:

namespace System.Web.Mvc.Html
{
    public static class HtmlExtensions
    {
        public static MvcForm BeginForm(this HtmlHelper htmlHelper, string formId)
        {
            return htmlHelper.BeginForm(null, null, FormMethod.Post, new { id = formId });
        }

        public static MvcForm BeginForm(this HtmlHelper htmlHelper, string formId, FormMethod method)
        {
            return htmlHelper.BeginForm(null, null, method, new { id = formId });
        }
    }
}

MySignupForm.cshtml:

@using (Html.BeginForm("signupform")) 
{
    @* Some fields *@
}

Solution 3 - Jquery

In System.Web.Mvc.Html ( in System.Web.Mvc.dll ) the begin form is defined like:- Details

> BeginForm ( this HtmlHelper htmlHelper, string actionName, string
> controllerName, object routeValues, FormMethod method, object > htmlAttributes)

Means you should use like this :

> Html.BeginForm( string actionName, string controllerName,object > routeValues, FormMethod method, object htmlAttributes)

So, it worked in MVC 4

@using (Html.BeginForm(null, null, new { @id = string.Empty }, FormMethod.Post,
    new { @id = "signupform" }))
{
    <input id="TRAINER_LIST" name="TRAINER_LIST" type="hidden" value="">
    <input type="submit" value="Create" id="btnSubmit" />
}

Solution 4 - Jquery

May be a bit late but in my case i had to put the id in the 2nd anonymous object. This is because the 1st one is for route values i.e the return Url.

@using (Html.BeginForm("Login", "Account", new {  ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { id = "signupform", role = "form" }))

Hope this can help somebody :)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionACPView Question on Stackoverflow
Solution 1 - JqueryJason RoweView Answer on Stackoverflow
Solution 2 - JqueryADM-ITView Answer on Stackoverflow
Solution 3 - JqueryMuhammad AshikuzzamanView Answer on Stackoverflow
Solution 4 - JqueryDaniaalView Answer on Stackoverflow