Migrate html helpers to ASP.NET Core

Question

I'm converting a project to ASP.NET Core. I need to migrate lots of reusable html helpers, but html helpers do not exist in Core.

Some are complex, some simple. Here's a extremely simple example:

@helper EditIcon()
{
    <i class="glyphicon glyphicon-pencil"></i>
}

Note that this is only an example.

Point is writing a tag helper for that is gigantic overkill. Same for partials. Same for view components.

We're talking about a little snippet of Razor. What is my best option?

@Alex I read it in multiple places. Also when I try it, I get `The helper directive is not supported.` — grokky, Feb 27 '17 at 20:30
`@helper` has been removed in core-mvc - you need to use view components etc — , Feb 27 '17 at 22:58
@StephenMuecke So my options: 1) tag helpers, 2) partials, 3) view components. That's it? Something else I don't know about perhaps? — grokky, Feb 28 '17 at 04:50
AFAIK, that's it (IMHO the old `@helper` was an mistake by MVC team anyway and its good to see they are gone) — , Feb 28 '17 at 04:55
@StephenMuecke Thanks for the confirmation. Though I disagree to the removal - little snippets of markup I can create without jumping through hoops was great, for our needs. — grokky, Feb 28 '17 at 04:58
Stunned to read they are gone and no suitable equivalent where you can get re-use within a view and still get Razor-like syntax. I have helpers throughout my legacy site for a good reason. — Savage, Jul 03 '23 at 13:58

score 15 · Answer 1 · edited Mar 27 '19 at 22:26

15

@helper directive is removed, but if you may consider using Func<dynamic, IHtmlContent> you are migrating a legacy code. Here is an example:

@{
    Func<dynamic, IHtmlContent> BrowserInfo(string btitle, string href, string imgfilename) =>
        @<div style="text-align: center">
            <a href="@href">
                <img src="~/content/images/browsers/@imgfilename" alt="@btitle"/>@btitle</a>
        </div>;
}

And use it just like old helper methods:

@BrowserInfo("Google Chrome", "http://www.google.com/chrome/", "browser_chrome.gif")(null)

edited Mar 27 '19 at 22:26

Richard Astbury

2,323
18
28

answered Oct 26 '18 at 23:20

mohghaderi

2,520
1
19
12

2

This won't work if you just copy/paste this example. You'll need to use `@BrowserInfo("Google Chrome", "http://www.google.com/chrome/", "browser_chrome.gif")(null)` to accomodate for the `dynamic` parameter in the Func. – Mladen B. Feb 26 '19 at 14:40
How to get rid of the semicolon at the end? – Artiom Mar 29 '19 at 12:14
How do I share it between multiple views? – Alex from Jitbit Oct 17 '19 at 13:46

score 14 · Answer 2 · answered Apr 29 '20 at 00:16

Personally I think this approach is cleaner for small in-page snippets:

https://www.mikesdotnetting.com/article/344/what-happened-to-helpers-in-asp-net-core

[...] One of those things is a more formal replacement for the Razor helper. You can now include HTML markup in the body of a method declared in a code block as a local method as previously, or in an @functions block. The method should return void, or Task if it requires asynchronous processing. Here is how the list helper is written in ASP.NET Core 3:

@{
    void Template(string[] listItems, string style) 
    {
        <ul>
        foreach (var listItem in listItems)
        {
            <li class="@style">@listItem</li>
        }
        </ul>
    }
}

and place it like this:

@{ Template(new[] { "A","B","C" },  "pretty" ); }

score 8 · Answer 3 · answered Nov 06 '20 at 14:28

I have successfully converted ASP.NET MVC Razor Helpers to Function Directives in .NET CORE 3.1 as an example shown below:

E.g. ASP.NET MVC 5 @helper syntax:

<div>
       @RenderHello();
</div>


@helper RenderHello() {
        <strong>Hello</strong>
}

Equivalent ASP.NET CORE 3.1 @functions directive syntax:

<div>
    <text>
    @{
        RenderHello();
    }
    </text>
</div>

@functions {
    private void RenderHello()
    {
        <strong>Hello</strong>
    }
}

Razor Function Directives

grokky · Accepted Answer · 2017-02-28T07:43:53.127

6

~~So, seems there are only three options:~~

So no simple way to migrate Razor snippets, without jumping through hoops.

EDIT

So looks like html helpers are available after all. They just haven't been properly documented!

edited Feb 28 '17 at 07:43

answered Feb 28 '17 at 05:03

grokky

8,537
20
62
96

1

Only supported locally. No way to share it between views. – Maxim Jul 31 '19 at 22:03
1

Helpers are not available at all, the text is misleading which made me read the whole conversation. The team specifically said they don't plan on bringing them back. – Sedat Kapanoglu Jan 30 '20 at 20:05
From https://stackoverflow.com/a/5159904/1942917 - https://www.mikesdotnetting.com/article/344/what-happened-to-helpers-in-asp-net-core – Preza8 Sep 29 '20 at 05:44

Migrate html helpers to ASP.NET Core

4 Answers4

Linked

Related