I want to create my own custom HTML Helper like the ones used in ASP.NET MVC, but I haven't been able to find how to implement them in the correct way.
I have found how to create custom Tag Helpers but not HTML Helpers. How do I create my own custom HTML Helpers?
For me I thought my HTML helpers weren't working until I spotted that the extension method is now on
IHtmlHelper
notHtmlHelper
.So for .net core:
Instead of for .net:
EDIT: I've also updated the return type for .net core to be IHtmlContent as using something like
HtmlContentBuilder
is a nicer way to compose HTML content and returning that returnsIHtmlContent
I was never able to get HtmlHelper extension methods to work, I always recieved:
Even though I had the proper namespace in my _ViewImports.cshtml file. So I decided to use the ability of Razor pages to now support injecting services that have been registered for dependency injection. As an example I have the need to inject some values from my configuration file into my _Layout.cshtml file. So I did the following:
1) Defined a IConfigurationHelperService interface:
2) Defined an implementation of that interface in a ConfigurationHelperSerivce class (which itself is using dependency injection to get the regular configuration class):
3) Registered the service for injection via ConfigureServices in Startup.cs:
4) Added the proper namespace as a using statement into my _ViewImports.cshtml file.
5) Used the @inject keyword to define it for use in the _Layout.cshtml file.
It worked great for me, and I can see a lot more uses for this on simpler pages where defining models would be too much work.
HTML Helpers look to be supported in ASP.NET Core and are awaiting documentation:
https://docs.microsoft.com/en-au/aspnet/core/mvc/views/html-helpers
[Edit:] Since answering, the above page no longer exists. I'd say HTML Helpers, while they work, are no longer "supported" in ASP.NET Core.
Looking at the ASP.NET Core source they work fairly similarly to older versions of ASP.NET MVC:
https://github.com/aspnet/AspNetCore/blob/master/src/Mvc/Mvc.ViewFeatures/src/Rendering/HtmlHelperDisplayExtensions.cs
Example
MyHTMLHelpers.cs:
_ViewImports.cshtml (second line is the important change):
MyView.cshtml:
Outputs:
Here is an example for .Net Core 2 using TagBuilders
This has been well explained by Danny van der Kraan in his blog post here. The answer below is an extract from this post:
ASP.NET Core 1.0 [MVC 6]
comes with a new exciting feature calledTagHelpers
. InASP.Net Core 1.0
there is no concept of HTML Helper like in MVC.What are TagHelpers?
TagHelpers
can be seen as the evolution of HTML helpers which were introduced with the launch of the firstMVC
framework. To provide context you have to imagine that with classic ASP the only way you could automate the generation of HTML is via custom subroutines. After that ASP.NET came with server controls, with view states as biggest plus, to simulate the look and feel of desktop applications and help with the transition for desktop developers. But we all know what happens when we try to jam squares in to round holes. We had to face the fact that web development is nothing like desktop development. To get in line with proper web development the ASP.NETMVC
framework was launched with HTML helpers to automate the HTML output. But HTML helpers never really gelled, especially not with front end developers and designers. One of the main pet peeves was that it made you switch a lot from angle brackets(HTML, CSS)
toC# (Razor syntax)
during work on views, which made the experience unnecessarily uncomfortable.[MVC 6]
wants to address this and some smaller issues by introducingTagHelpers
. Example HTML helper:With the anchor TagHelper this would look like:
PS: Please note that asp- is just a convention, but more on that later.
The output rendered in the browser is the same for both:
PS: Provided the default route has not been altered.
For more information about
TagHelpers
click hereWell i guess this answer won't be noticed but here's what i came up with using service registrations:
I hope it helps someone.
Register the service:
Use the service:
Interface:
Implementation: