The Form Tag Helper

The Form Tag Helper will aid you in the generation of the FORM tags which should be around any form elements that you would like to e.g. submit back to the server, including INPUT fields, TEXTAREA's etc. When using the Form Tag Helper, you benefit from the following things, compared to writing all the markup manually:

• You can easily reference the Controller and the Action to submit the FORM to, or even reference a route
• A hidden Request Verification Token is automatically generated and appended to the FORM, to help protect you against cross-site request forgery

Controller and Action attributes

The easiest, and perhaps most common, way of using the Form Tag Helper, is with the controller and action attributes. This allows you to specify which action method on which controller you want the Form to be submitted to. Here's an example:

<form method="post" asp-controller="Blog" asp-action="UpdateEntry"></form> 

Notice how I mix regular HTML attributes (the method attribute) with Tag Helper attributes (asp-controller and asp-action). The resulting Form will look like this:

<form method="post" action="/Blog/UpdateEntry">  
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8IVs_IPAjddLnF3cGQU5ywNWoiF_3N0ZpjIkXnpjYFazt7cZcCPogKdTTfI7sFI7JyxIpH8ofcou78e5K7b8vUZcWpKZmvqU3e8nzumwm6WaHWXNMnQSvIB6P_Ok0mVwUloJN4MAkDxhxHlU71iJxqY">  
</form>

As you can see, the Tag Helper has turned the two attribute values (controller and action) into the actual HTML Form attribute action /Blog/UpdateEntry. At the same time, a hidden INPUT field has been generated to hold the Request Verification Token.

The Route attribute

As you can see above, hitting the desired Controller and Action method is easy - you simply specify the name of the Controller and the name of the Action method. However, as an alternative, you may decide to target a specific route - the route will then be responsible for hitting the desired Action. You can do this using the asp-route attribute and here's a small example to illustrate it:

<form method="post" asp-route="UpdateBlogEntry"></form>

The value specified in the asp-route property should match the name specified for the route you wish to target, e.g. like this:

[Route("Blog/Update", Name = "UpdateBlogEntry")]  
public IActionResult Update()  
{  
    .....

Again, the action attribute will simply be filled with the appropriate URL:

<form method="post" action="/Blog/Update">
    .....

Appending route parameters

The route you wish to hit may take one or several parameters which you may need to pass to it from your FORM. This can be done using a syntax like this:

asp-route-[parameter-name]="value"

So, if the name of the parameter of your parameter is id, your complete FORM tag could look like this:

<form method="post" asp-route="UpdateBlogEntry" asp-route-id="42"></form>

Of course, in most situations, the value would likely be dynamic and come from e.g. your Model, like this:

<form method="post" asp-route="UpdateBlogEntry" asp-route-id="@Model.Id"></form>

The result will look like this:

<form method="post" action="/Blog/Update?id=42">
    .....

More options

These were the most relevant and commonly used attributes for the FORM Tag Helper. For a complete list of options and possibilities, please refer to the documentation.

Summary

The FORM Tag Helper helps you generate a correct HTML Form, while also adding security to your solution with the automatically appended Request Verification Token.