15Mar 2021 by ganesh
ASP.NET Core
ASP.NET Core MVC

Form Tag Helper In ASP.NET CORE MVC 

In this tutorial will discuss about form tag helper and how to create forms in ASP.NET Core MVC. In ASP.NET CORE mvc when we want to create forms then require different tag helpers.

In this tutorial will discuss how to create forms in ASP.NET Core MVC. In ASP.NET CORE mvc when we want to create forms then require different 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 tutorial, we will create a Form using the above Tag Helpers. This form is used to create a Student.

Let’s add action into the StudenController to add students. Will be called CreateStudent and we require get and post action. So the get action initializes the and pass default value to view if any and post action will be used to save data to the database.

 [HttpGet]
 public ActionResult CreateStudent()
 {
     return View();
 }

 [HttpPost]
 public ActionResult CreateStudent(Student student)
 {
    return View();
 }

After adding action lets add a where we are creating form.

In order to create a Form in ASP.NET Core MVC View, we need to use the

tag helper.

Form Tag Helper:

In the Form Tag Helper, we need to provide controller name and action name for that we need to use 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.

 

If you didn’t provide the controller and action name using the asp-controller and asp-action tag helpers, then by default called the the same action method of the controller which rendered the form. After adding form we need to add input fields to forms.

Input Tag Helper:

The Input Tag Helper in ASP.NET Core binds an HTML  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.

 

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.

Label Tag Helper:

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,

 

TextArea Tag Helper:

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.

ASP.NET CORE
ASP.NET Core MVC