refactor: 侧边栏菜单 Active 使用绑定

This commit is contained in:
Argo Window10 2019-11-28 00:20:39 +08:00
parent d1525e0651
commit 41e69b820c
5 changed files with 58 additions and 11 deletions

View File

@ -1,4 +1,5 @@
using Bootstrap.Admin.Models;
using Bootstrap.Admin.Extensions;
using Bootstrap.Admin.Models;
using Bootstrap.Admin.Shared;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
@ -69,7 +70,12 @@ namespace Bootstrap.Admin.Components
public string HomeUrl { get; protected set; } = "/Pages";
/// <summary>
///
/// 获得/设置 当前请求路径
/// </summary>
protected string RequestUrl { get; set; } = "";
/// <summary>
/// OnInitializedAsync 方法
/// </summary>
/// <returns></returns>
protected override async Task OnInitializedAsync()
@ -81,11 +87,31 @@ namespace Bootstrap.Admin.Components
}
else
{
Model = new NavigatorBarModel(state.User.Identity.Name);
RequestUrl = new UriBuilder(NavigationManager?.Uri ?? "").Path;
Model = new NavigatorBarModel(state.User.Identity.Name, RequestUrl.ToMvcMenuUrl());
IsAdmin = state.User.IsInRole("Administrators");
UserName = state.User.Identity.Name ?? "";
DisplayName = Model.DisplayName;
}
}
/// <summary>
///
/// </summary>
/// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender)
{
if (!firstRender) ResetSideBar();
}
/// <summary>
/// 更新侧边栏方法
/// </summary>
public void ResetSideBar()
{
RequestUrl = new UriBuilder(NavigationManager?.Uri ?? "").Path;
Model = new NavigatorBarModel(UserName, RequestUrl.ToMvcMenuUrl());
SideBar?.Update(Model);
}
}
}

View File

@ -4,14 +4,23 @@ using Microsoft.AspNetCore.Components;
namespace Bootstrap.Admin.Components
{
/// <summary>
///
/// 侧边栏组件
/// </summary>
public class SideBarBase : BootstrapComponentBase
{
/// <summary>
///
/// 获得/设置 侧边栏绑定 Model 实例
/// </summary>
[Parameter]
public NavigatorBarModel Model { get; set; } = new NavigatorBarModel("");
/// <summary>
/// 视图更新方法
/// </summary>
public void Update(NavigatorBarModel model)
{
Model = model;
StateHasChanged();
}
}
}

View File

@ -1,4 +1,7 @@
namespace Bootstrap.Admin.Extensions
using System.Collections.Generic;
using System.Linq;
namespace Bootstrap.Admin.Extensions
{
/// <summary>
/// Url 地址辅助操作类
@ -6,17 +9,28 @@
public static class UrlHelperExtensions
{
/// <summary>
/// 转换为 Blazor 地址 移除开始 ~ 字符
/// 转换为 Blazor 地址 ~/Admin/Index => /Admin/Index
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public static string ToBlazorLink(this string url) => url.TrimStart('~');
/// <summary>
/// 转化为 Blazor 菜单地址
/// 转化为 Blazor 菜单地址 ~/Admin/Index => /Pages/Admin/Index
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public static string ToBlazorMenuUrl(this string url) => url.Replace("~", "/Pages");
/// <summary>
/// 转化为 Mvc 菜单地址 /Pages/Admin/Index => ~/Admin/Index
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public static string ToMvcMenuUrl(this string url)
{
var index = new List<string>() { "/Pages", "/Pages/Admin" };
return index.Any(u => u.Contains(url, System.StringComparison.OrdinalIgnoreCase)) ? "~/Admin/Index" : url.Replace("/Pages", "~");
}
}
}

View File

@ -12,6 +12,6 @@
else
{
<li class="nav-item">
<a href="@Menu.Url.ToBlazorMenuUrl()" id="@string.Format("menus_{0}",Menu.Id)" class="nav-link @Menu.Active"><i class="@Menu.Icon"></i><span class="flex-fill">@Menu.Name</span></a>
<a href="@Menu.Url.ToBlazorMenuUrl()" id="@string.Format("menus_{0}",Menu.Id)" class="@(Menu.Active =="active" ? "nav-link active" : "nav-link")"><i class="@Menu.Icon"></i><span class="flex-fill">@Menu.Name</span></a>
</li>
}

View File

@ -59,8 +59,6 @@
var menuId = 'menus_' + id;
var $curMenu = $('.sidebar .active').first();
if ($curMenu.attr('id') !== menuId) {
$curMenu.removeClass('active');
var $menu = $('#' + menuId).addClass('active');
// set website title
$('head title').text($menu.text());
this.resetTab(id);