我们的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>