In this article I will explain with an example, how to use Hidden Fields in ASP.Net Core MVC.
This article will explain how to create Hidden Fields using Model class, set its value and then retrieve data inside POST Action method in ASP.Net Core MVC.
Model
Following Model class named PersonModel consists of three properties i.e. PersonId, FirstName and LastName.
public class PersonModel
{
public int PersonId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, the PersonModel class is initialized and the value of the PersonId property is set which will be later assigned to the Hidden Field.
Finally, the PersonModel class is returned to the View.
Action method for handling POST operation
This Action method handles the POST call, when the Submit Button is clicked and the Form is submitted.
It accepts the values of PersonId, First Name and Last Name sent from the View through the PersonModel class parameter.
public class HomeController : Controller
{
public IActionResult Index()
{
PersonModel person = new PersonModel { PersonId = 1 };
return View(person);
}
[HttpPost]
public IActionResult Index(PersonModel person)
{
return View();
}
}
View
Inside the View, in the very first line PersonModel class is declared as Model for the View.
The View consists of an HTML Form with following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the Form there are two TextBox elements, a Hidden Field and a Submit Button.
The PersonId value is assigned to the Hidden Field using the asp-for attribute.
When the Submit Button is clicked, the Form gets submitted and the PersonId, First Name and Last Name values are sent to the Controller.
@model HiddenField_MVC_Core.Models.PersonModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post" asp-controller="Home" asp-action="Index">
<table>
<tr>
<td>First Name: </td>
<td><input type="text" id="txtFirstName" name="FirstName" /></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type="text" id="txtLastName" name="LastName" /></td>
</tr>
<tr>
<td><input type="hidden" id="hfPersonId" name="PersonId" asp-for="PersonId" /></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Screenshot
![ASP.Net Core MVC: Hidden Field example]()
Downloads
