• 章节:10
  • 访问:2940
  • 时长:00:15:33
  • 日期:2018-06-15 09:25

我们的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">&times;</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">&times;</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>