How to pass line of HTML as variable?

April 14, 2022

I’m trying to make a menu for my app, and I’m trying to avoid repeating the same HTML code, so I want to put some data into array and loop it. It works fine for text, but I’m having trouble passing Bootstrap icons which are written in <i> markups.

I’m working on an MVC .NET project in cshtml file.

Here is what I have:

@{
   string[] menuItems= {"Clients"};
}

<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
   <i class="bi bi-people-fill clients"></i>
   <span class="menu-item-text">@menuItems[0]</span>
</a>

And I’m trying to achieve something like this:

@{
   string[,] menuItems= {"Clients", "<i class="bi bi-people-fill clients"></i>"};
}

<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
   @menuItems[0,1]
   <span class="menu-item-text">@menuItems[0,0]</span>
</a>

Is there a way to make HTML read the string as part of the code?

>Solution :

By default any text being emitted from the server is HTML-encoded. You can bypass this by using Html.Raw():

@Html.Raw(menuItems[0,1])

Note that this should be used with caution, because if you use this to output anything that’s provided by user input or in any way editable by users then you are exposing your users to security risks.

This could be a good opportunity for you to investigate other ways to achieve the same functionality without this potential risk. For example, you could already have the markup in the view and use the dynamic data to show/hide the markup. Or not even rely on server-side code at all and style/change menu items client-side.