Form Tag Helper in ASP.NET Core

The Form Tag Helper generates the HTML <form> element based on the various attributes like asp-controller, asp-action etc. In this tutorial, We will look at how to use Form Tag Helper in ASP.NET Core forms.

Form Tag Helper

The Form Tag Helper targets the HTML <form> element and generates the action URL & action method attributes. It uses the various server-side attributes like asp-controller, asp-action, asp-route- etc to generate the <form> element in the view. It does the following.

1. Generates URL for the action attribute and method attribute using the asp-controller, asp-action & asp-area.
2. Generates the Route Parameters, Query strings & URL Fragments using the attributes like asp-route-{value}, asp-all-route-data & asp-fragment etc.
3. Generates a hidden ValidateAntiForgeryToken to prevent cross-site request forgery.

Attributes of Form Tag Helper

The Form Tag Helpers provide several server-side attributes which help us to manipulate the generated URL. The following is the list of available attributes.

1. asp-controller
2. asp-action
3. asp-route
4. asp-all-route-data
5. asp-route-{value}
6. asp-area
7. asp-fragment
8. asp-page
9. asp-page-handler
10. asp-host
11. asp-protocol
12. asp-antiforgery

Adding Controller Action method in URL

asp-controller

The asp-controller attribute is the name of the MVC controller to use while generating the URL.

Example

The above code translates into

Note that the current method is used as the action method.

asp-action

The asp-action is the name of the MVC Controller action method to use while generating the URL.

Example

The above code translates into

Adding Areas in Route

asp-area

The asp-action attribute sets the area name to use while generating the URL

Example

The above code translated into

For, Areas to work correctly, the route must have area specified as shown below.

You can read more about Areas from here.

Adding Route Parameters / Query String & Fragments

Most of the times, you need to add parameters to the controller action method. The additional parameters may be in the form of URL Parameter, Query string or URL Fragments. The asp-route-{value}, asp-all-route-data & asp-fragment are the attributes for this task.

Asp-route-{value}

The asp-route-{value} attribute sets the value for a single route parameter represented by the {Value}. It the {value} is not matched to any route parameter, then it is appended as the query string.

Consider the following route.

For example in the following route

To include id parameter in the URL we use asp-route-{value} attribute, where {value} is replaced by the id.

Example

Would translate as

Multiple parameters.

Would translate as

What if the id parameter is not available in the route?

If no matching route parameter is found, then the asp-route-{value} included in the URL as the query string.

For Example: if our route is

Then this tag helper,

Translates into

Note that

The asp-route-{value} attribute needed to be specified for each URL Parameter and query string. 

asp-all-route-data

The asp-all-route-data attribute sets either the URL Parameter or Query string or both using dictionary of key-value pairs.

Example

To use this attribute you should first create a dictionary key-value pair as shown below. The key is the parameter name, and the value is the parameter value.

For the Route below

The following asp-all-route-data tag attribute

Translates into

asp-fragment

The asp-fragment attribute sets the URL fragment that needs to be appended to the URL. The URL fragment is added at the end of the URL after the hash character (#).

Example

is translated to

Using Named Route

asp-route

The asp-route attribute sets the “named route” to use while generating the URL.

The routes can be given name while adding them to the routes collection. 

In the above route, “Default” is the name of the route. 

Hence

Translates into

Notes

Razor pages (do not confuse with Razor views) doesn’t support named routes. This parameter will only be used for MVC routes.

Do not use asp-controller or asp-action along with the the asp-route attribute. This most probably results in a route conflict.

Routing to Razor Pages

asp-page

The asp-page attribute is used with Razor Pages. The Razor page name must be provided without the file extension

This translates into

If no page name is specified, the tag helper will generate a link to the current page.

asp-page-handler

The asp-page-handler attribute is used with Razor Pages. It’s intended for linking to specific page handlers.

Consider the following page handler:

The generated HTML:

The asp-page & asp-page-handler attributes are applicable only to Razor pages and must not be mixed with the asp-route, asp-controller, and asp-action attributes.

However, asp-route-{value} , asp-all-route-data , asp-fragment can be used with asp-page attribute 

Specifying the HTTP protocol & Host

asp-protocol

The asp-protocol attribute sets the protocol to be used in the URL (such as https).

For Example :

The generated HTML:

asp-host

The asp-host attribute sets the hostname in the generated URL

For Example:

The generated HTML:

Anti Forgery Tokens

asp-antiforgery

The form Tag Helper automatically generates a hidden Antiforgery taken called as “Request Verification Token” to prevent the Cross-site request forgery (also known as XSRF) attack.

Example

or

The above code translated into

If you wish to disable, then setting the asp-antiforgery to false.

Which gets translates into

Summary

In this tutorial, we looked at the <Form> Tag helper in ASP.NET Core.