We can generate the same form using HTML Helpers as follows (HTML.BeginForm, @Html.Label, and @Html.TextBox generate the HTML form, label, and textbox elements, respectively):
@using (Html.BeginForm())
{
<table>
<tr>
<td>@Html.Label("Name")</td>
<td>@Html.TextBox("txtName")</td>
</tr>
<tr>
<td>@Html.Label("Age")</td>
<td>@Html.TextBox("txtAge")</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit">
</td>
</tr>
</table>
}
The form tag will automatically close when you use the block.
The following screenshot gives a glimpse of the task of HTML Helpers:
You might wonder why we need to use HTML Helpers when we can write the HTML code manually. Things will become more complex when we pass the model from the controller to the view. Using HTML Helpers, we can directly build form elements from model files so that they will pick the names from the models that you are using.
For example, let's create a folder called Models and a class called Person. This class will act as a model, as shown in the following screenshot:
The Person class is just a POCO (Plain Old C# Object) class and will act as a model. The complete code for this class is as follows:
Go to https://goo.gl/UBmSdM to access the code.
public class Person
{
public int PersonId { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
Let's create a new action method called ValidateAge. In this method, we will create an empty Person class and pass the model to the view. We will also create a dynamic property called Title in ViewBag so that we can display this value in the view:
Go to https://goo.gl/xCkyeY to access the code.
[HttpGet]
public IActionResult ValidateAge()
{
ViewBag.Title = "Validate Age for voting";
Person person1 = new Person();
return View(person1);
}
In the view, create the form using the following HTML Helpers:
Go to https://goo.gl/hnkvzS to access the code.
@model Lesson3.Models.Person
@using (Html.BeginForm("ValidateAge", "Home", FormMethod.Post))
{
<table>
<tr>
<td>@Html.LabelFor(Model => Model.Name) </td>
<td>@Html.TextBoxFor(Model => Model.Name) </td>
</tr>
<tr>
<td>@Html.LabelFor(Model => Model.Age)</td>
<td>@Html.TextBoxFor(Model => Model.Age)</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit">
</td>
</tr>
</table>
}
In the first line, we tell the view that we are passing the model of type Person class. This enables us to use a strongly typed model, that is, when we type Model and a dot, IntelliSense provides us with all the properties of the Person class.
In the second line, we use the overloaded BeginForm HTML Helper, which accepts three parameters—the action method name, the controller name, and the Form method.
Simply put, when the user submits the form, the information should be passed to the mentioned action of the controller.
In the LabelFor and TextBoxFor HTML Helpers, we are just passing model properties (name and age); this automatically queries and gets the model properties and builds the respective HTML elements. This is one of the primary advantages of using HTML Helpers. Without using HTML Helpers, this process might become complex.
Now, let's write the respective POST action method in the same way. In the following POST action method, based on the age entered in the form, we set the dynamic property as Message:
Go to https://goo.gl/e4cB6j to access the code.
[HttpPost]
public IActionResult ValidateAge(Person person1)
{
if (person1.Age >= 18)
{
ViewBag.Message = "You are eligible to Vote!";
}
else
{
ViewBag.Message = "Sorry.You are not old enough to vote!";
}
return View();
}
We are using POST instead of GET because our goal is not to retrieve data, but to post and process data on the server side.
It should be noted that both the GET and POST action methods refer to the same view—ValidateAge.cshtml. Add the following content to the view just above the form element:
Go to https://goo.gl/6Cx4fg to access the code.
@if (ViewBag.Message != null)
{
<b>@ViewBag.Message</b>
}
Once the user submits the form, the POST action method sets the dynamic Message property in ViewBag. However, the value of this property will be null when the view is rendered as part of the GET request. If the value is not null, insert the message at the top of the page.
When you run the application, you'll get the following output:
