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?

Hump

not exist? are you sure? – Selfexamination

@Alex I read it in multiple places. Also when I try it, I get The helper directive is not supported. – Hump

@helper has been removed in core-mvc - you need to use view components etc – Cabotage

@StephenMuecke So my options: 1) tag helpers, 2) partials, 3) view components. That's it? Something else I don't know about perhaps? – Hump

AFAIK, that's it (IMHO the old @helper was an mistake by MVC team anyway and its good to see they are gone) – Cabotage

@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. – Hump

So sad to see one really useful feature messed up... – Colic

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. – Weatherford

Answer 1

So, seems there are only three options:

• tag helpers
• partials
• view components

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!

Hump

Only supported locally. No way to share it between views. – Shabbygenteel

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. – Dunleavy

From https://mcmap.net/q/109583/-how-do-i-define-a-method-in-razor - mikesdotnetting.com/article/344/… – Jellyfish

Answer 2

@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)

Mahone

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. – Colic

How to get rid of the semicolon at the end? – Ostracism

How do I share it between multiple views? – Atronna

Answer 3

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" ); }

Dairy

Answer 4

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

Collocate