Html.HiddenFor Example in ASP.NET MVC

What is Hidden() Field and Why It needed?

Html.Hidden() field is same as other input control like Html.TextBox but there are some special features in Html.Hidden that is listed below:

1. It is hidden field, means the control will not be visible to user.
2. User cannot interact with this control.
3. This control is used for storing and sending extra information to server or next page.
4. It sends additional information that user doesn’t know or isn’t interested in.
5. It maintains data even in Postback.
6. The Hidden Field data can be read by client side script like Java Script and JQuery.

What is the purpose of using Hidden() Field in Html?

Let's understand it with a real world example.

You created a form, and asked users to fill some information. In the behind, you also want to collect some user information and send those information to server when user click submit button. These information might be:

1. IP address of User’s Machine
2. Which browser user is using
3. Which Operating system user is using; Android, iOS, Linux or Windows 7, etc
4. Security Token
5. Submission Date
6. Etc.

So, when user will fill the form, meanwhile you can collect all the above information and keep them into a hidden field.

Html.Hidden() is a basic typed helper method or loosely typed helper method, that isn’t bounded with any model. It contains 2 parameters; Hidden Field Name and Hidden Field Value.

Define:

MvcHtmlString Html.Hidden(string name, object value, object htmlAttributes)

Easy way Example:

@Html.Hidden("Hidden_Field_Name","Value")

---

Html.HiddenFor() is a strongly typed method that is bounded with model class. It communicates and send/receive value to model class properties. Generally it contains 2 parameters; Hidden Field Name which is a model property and Value for Hidden Field.

Define:

MvcHtmlString Html.HiddenFor(Expression> expression)

Easy Way Example:

@Html.HiddenFor(m => m.UserId, new { Value = "1" })

Programming Example

Here, I am giving a basic Html.Hidden and Html.HiddenFor example. In this following example, I have tried to explain following thing:

1. Creating and Defining Basic and Strongly typed hidden field.
2. Assigning Value to hidden field using Controller.
3. Displaying Hidden Field Value in View Page.

namespace HtmlHelperDemo.Models
{
    public class UserModel
    {
        public int UserId { get; set; }
        public string UserName { get; set; }
    }
}

@using HtmlHelperDemo.Models
@model UserModel

<h1>Html.Hidden Example</h1>

@using (Html.BeginForm())
{
    //Basic Hidden Field
    @Html.Hidden("BasicHiddenName", "Steven Clark")
    
    //Strongly Typed Hidden Field
    @Html.HiddenFor(m => m.UserId, new { Value = "1" })<br />
    @Html.HiddenFor(m=>m.UserName, new { Value = "Steven Clark"})

    <input id="Submit" type="submit" value="submit" />
}

<hr />
<h4>Html.Hidden - Basic Type</h4>
<p><strong>Value:</strong> @ViewBag.basicname</p><br />

<h4>Html.HiddenFor - Strongly Type</h4>

<p><strong>ID:</strong> @ViewBag.id</p>
<p><strong>Name:</strong> @ViewBag.name</p>

using System.Web.Mvc;
using HtmlHelperDemo.Models;

namespace HtmlHelperDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(FormCollection fc, UserModel um)
        {
            ViewBag.basicname = fc["BasicHiddenName"];

            ViewBag.id = um.UserId;
            ViewBag.name = um.UserName;
            return View(um);
        }
    }
}

Html Output:

In order to see the output, click on submit button and then go to source page by pressing Ctrl + U in your browser.

<form action="/" method="post">
<input id="BasicHiddenName" name="BasicHiddenName" type="hidden" value="Steven Clark" />
<input Value="1" data-val="true" data-val-number="The field UserId must be a number." data-val-required="The UserId field is required." id="UserId" name="UserId" type="hidden" value="1" /><br />
<input Value="Steven Clark" id="UserName" name="UserName" type="hidden" value="Steven Clark" />
<input id="Submit" type="submit" value="submit" />
</form>

Assigning Value to Html.Hidden Field using Controller

namespace HtmlHelperDemo.Models
{
    public class UserModel
    {
        public int UserId { get; set; }
        public string UserName { get; set; }
    }
}

@using HtmlHelperDemo.Models
@model UserModel

<h1>Html.Hidden Example</h1>

@using (Html.BeginForm())
{
    //Basic Hidden Field
    @Html.Hidden("BasicHiddenName", null, new { @id = "BasicHiddenName" })
    
    //Strongly Typed Hidden Field
    @Html.HiddenFor(m => m.UserId, new { id = "UserId" })<br />
    @Html.HiddenFor(m=>m.UserName, new { id = "UserName" })

    <input id="Submit" type="submit" value="submit" />
}

<hr />
<h4>Html.Hidden - Basic Type</h4>
<p><strong>Value:</strong> @ViewBag.basicname</p><br />

<h4>Html.HiddenFor - Strongly Type</h4>

<p><strong>ID:</strong> @ViewBag.id</p>
<p><strong>Name:</strong> @ViewBag.name</p>

using System.Web.Mvc;
using HtmlHelperDemo.Models;

namespace HtmlHelperDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {            
            UserModel um = new UserModel();
            um.UserId = 2;
            um.UserName = "Jack Martin";
            ViewBag.BasicHiddenName = "Jack Martin";
            return View(um);
        }

        [HttpPost]
        public ActionResult Index(FormCollection fc, UserModel um)
        {
            ViewBag.basicname = fc["BasicHiddenName"];

            ViewBag.id = um.UserId;
            ViewBag.name = um.UserName;
            return View(um);
        }
    }
}

Html Output

 <form action="/Home/Index" method="post">
 <input id="BasicHiddenName" name="BasicHiddenName" type="hidden" value="Jack Martin" />
 <input data-val="true" data-val-number="The field UserId must be a number." data-val-required="The UserId field is required." id="UserId" name="UserId" type="hidden" value="2" /><br />
<input id="UserName" name="UserName" type="hidden" value="Jack Martin" />
    <input id="Submit" type="submit" value="submit" />
</form>

Summary

In this chapter, I have tried to teach you how to use Html.Hidden Field in ASP.Net MVC 5. It is pretty easy to learn this control with the help of mentioned programming example in this article.