Asp.Net MVC CRUD增删改查 三
此内容将分为五部分（环境搭建、无样式CRUD，ACE前端样式CRUD，提交代码至git，打包发布）
本章为第三部分ACE前端样式CRUD。
内容可能会过于啰嗦请见谅！
此部分我们将为第二章底部的无样式源码增加一个比较好看流行的样式ACE。
演示地址：http://ace.jeka.by/
源码地址：https://github.com/bopoda/ace
这里我制作简单拆分，因为我懒得去做对IE的支持。所有这里的样式拆分支持出IE以外的浏览器。
这个解释起来有点麻烦，我尽量解释一下。
首先在Views文件夹内建立一个_ViewStart.cshtml，我习惯建立按默认的命名。
_ViewStart.cshtml内只需要一个指定布局文件路径。
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
按着这句话来说我们就需要在Views文件夹内建立一个Shared文件夹。
并且在Shared内建立一个_Layout.cshtml页面文件。
_Layout.cshtml需要放入代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>404ABC ACE样式</title>
@{ Html.RenderPartial("_Link"); }
</head>
<body class="no-skin" id="html_body" style="overflow-x:hidden;">
@{ Html.RenderPartial("_DialogConfirm"); }
@{ Html.RenderPartial("_Header"); }
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try { ace.settings.loadState('main-container') } catch (e) { }
</script>
@{ Html.RenderPartial("_Sidebar"); }
@RenderBody()
</div>
@{ Html.RenderPartial("_Footer"); }
@{ Html.RenderPartial("_Script"); }
@RenderSection("pagespecific", false)
</body>
</html>
现在可以看出页面上有很多@Html.RenderPartial的内容，这里是为了将一些页面中通用的内容都放到一起统一管理。在增加通用页面样式和js。而且在修改统一的头部和尾部时候都会很容易只需要修改一个地方一个点基本上就能解决问题。
有了这个以后，我们接下来就需要一步步将@Html.RenderPartial的内容建立出来。
代码从上往下看第一个是@{ Html.RenderPartial("_Link"); }
所以咱们接着在Shared内建立一个_Link.cshtml，这个文件内我是只将对页面样式有关的js和css放入。
<link rel="stylesheet" href="@Url.Content("~/assets/css/bootstrap.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/assets/font-awesome/4.5.0/css/font-awesome.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/assets/css/fonts.googleapis.com.css")" />
<link rel="stylesheet" href="@Url.Content("~/assets/css/ace.min.css")" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="@Url.Content("~/assets/css/ace-skins.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/assets/css/ace-rtl.min.css")" />
<script src="@Url.Content("~/assets/js/ace-extra.min.js")"></script>
<link rel="stylesheet" href="@Url.Content("~/assets/css/jquery-ui.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/assets/css/chosen.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/assets/js/modern-google-loader-in-pure-css/css/style.css")"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="@Url.Content("~/assets/css/ace-part2.min.css")" class="ace-main-stylesheet" />
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" href="@Url.Content("~/assets/css/ace-ie.min.css")" />
<![endif]-->
<!--[if lte IE 8]>
<script src="@Url.Content("~/assets/js/html5shiv.min.js")"></script>
<script src="@Url.Content("~/assets/js/respond.min.js")"></script>
<![endif]-->
<style>
.error {
color:red;
}
</style>
以上是_Link.cshtml中的我放入的样式内容
接下来我们建立@{ Html.RenderPartial("_DialogConfirm"); }中的_DialogConfirm.cshtml文件
<div id="dialog-confirm" class="hide">
<div class="alert alert-info bigger-110" id="dialog-title">
将要该信息此操作不可逆！
</div>
<div class="space-6"></div>
<p class="bigger-110 bolder center grey" id="dialog-content">
<i class="ace-icon fa fa-hand-o-right blue bigger-120"></i>
请再三确认该操作！
</p>
</div>
<div id="loadingToast" style="display:none;">
<div class="showbox_mask"></div>
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
</svg>
</div>
</div>
</div>
上面的内容是我为了自己代码上方便讲一下提示内容先放入到每个页面内在需要的时候方便使用。
所有的@{ Html.RenderPartial(""); }都需要在Shared文件夹内有对应的文件，这里就一一介绍了，页面尾部我会将提供源码。
除了 Html.RenderPartial之外，细心的朋友肯定还发现了@RenderBody()和@RenderSection。这里我来解释一下。
上面说的都是页面通用内容放在一起，@RenderBody()和@RenderSection就是两个放个性定制内容的。所有页面的动态内容比如列表内容，新增页面都出现在@RenderBody()的位置上，所以讲@RenderBody()对应放在_layout内的什么位置是很重要的。
@RenderBody()是单一的，不能写多个。
@RenderSection是一个可多写的预留区域，在其他分部页内可调用也可以不调用不报错。 主要是拿来放一些特殊的js或css内容。
好了，其他就没有什么特殊要解释的内容了。直接上代码如果有代码上不明白的地方请留言或者加QQ群。
地址：http://on0lcpgv4.bkt.clouddn.com/ACE%E6%A0%B7%E5%BC%8F.7z
Github地址：https://github.com/zhjgstc/asp.net-mvc-crud-ace-style