In this article I will explain with an example, how to set value of Hidden Fields created using Html.Hidden and Html.HiddenFor helper functions using jQuery in ASP.Net MVC Razor.
This article will also illustrate how to get values of Hidden Fields created using Html.Hidden and Html.HiddenFor helper functions and set using jQuery in View inside Controller in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
Model
Following is a Model class named PersonModel with a property i.e. Name.
public class PersonModel
{
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }
}
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling POST operation
Inside this Action method, the value of the Hidden Field created using the Html.HiddenFor helper function is fetched using the PersonModel class.
And the value of the Hidden Field created using the Html.Hidden helper function is fetched using the Request.Form collection.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(PersonModel person)
    {
        string name = person.Name;
        string country = Request.Form["Country"];
        return View();
    }
}
 
 
View
Inside the View, in the very first line the PersonModel class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
There are two Hidden Fields. The Hidden Field for the Name value is created using Html.HiddenFor function while the Hidden Field for the Country value is created using Html.Hidden helper function.
Both the Hidden Fields are assigned ID attribute using the HtmlAttributes parameter in the Html.Hidden and Html.HiddenFor helper functions.
There’s also a Submit Button at the end of the Form and when the Button is clicked, the Form is submitted.
The Submit Button has been assigned a jQuery Click event handler. Inside the jQuery Click event handler, values of both the Hidden Fields are set using jQuery.
@model HiddenFor_jQuery_MVC.Models.PersonModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.HiddenFor(m => m.Name, new { @id = "hfName" })
        @Html.Hidden("Country", "", new { @id = "hfCountry" })
        <input type="submit" value="Submit" id="btnSubmit"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btnSubmit").click(function () {
                    $("#hfName").val("Mudassar Khan");
                    $("#hfCountry").val("India");
                });
            });
        </script>
    }
</body>
</html>
 
 
Screenshot
Html.Hidden and Html.HiddenFor set Value using jQuery in ASP.Net MVC
 
 
Downloads
Download Code