我们的adminlte里面的demo例子 顶部是公共的js 和css 底部是当前页面需要js css等
所以我们添加一个布局视图 然后公共就放在布局视图里面
然后底部我们弄一个section 用来给不同的视图 添加不同的js css 等
分布视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@ViewBag.Title</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="/content/adminlte30/plugins/datatables/dataTables.bootstrap4.css">
<!-- Theme style -->
<link rel="stylesheet" href="/content/adminlte30/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition">
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
具体的内容视图页
@{ ViewBag.Title = "文章管理"; } <!-- Content Header (Page header) --> <section class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1>@ViewBag.Title</h1> </div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="#">首页</a></li> <li class="breadcrumb-item active">@ViewBag.Title</li> </ol> </div> </div> </div><!-- /.container-fluid --> </section> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <button type="button" class="btn btn-defaul" data-toggle="modal" data-target="#myModal" disabled>添加角色</button> </div> <!-- /.card-header --> <div class="card-body"> <table id="example2" class="table table-bordered table-hover"> <thead> <tr> <th>ID</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> </table> </div> <!-- /.card-body --> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close float-right" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">添加角色</h4> </div> <div class="modal-body"> <form class="form-horizontal" action="/role/index" method="post"> <div class="card-body"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">名称</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputEmail3" name="name" placeholder="请输入角色名称"> </div> </div> </div> <!-- /.card-body --> <div class="card-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button> <button type="submit" class="btn btn-primary float-right">确定</button> </div> <!-- /.card-footer --> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </div> <!-- /.card --> </div> <!-- /.col --> </div> <!-- /.row --> </section> @section scripts{ <!-- ./wrapper --> <!-- jQuery --> <script src="~/Content/adminlte30/plugins/jquery/jquery.min.js"></script> <!-- Bootstrap 4 --> <script src="~/Content/adminlte30/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- DataTables --> <script src="~/Content/adminlte30/plugins/datatables/jquery.dataTables.js"></script> <script src="/include/plugins/datatables/dataTables.bootstrap4.js"></script> <!-- SlimScroll --> <script src="~/Content/adminlte30/plugins/slimScroll/jquery.slimscroll.min.js"></script> <!-- FastClick --> <script src="~/Content/adminlte30/plugins/fastclick/fastclick.js"></script> <!-- AdminLTE App --> <script src="~/Content/adminlte30/dist/js/adminlte.min.js"></script> <!-- AdminLTE for demo purposes --> <script src="~/Content/adminlte30/dist/js/demo.js"></script> <!-- page script --> <script> $(function () { $('#example2').DataTable({ paging: true, lengthChange: false, searching: false, ordering: true, info: true, autoWidth: false, serverSide: true, iDisplayLength: 15, iDisplayStart: 0, bStateSave: true, pagingType: "full_numbers", order: [[0, "desc"]], aoColumnDefs: [ { "bSortable": false, "aTargets": [1, 2] } ], ajax: { // url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action url: "/role/load", type: 'POST', // 传给服务器的数据,可以添加我们自己的查询参数 data: function (param) { param.opportunityNO = 'key'; return param; } }, language: { //国际化配置 "sProcessing": "正在获取数据,请稍后...", "sLengthMenu": "显示 _MENU_条", "sZeroRecords": "无数据", "sInfo": "从 _START_到 _END_ 条记录 总记录数为 _TOTAL_ 条", "sInfoEmpty": "记录数为0", "sInfoFiltered": "(全部记录数_MAX_条)", "sInfoPostFix": "", "sSearch": "搜索", "sUrl": "", "oPaginate": { "sFirst": "第一页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "最后一页" } }, columns: [ { "data": "ID" }, { "data": "Name" }, { "data": function (obj) { return obj.AddTime; } }, { "data": function (obj) { return '<button type="button" class="btn btn-default btn-xs" onclick="$(\'#roleid\').val(' + obj.ID + ');$(\'#myModal2\').modal(\'show\');">配置权限</button>'; } } ] }); }); </script> } <!-- 模态框(Modal) --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close float-right" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">配置权限</h4> </div> <div class="modal-body"> <form class="form-horizontal" action="/role/addqx" method="post"> <input id="roleid" type="hidden" name="roleid" value="0" /> <input id="selectid" type="hidden" name="selectid" value="0" /> <div class="card-body"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">选择权限</label> <div class="col-sm-10"> <ul id="treeDemo" class="ztree"></ul> </div> </div> </div> <!-- /.card-body --> <div class="card-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button> <button type="submit" onclick="GetCheckedAll();" class="btn btn-primary float-right">确定</button> </div> <!-- /.card-footer --> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>