Add new menu position asp.net zero
In ASP.NET Zero, you can add a new menu position by following these steps:
Step 1: Open the MenuConfig.cs
file
In the Areas
folder, open the MenuConfig.cs
file. This file is responsible for defining the menu structure of your application.
Step 2: Add a new menu position
In the MenuConfig.cs
file, add a new MenuItem
to the MenuItems
collection. For example:
public override void ConfigureMenu(MenuConfigurationBuilder builder)
{
builder.AddMenuItem("MyNewMenu", "My New Menu", "MyNewMenu", "fas fa-new", "MyNewMenu", "MyNewMenu", "MyNewMenu");
}
In this example, we're adding a new menu item with the following properties:
Name
: The name of the menu item (e.g., "My New Menu")DisplayName
: The display name of the menu item (e.g., "My New Menu")Route
: The route of the menu item (e.g., "MyNewMenu")Icon
: The icon to display for the menu item (e.g., "fas fa-new")Order
: The order of the menu item (e.g., "MyNewMenu")Parent
: The parent menu item (e.g., "MyNewMenu")
Step 3: Update the menu layout
To display the new menu item in the correct position, you need to update the menu layout. You can do this by adding a new MenuSection
to the MenuConfig.cs
file:
public override void ConfigureMenu(MenuConfigurationBuilder builder)
{
builder.AddMenuItem("MyNewMenu", "My New Menu", "MyNewMenu", "fas fa-new", "MyNewMenu", "MyNewMenu", "MyNewMenu");
builder.AddMenuSection("MyNewMenu", "My New Menu", "fas fa-new", "MyNewMenu", "MyNewMenu", "MyNewMenu");
}
In this example, we're adding a new MenuSection
with the same name as the menu item (e.g., "MyNewMenu"). This will create a new section in the menu with the same name and icon.
Step 4: Update the menu template
To display the new menu item in the correct position, you need to update the menu template. You can do this by modifying the MenuTemplate.cshtml
file in the Areas
folder.
For example, you can add a new li
element to the menu template to display the new menu item:
<ul class="nav navbar-nav">
@foreach (var item in Model.MenuItems)
{
<li class="@item.CssClass">
<a asp-page="@item.Route" title="@item.DisplayName">
<i class="@item.Icon"></i>
@item.DisplayName
</a>
</li>
}
<li class="nav-item">
<a asp-page="MyNewMenu" title="My New Menu">
<i class="fas fa-new"></i>
My New Menu
</a>
</li>
</ul>
In this example, we're adding a new li
element to the menu template to display the new menu item. We're using the asp-page
attribute to link to the new menu item, and the title
attribute to display the menu item's display name.
That's it! After updating the MenuConfig.cs
file and the menu template, you should see the new menu item in the correct position in your application.