Form Tag Helpers in ASP.NET Core

In this article, I am going to discuss the Form Tag Helpers in ASP.NET Core Application. Please read our previous article where we discussed how to create Responsive Navigation Menus in ASP.NET Core Application.

As of now, we have discussed the use of anchor, image, and environment tag helpers in ASP.NET Core Application. This is a continuation part of our previous article. So, please read our previous article before proceeding to this article. Here, in this article, I will discuss how to create a Form in ASP.NET Core Application using the Form Tag Helpers.

What are the Tag Helpers used to create a Form in ASP.NET Core?
In order to create a Form in ASP.NET Core Application, we need to use the following common Tag Helpers.

1. Form Tag Helper
2. Input Tag Helper
3. Label Tag Helper
4. Textarea Tag Helper
5. Radio Button Tag Helper
6. Select Tag Helper

At the end of this article, we will create a Form as shown below using the above Tag Helpers. The following form is used to create a Student.

Form Tag Helper in ASP.NET Core:
In order to create a Form in ASP.NET Core MVC View, we need to use the <form> tag helper. The syntax to use the Form Tag Helper is shown below.

As you can see in the above image, within the Form Tag Helper, we are using the asp-controller and asp-action tag helpers. These two tag helpers specify the controller and the action method to which the form data is going to be submitted. The method type specifies whether it is a Get request or Post Request. We want to issue a Post request when the form is submitted, so we set the method type as Post.

Note: If you didn’t specify the controller and action name using the asp-controller and asp-action tag helpers, then by default, when the form is submitted, it will be invoked the same action method of the controller which rendered the form.

Input Tag Helper in ASP.NET Core:
The Input Tag Helper in ASP.NET Core binds an HTML <input /> element to a model expression in the razor view. Here, we want a form to create a new Student. So, the model for our view is Student class and we can specify the model using the following directive.

@model Student

In order to capture the student name, we want to display a text box in our form. We also want that text box to bind with the Name property of the Student model class. This can be done very easily by using the asp-for Tag helper as shown below.

<input asp-for=”Name”>

As you can see here we set the value for the asp-for tag helper to the Name property of the Student model class. Here, you will also get the IntelliSense while setting the value property. Later if you change the property name, let say from Name to StudnetName on the Student class, and if you do not change the value assigned to the tag helper, then you will get a compiler error.

The above input tag helper generates an input element with id and name attributes. And both the id and name are set to a value as Name as shown below.

<input type=”text” id=”Name” name=”Name” value=””>

Label Tag Helper in ASP.NET Core:
The Label Tag Helper in ASP.NET Core generates a label with for attribute. The “for” attribute is used to link the label with its corresponding input element. For example,

<label asp-for=”Name”></label>
<input asp-for=”Name”>

The above code generates the following HTML.

<label for=”Name”>Name</label>
<input type=”text” id=”Name” name=”Name” value=””>

Here, the label is linked with the input element. This is because both the label for attribute and the input element id attribute has the same value (i.e. Name). That means when we click on the label, then the corresponding input element will receive the focus.

TextArea Tag Helper in ASP.NET Core:
The Textarea tag helper in ASP.NET Core is very much similar to the input tag helper but specifically targets the Textarea element instead of the input element. The textarea tag helper is used by adding the asp-for tag helper attribute to a text area element. For example, let say out Student having a property to store the address, then for address property, we can use textarea tag helper as shown below.

<textarea asp-for=”Address”></textarea>

The text area tag helper was able to generate name and id properties based on the name of the property specified in asp-for. If you want to display the textarea with a specified number of rows and cols, then you need to use the rows and cols attribute as shown below.

<textarea asp-for=”Address” rows=”4″ cols=”30″></textarea>

Select Tag Helper in ASP.NET Core:
The Select Tag helper in ASP.Net Core generates a select tag with its associated option elements. In our example, we want a select element to display the list of Branches. We also want a label that should be linked with the select element. The following code does the same.

<label for="Branch">Branch</label>
<select id="Branch" name="Branch">
    <option value="0">None</option>
    <option value="1">CSE</option>
    <option value="2">ETC</option>
    <option value="3">Mech</option>
</select>

The options for the branch select element can be hard-coded like in the above example, or they can also come from enum or even though from a database table. In our example, we are going to use an enum for the select options.

Radio Button Tag Helper in ASP.NET Core:
The radio button control is designed to support the selection of only one of a mutually exclusive set of predefined options. In order to generate a radio button in the ASP.NET Core application, we need to use the radio button tag helper.

Let us create a Form using the above Form Tag Helpers:
First, add the following Create action method within the Home Controller.

[HttpGet]
public ViewResult Create()
{
    Student student = new Student
    {
        AllGenders = Enum.GetValues(typeof(Gender)).Cast<Gender>().ToList()
    };
    return View(student);
}

Creating the Create View:
Now add a view with the name Create.cshtml within the Home folder of your application. Once you add the Create.cshtml view, then copy and paste the following code in it.

@model FirstCoreMVCApplication.Models.Student
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<form asp-controller="Home" asp-action="Create" method="post" class="mt-3">
    <div class="form-group row">
        <label asp-for="Name" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Name" class="form-control" placeholder="Name">
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Email" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Email" class="form-control" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Branch" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <select asp-for="Branch" class="custom-select mr-sm-2"
                    asp-items="Html.GetEnumSelectList<branch>()"></select>
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Gender" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            @foreach (var gender in Model.AllGenders)
            {
                <label class="radio-inline">
                    <input type="radio" asp-for="Gender" value="@gender" id="Gender@(gender)" />@gender

                </label>
            }
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Address" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <textarea asp-for="Address" class="form-control" placeholder="Address"></textarea>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Create</button>
        </div>
    </div>
</form>

Now, run the application and click on the Create Menu and you should see the required view as expected.

In the next article, I am going to discuss Model Binding in ASP.NET Core Application. Here, in this article, I try to explain Form Tag Helpers in ASP.NET Core Application.

Summary:
I hope this post will be helpful to understand the concept of Form Tag Helpers in ASP.NET Core
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉