第一次看到ACE模板，有种感动，有种相见恨晚的感觉，于是迅速来研究。它本身是基于bootstrap和jqueryui，但更nice，整合之后为后台开发节省了大量时间。 发现虽然不是完美，整体效果还是不错，特此分享给园友。这一节先讲其中的Jqgrid。按照国际惯例，先上两张图。
集成了button，form，treeview以及日历，时间轴、chart等控件，非常丰富。下面是Jqgrid在MVC中的使用。
jqgrid的加载，排序，查找都是基于后台方法，不是在内存中完成，但也有一些小坑。下面一一道来。
一、引入ace模板
ace本身考虑了对ie的兼容，加上bootstrap和jqueryui所以引入的样式和脚本文件比较多。我拿掉了一下googlefont的链接，请求太慢了，你懂的。现在MVC最关心的就是RenderBody的位置。在page-content下的Row，也可以将page-header放入子页面中去，自己多写几个元素，这个就在于你自己的选择了。
<div class="page-content">
<div class="page-header">
<h1>
<span>控制台</span>
<small>
<i class="icon-double-angle-right"></i>
<span>查看</span>
</small>
</h1>
</div><!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
@RenderBody()
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
全部的layout.cshtml
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@ViewBag.Title</title>
<link href="~/Content/CSS/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/CSS/font-awesome.min.css" />
<script src="~/Content/Js/jquery-2.0.3.min.js"></script>
<link href="~/Content/CSS/niqiu.css" rel="stylesheet" />
<!--[if IE 7]>
<link rel="stylesheet" href="~/Content/CSS/font-awesome-ie7.min.css" />
<![endif]-->
<!-- page specific plugin styles -->
<!-- ace styles -->
<link rel="stylesheet" href="~/Content/CSS/ace.min.css" />
<link rel="stylesheet" href="~/Content/CSS/ace-rtl.min.css" />
<link rel="stylesheet" href="~/Content/CSS/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="~/Content/CSS/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="~/Content/Js/ace-extra.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="~/Content/Js/html5shiv.js"></script>
<script src="~/Content/Js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<script type="text/javascript">
try { ace.settings.check('navbar', 'fixed') } catch (e) { }
</script>
<div class="navbar-container" id="navbar-container">
<div class="navbar-header pull-left">
<a href="#" class="navbar-brand">
<small>
<i class="icon-leaf"></i>
XiaoNao Admin
</small>
</a><!-- /.brand -->
</div><!-- /.navbar-header -->
<div class="navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
<li class="green">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="icon-envelope icon-animated-vertical"></i>
<span class="badge badge-success">5</span>
</a>
<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
<