How to reuse HTML snippets INSIDE a cshtml view in ASP.NET Core MVC?

Question

I have a file called TopBar.cshtml:

<nav class="white" role="navigation">
    <div class="nav-wrapper container">
        <a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="left hide-on-med-and-down">
            <li><a href="#">Navbar Link</a></li>
        </ul>
        <ul id="nav-mobile" class="sidenav">
            <li><a href="#">Navbar Link</a></li>
        </ul>
        <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>
</nav>

As you can see, there are two identical sections defined for menu items. One for larger screens and one for smaller ones. In ASP.NET MVC I could do this:

<nav class="white" role="navigation">
    <div class="nav-wrapper container">
        <a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="left hide-on-med-and-down">
            @Menu()
        </ul>
        <ul id="nav-mobile" class="sidenav">
            @Menu()
        </ul>
        <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>
</nav>

@helper Menu() {
    <li><a href="#">Navbar Link</a></li>
}

In other words, I could use @helper to get HTML reusage INSIDE one and only one view.

However, as much as I know this is removed in ASP.NET Core MVC. What can I do to get to the same result?

@Thangadurai, Partial Views are defined in external files. In this case, encapsulation and self-containment is better. — mohammad rostami siahgeli
– mohammad rostami siahgeli, Commented Apr 14, 2018 at 13:39
@mohammadrostamisiahgeli What solution did you find to re-use HTML code inside view? — Tomas
– Tomas, Commented Jan 22, 2020 at 8:29

Anuraj · Accepted Answer · 2018-04-16 09:40:36Z

2

You can do something like this.

@{
   Func<System.Collections.Generic.IEnumerable<string>, Microsoft.AspNetCore.Html.IHtmlContent> Menu = @<ul>
   @foreach (var menuEntry in item)
   {
       <li><a href="@menuEntry">@menuEntry</a></li>
   }
   </ul>;
}

And you can use the menu function like this.

@Menu(new[]{"Home","About"})

https://github.com/aspnet/Razor/issues/715#issuecomment-299342376 - It is mentioned here that, ASP.NET Team don't have any plans to do the @helper implementation.

answered Apr 16, 2018 at 9:40

Anuraj

19.6k7 gold badges61 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to reuse HTML snippets INSIDE a cshtml view in ASP.NET Core MVC?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related