Custom HTML Helper in ASP.NET Core- Session 37

Custom HTML Helper - Session 37

In this session of ASP.NET Core, we will discuss about Custom HTML Helper and create a Custom HTML Helper and use the created helper inside our Views. Also, we continue our discussion in Session 36 about changing properties format in Edit View. But in this session, we use DisplayFormat instead of EditorTemplates for achieving this purpose.

Change Properties Format with DisplayFormat in Edit Mode

During Session 36, we use EditorTemplates for applying our required changes on the Model properties in Edit mode. Also, in Session 33 we use Data Annotation (DisplayFormat) for changing properties format on View mode. In this session we try to change Model Properties in Edit mode with DisplayFormat. Thus, we add this attribute to the Model which is bound to the View that used EditorForModel Html Helper same as session33. Then, we set ApplyFormatInEditMode option to True, to be applied on the View on Edit mode.

For instance, in our project we want to change DateTime format of Edit View with above mentioned technique. Thus, we add this attribute on Cost Model and set ApplyFormatInEditMode option to True.

Just bear in mind, in previous session we made this change via EditorTemplates. Thus we should change DateTime.cshtml file in Views/Shared/EditorTemplates as shown below.

Create Custom HTML Helper

There is no predefined HTML class extension available for image tag. Thus, for loading an image inside our Views, we should use <img></img> tag or we can create a Custom Html Helper for this purpose.

Hence, for above mentioned target, we can create a folder in root of our project with name of “CustomHtmlHelper” or anything else that you prefer. Then, create a class inside the newly created folder with name of “CustomHtmlHelpers.cs” or anything that you wish. Just, remember that, both class and method inside mentioned class should be Static.

Custom Html Helper folder and class

Next, we need to create a method with result of TagBuilder and use input parameters to set the required attribute of the Html tag. In this project, as we decided to create a Custom Html Helper for <img><img/> tag, we need to set “src”, “alt” and “class” attribute as well. Later, we can set above mentioned attribute with attribute.add method.

For using TagBuilder in the above class, we must add Microsoft.AspNetCore.Mvc.Rendering namespace to the class.

Lunch Custom Html Helper in Views

We can use Custom Html Helper in the Views same as the built-in one. Just for this purpose, we need to add the created Helper namespace to the View.

In our practice project, we decided to add image to our cost data, thus we add two more properties to Cost Model to handle the data of photo path and Alt Text.

Then we use these two properties to render the image inside the View.

As you can see, in above piece of code, we add required namespace then we call the HTML Helper extension.

If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Also you can have access to list of all sessions HERE.

You can download this Session Slides form HERE

0.00 avg. rating (0% score) - 0 votes


4 1 vote
Article Rating

Inline Feedbacks
View all comments