第一次看到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  >

全部的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  'navbar', 'fixed') } catch (e) { }   /script   div  's Avatar  /   span  's Avatar  /   span  's Avatar  /   span  's Photo  /   span  'main-container', 'fixed') } catch (e) { }   /script   div  'sidebar', 'fixed') } catch (e) { }   /script   div  'sidebar', 'collapsed') } catch (e) { }   /script   /div   div  'breadcrumbs', 'fixed') } catch (e) { }   /script   ul  '~/Content/Js/jquery-1.10.2.min.js' + + /script   /script   ![endif]--   script type= text/javascript  if ( ontouchend  in document) document.write( script src='~/Content/Js/jquery.mobile.custom.min.js'  +   +  /script   /script   script src= ~/Content/Js/bootstrap.min.js /script   script src= ~/Content/Js/typeahead-bs2.min.js /script   !-- page specific plugin scripts --   script src= ~/Content/Js/jquery-ui-1.10.3.custom.min.js /script   script src= ~/Content/Js/jquery.ui.touch-punch.min.js /script   script src= ~/Content/Js/bootbox.min.js /script   !-- ace scripts --   script src= ~/Content/Js/ace-elements.min.js /script   script src= ~/Content/Js/ace.min.js /script   !-- inline scripts related to this page --   script type= text/javascript  jQuery(function ($) {  /* initialize the external events  -----------------------------------------------------------------*/  $('#external-events div.external-event').each(function () {  // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)  // it doesn't need to have a start or end  var eventObject = {  title: $.trim($(this).text()) // use the element's text as the event title  };  // store the Event Object in the DOM element so we can get to it later  $(this).data('eventObject', eventObject);  // make the event draggable using jQuery UI  $(this).draggable({  zIndex: 999,  revert: true, // will cause the event to go back to its  revertDuration: 0 // original position after the drag  });  });  /* initialize the calendar  -----------------------------------------------------------------*/  })   /script   div  'http://v7.cnzz.com/stat.php?id=155540 web_id=155540' language='JavaScript' charset='gb2312' /script /div   script src= ~/Content/Js/niqiu.js /script  @RenderSection( scripts , required: false)     /body /html