Defining Views

We’ll dive into defining views with HTML helper and tag helper. Let’s begin with defining views.

Defining views with HTML Helper methods

While creating a view for ASP.NET Core MVC, we can use the HTML object and its methods to generate markup. When Microsoft introduced ASP.NET MVC in 2009, these HTML Helper methods were the way to programmatically render HTML. Modern ASP.NET Core retains these HTML Helper methods for backward compatibility and provides Tag Helpers that are usually easier to read and write in most scenarios. But there are notable situations where Tag Helpers cannot be used, like in Razor components.

Methods

Some useful methods include the following:

• ActionLink: Use this to generate an anchor <a> element that contains a URL path to the specified controller and action. For example, Html.ActionLink(linkText: “Binding”,actionName: “ModelBinding”, controllerName: “Home”) would generate a Binding </a>. We can achieve the same result using the anchor Tag Helper: <a asp-action ="ModelBinding" asp-controller="Home">Binding.

• AntiForgeryToken: Use this inside a <form> to insert a <hidden> element containing an anti-forgery token that will be validated when the form is submitted.

• Display and DisplayFor: Use this to generate HTML markup for the expression relative to the current model using a display template. There are built-in display templates for .NET types, custom templates can be created in the DisplayTemplates folder. The folder name is case-sensitive on case-sensitive file systems.

• DisplayForModel: Use this to generate HTML markup for an entire model instead of a single expression.

• Editor and EditorFor: Use this to generate HTML markup for the expression relative to the current model using an editor template. There are built-in editor templates for .NET types that use <lable> and <input> elements, and custom templates can be created in the EditorTemplates folder. The folder name is case-sensitive on case-sensitive filesystems.

• EditorForModel: Use this to generate HTML markup for an entire model instead of a single expression.

• Encode: Use this to safely encode an object or string into HTML. For example, the string value“” would be encoded as “<script>”. This is not normally necessary since the Razor @ symbol automatically encodes string values.

• Raw: Use this to render a string value without encoding as HTML.

• PartialAsync and RenderPartialAsync: Use these to generate HTML markup for a partial view. We can optionally pass a model and view data.

Defining views with Tag Helpers

Tag Helpers make it easier to make static HTML elements dynamic. The markup is cleaner and easier to read, edit, and maintain than if we use HTML Helpers.

However, Tag Helpers do not replace HTML Helpers because some things can only be achieved with HTML Helpers, like rendering output that contains multiple nested tags. Tag Helpers also cannot be used in Razor components. So, we must learn about HTML Helpers and treat Tag Helpers as an optional, better choice in some scenarios.

Tag Helper for front-end developers

Tag Helpers are especially useful for Front End (FE) developers who primarily work with HTML, CSS, and JavaScript because the FE developer does not have to learn C# syntax.