第一次看到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> <div class="row"> <div class="col-xs-12"> @RenderBody() div> div> div>
全部的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.Titletitle>
<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" />
<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" />
<script src="~/Content/Js/ace-extra.min.js">script>
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>
div>
<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">5span>
a>
<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
<li class="dropdown-header">
<i class="icon-envelope-alt">i>
5 Messages
li>
<li>
<a href="#">
<img src="~/Content/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Alex:span>
Ciao sociis natoque penatibus et auctor ...
span>
<span class="msg-time">
<i class="icon-time">i>
<span>a moment agospan>
span>
span>
a>
li>
<li>
<a href="#">
<img src="~/Content/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Susan:span>
Vestibulum id ligula porta felis euismod ...
span>
<span class="msg-time">
<i class="icon-time">i>
<span>20 minutes agospan>
span>
span>
a>
li>
<li>
<a href="#">
<img src="~/Content/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Bob:span>
Nullam quis risus eget urna mollis ornare ...
span>
<span class="msg-time">
<i class="icon-time">i>
<span>3:15 pmspan>
span>
span>
a>
li>
<li>
<a href="#">
See all messages
<i class="icon-arrow-right">i>
a>
li>
ul>
li>
<li class="light-blue">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
<img class="nav-user-photo" src="~/Content/avatars/user.jpg" alt="Jason's Photo" />
<span class="user-info">
@if( Session["uname"]!=null){
<small>Welcome,small>
@Session["uname"].ToString();
}
span>
<i class="icon-caret-down">i>
a>
<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li>
<a href="#">
<i class="icon-cog">i>
Settings
a>
li>
<li>
<a href="#">
<i class="icon-user">i>
Profile
a>
li>
<li class="divider">li>
<li>
<a href="@Url.Action("LogOff","User")">
<i class="icon-off">i>
Logout
a>
li>
ul>
li>
ul>
div>
div>
div>
<div class="main-container" id="main-container">
<script type="text/javascript">
try { ace.settings.check('main-container', 'fixed') } catch (e) { }
script>
<div class="main-container-inner">
<a class="menu-toggler" id="menu-toggler" href="#">
<span class="menu-text">span>
a>
<div class="sidebar" id="sidebar">
<script type="text/javascript">
try { ace.settings.check('sidebar', 'fixed') } catch (e) { }
script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="icon-signal">i>
button>
<button class="btn btn-info">
<i class="icon-pencil">i>
button>
<button class="btn btn-warning">
<i class="icon-group">i>
button>
<button class="btn btn-danger">
<i class="icon-cogs">i>
button>
div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success">span>
<span class="btn btn-info">span>
<span class="btn btn-warning">span>
<span class="btn btn-danger">span>
div>
div>
<ul class="nav nav-list">
<li class="active">
<a href="@Url.Action("Index","Admin")">
<i class="icon-dashboard">i>
<span class="menu-text"> 控制台 span>
a>
li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-list">i>
<span class="menu-text"> 产品 span>
<b class="arrow icon-angle-down">b>
a>
<ul class="submenu">
<li>
<a href="@Url.Action("Index","Product")">
<i class="icon-double-angle-right">i>
产品管理
a>
li>
<li>
<a href="@Url.Action("CategoryList","Product")">
<i class="icon-double-angle-right">i>
分类管理
a>
li>
ul>
li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-desktop">i>
<span class="menu-text"> 用户 span>
<b class="arrow icon-angle-down">b>
a>
<ul class="submenu">
<li>
<a href="@Url.Action("Index","User")">
<i class="icon-double-angle-right">i>
用户管理
a>
li>
<li>
<a href="@Url.Action("EditInfo","User")">
<i class="icon-double-angle-right">i>
个人设置
a>
li>
ul>
li>
ul>
<div class="sidebar-collapse" id="sidebar-collapse">
<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right">i>
div>
<script type="text/javascript">
try { ace.settings.check('sidebar', 'collapsed') } catch (e) { }
script>
div>
<div class="main-content">
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript">
try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }
script>
<ul class="breadcrumb">
<li>
<i class="icon-home home-icon">i>
<a href="@Url.Action("Index","Admin")">Homea>
li>
<li id="currentpart" class="active">控制台li>
ul>
<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
<i class="icon-search nav-search-icon">i>
span>
form>
div>
div>
<div class="page-content">
<div class="page-header">
<h1>
<span>控制台span>
<small>
<i class="icon-double-angle-right">i>
<span>查看span>
small>
h1>
div>
<div class="row">
<div class="col-xs-12">
@RenderBody()
div>
div>
div>
div>
<div class="ace-settings-container" id="ace-settings-container">
<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
<i class="icon-cog bigger-150">i>
div>
<div class="ace-settings-box" id="ace-settings-box">
<div>
<div class="pull-left">
<select id="skin-colorpicker" class="hide">
<option data-skin="default" value="#438EB9">#438EB9option>
<option data-skin="skin-1" value="#222A2D">#222A2Doption>
<option data-skin="skin-2" value="#C6487E">#C6487Eoption>
<option data-skin="skin-3" value="#D0D0D0">#D0D0D0option>
select>
div>
<span> Choose Skinspan>
div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
<label class="lbl" for="ace-settings-navbar"> Fixed Navbarlabel>
div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebarlabel>
div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbslabel>
div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)label>
div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
<label class="lbl" for="ace-settings-add-container">
Inside
<b>.containerb>
label>
div>
div>
div>
div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="icon-double-angle-up icon-only bigger-110">i>
a>
div>
<script type="text/javascript">
if ("ontouchend" in document) document.write("
至此基本告成，还有些可以优化。
如果本文对你有帮助，请霸气的支持下 :） tks~
需要源码的同学，请戳下行。备注：数据库是EntityFramework + CE4.0，账户密码都是：admin
http://pan.baidu.com/s/1eSx6E0E 年轻的诸君，记得点赞留名~
模板源码：http://pan.baidu.com/s/1gdEGg2v
参考博客：
参数设定 http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.html
jqgridDemo：http://www.trirand.com/blog/jqgrid/jqgrid.html
多重查询：http://www.codeproject.com/Articles/58357/Using-jqGrid-s-search-toolbar-with-multiple-filter
其他后台模板：http://www.tystudio.net/2013/03/11/back-manage-system-template/