![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(278.4, 89%, 36%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EJL%3C/text%3E%3C/svg%3E)
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,199 questions
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(73.60000000000001, 90%, 17%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EZL%3C/text%3E%3C/svg%3E)
Hi @Jerry Lipan ,
<a class="nav-link @(Model[i].ActionName != null ? "":"collapsed")"
data-bs-target="#components-[@](/users/na/?userId=0f55de7e-bffd-0003-0000-000000000000)[i].Id"
data-bs-toggle="@(Model[i].ActionName != null ? "":"collapsed")"
href="/[@](/users/na/?userId=0f55de7e-bffd-0003-0000-000000000000)[i].ControllerName/[@](/users/na/?userId=0f55de7e-bffd-0003-0000-000000000000)[i].ActionName/@ViewBag.moduleId">
<i class="@Model[i].MenuIcon"></i>
<span>@Model[i].MenuName</span>
<i class="bi bi-chevron-down ms-auto"></i>
</a>
The issue relates to the above first level menu <a> tag. If you use F12 developer tools to check the Html elements and CSS style, you can see it not rendered as expect.
To dynamically add the attributes based on the model's property value, you could build an html string for the <a> tag and its attributes, then use Html.Raw() method to render the <a> tag.
After modifying, the Default.cshtml page is below:
@model List<WebApplication1.ViewModels.Menu>
@{
//int items = Model.Count();
int navcounter = 0; //to set the data-bs-target attribute.
}
@if (Model.Count > 0)
{
//use LINQ where clause to find all first level menu (parentid is null).
var firstlevelmenu = Model.Where(c => c.ParentId == null).ToList();
if (firstlevelmenu.Count > 0)
{
//use for statement to loop through the first level menu.
@for (int i = 0; i < firstlevelmenu.Count; i++)
{
//check whether current menu has the child menu.
var secondlevelmenu = Model.Where(c => c.ParentId != null && c.ParentId == firstlevelmenu[i].MenuId).ToList();
//define a string variable to builder the <a> tag.
var newatag = "<a class = 'nav-link ";
//add the href attribute.
if(firstlevelmenu[i].ControllerName !=null && firstlevelmenu[i].ActionName != null)
{
newatag += "collapsed'";
var hrefvalue = String.Format("href='/{0}/{1}'", firstlevelmenu[i].ControllerName, firstlevelmenu[i].ActionName);
newatag += hrefvalue;
if (secondlevelmenu.Count > 0)
{
newatag += "data-bs-target='#components-nav_" + navcounter + "' data-bs-toggle='collapse'";
}
}
else
{
newatag += "'";
newatag += "href='#'";
}
newatag += ">";
//add the menu icon.
newatag += "<i class='" + firstlevelmenu[i].MenuIcon + "'></i>";
//add the menu name
newatag += "<span>" + firstlevelmenu[i].MenuName + "</span>";
newatag += "<i class='bi bi-chevron-down ms-auto'></i>";
newatag += "</a>";
<li class="nav-item">
@Html.Raw(newatag) @*Use Html.Raw method to render the <a> tag.*@
<!-- Add the second level menu-->
@if (secondlevelmenu.Count > 0)
{
<ul id="components-nav_@navcounter" class="nav-content collapse " data-bs-parent="#sidebar-nav">
@for (int j = 0; j < secondlevelmenu.Count; j++)
{
<li>
<a asp-controller="@secondlevelmenu[j].ControllerName" asp-action="@secondlevelmenu[j].ActionName">
<i class="@secondlevelmenu[j].MenuIcon"></i>
<span>@secondlevelmenu[j].MenuName</span>
</a>
</li>
}
</ul>
navcounter++;
}
</li>
<li class="nav-heading"><hr /></li>
}
}
}
Then, the result is like this:
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion
