欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

程序员文章站 2023-10-16 22:11:30
说明: .NET Core版本为:2.2 AdminLTE版本为:2.4.18 Bootstrap版本为:3.4.1 font awesome版本为:4.7.0 1、使用VS 2017新建项目:AdminLteDemo,完成后添加区域Admin 在Areas/Admin/Views文件夹添加文件并分 ......

说明:
.net core版本为:2.2
adminlte版本为:2.4.18
bootstrap版本为:3.4.1
font-awesome版本为:4.7.0

1、使用vs 2017新建项目:adminltedemo,完成后添加区域admin
在areas/admin/views文件夹添加文件并分别添加如下代码,主要为引用和页面布局使用,这两个文件直接从创建模板里面创建就可以,不用修改名称:
_viewimports.cshtml

@addtaghelper *, microsoft.aspnetcore.mvc.taghelpers

_viewstart.cshtml

@{
    layout = "_layout";
}

2、在startup类中添加对区域路由的代码,使用home管理作为默认路由地址如下:

app.usemvc(routes =>
{
     routes.maproute(
         name: "areas",
         template: "{area:exists}/{controller=homemanagement}/{action=index}/{id?}");
                    
     routes.maproute(
          name: "default",
          template: "{controller=home}/{action=index}/{id?}");
 });

3、在areas/admin/contorllers文件夹中添加两个控制器
home管理控制器homemanagementcontroller,记得添加区域信息,不然路由找不到内容,代码如下:

[area("admin")]
public class homemanagementcontroller : controller
{
    public iactionresult index()
    {
        return view();
    }
}

学生管理控制器studentmanagementcontroller,记得添加区域信息,不然路由找不到内容,代码如下:

[area("admin")]
public class studentmanagementcontroller : controller
{
    public iactionresult index()
    {
        return view();
    }
}

4、对homemanagementcontroller的action添加对应的视图文件,代码如下:

@{
    viewdata["title"] = "index";
}
<section class="content-header">
    <h1>home management index</h1>
</section>

对studentmanagementcontroller的action添加对应的视图文件,代码如下:

@{
    viewdata["title"] = "index";
}
<section class="content-header">
    <h1>student management index</h1>
</section>

两个视图里面都添加了一个h1标题,已区分不同的内容
5、使用libman添加对adminlte、bootstrap和font-awesome的引用
方法:wwwroot\lib 右键:添加->客户端库
基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

注意:bootstrap 3.*版本为twitter-bootstrap
由于项目自带的bootstrap版本为4.*,所以需要添加对bootstrap 3.*版本引用

在areas/admin/views添加shared文件夹,并添加_layout.cshtml文件,代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>@viewbag.title</title>
    <link rel="stylesheet" href="~/lib/twitter-bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="~/lib/admin-lte/css/adminlte.css" />
    <link rel="stylesheet" href="~/lib/admin-lte/css/skins/_all-skins.css" />
    <link rel="stylesheet" href="~/lib/icheck/skins/flat/blue.css" />
</head>
@{
    var controller = (string)viewcontext.routedata.values["controller"];
}
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <header class="main-header">
            <a href="#" class="logo">
                <span class="logo-mini"><b>a</b>lt</span>
                <span class="logo-lg"><b>admin</b>lte</span>
            </a>
            <nav class="navbar navbar-static-top">
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">切换导航</span>
                </a>

                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav"></ul>
                </div>
            </nav>
        </header>

        <aside class="main-sidebar">
            <section class="sidebar">
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="~/lib/admin-lte/img/user2-160x160.jpg" class="img-circle" alt="user image" />
                    </div>
                    <div class="pull-left info">
                        <p>alexander pierce</p>
                        <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                    </div>
                </div>

                <!-- search form -->
                <form action="#" method="post" class="sidebar-form">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="search..." />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
                <!-- /. search form -->
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">主导航</li>
                    @{
                        var mainlist = new list<string>()
                                                {
                                                    "homemanagement"
                                                };
                        var mainactive = mainlist.contains(controller) ? "active" : "";
                    }
                    <li class="@mainactive treeview">
                        <a href="#">
                            <i class="fa fa-dashboard"></i><span>home management</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li @html.raw(controller == "homemanagement" ? "class=\"active\"" : "")><a asp-area="admin" asp-action="index" asp-controller="homemanagement"><i class="fa fa-circle-o"></i>home index</a></li>

                        </ul>
                    </li>
                    @{
                        var studentlist = new list<string>()
                                    {
                                        "studentmanagement"
                                    };
                        var studentactive = studentlist.contains(controller) ? "active" : "";
                    }
                    <li class="@studentactive treeview">
                        <a href="#">
                            <i class="fa fa-dashboard"></i><span>student management</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li @html.raw(controller == "studentmanagement" ? "class=\"active\"" : "")><a asp-area="admin" asp-action="index" asp-controller="studentmanagement"><i class="fa fa-circle-o"></i>student index</a></li>

                        </ul>
                    </li>



                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-files-o"></i>
                            <span>layout options</span>
                            <span class="pull-right-container">
                                <span class="label label-primary pull-right">4</span>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="#"><i class="fa fa-circle-o"></i> top navigation</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> boxed</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> fixed</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> collapsed sidebar</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </aside>

        <div class="content-wrapper">
            @renderbody()
        </div>

        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>version</b> 0.0.1
            </div>
            <strong>copyright &copy; @datetime.now.year  </strong> all rights reserved.
        </footer>
    </div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>
<script src="~/lib/admin-lte/js/adminlte.js"></script>
</body>
</html>

_layout.cshtml文件中adminlte主要分为如下及部分:

  1. main-header
  2. main-sidebar
  3. content-wrapper
  4. main-footer

其中,1、2、4在项目充基本是固定的,3是需要根据权限、人员进行动态分配的和调整的

运行效果图
基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理
基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

需要解决的问题:

  1. 动态菜单分配问题

希望adminlte能出一版bootstr 4.*的后台管理框架

我的公众号

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理