目录
这一节，我将用一个Demo来演示在此UI框架中，控制器和视图的交互。以渠道管理为例。效果图如下：
按回车执行查询，不是F5，笔误。
这里我使用了基于jquery的模态窗体组件lhgdialog和表格组件dataTables。dataTables更多资料请参考：
lhgdialog更多资料请参考：
Action
1、在我们的MVC项目中的Models文件夹中，添加一个model类ChannelInfo.cs，因为项目中的ORM框架使用的是Nhibernate，所以属性前面加了virtual
public class ChannelInfo { public virtual int ID { get; set; } public virtual string ChannelStyle { get; set; } public virtual string ChannelCode { get; set; } public virtual string CnName { get; set; } public virtual string EnName { get; set; } public virtual string Status { get; set; } } 2、添加控制器ChannelController，这里为了演示，我使用的假数据
public class ChannelController : Controller { // // GET: /Channel/ public ActionResult Index() { return View(); } //添加渠道 public ActionResult AddChannel() { return View(); } [HttpPost] public JsonResult List(ChannelInfo filter) { List list = new List (); for (int i = 0; i < 1100; i++) { list.Add(new ChannelInfo { ID = 1, ChannelCode = "E_Express"+i, ChannelStyle = "香港E特快"+i, CnName = "香港E特快"+i, EnName = "HK E-Express"+i, Status = "1" }); } if (!string.IsNullOrEmpty(filter.ChannelCode)) { list = list.Where(x => x.ChannelCode == filter.ChannelCode.Trim()).ToList(); } if (!string.IsNullOrEmpty(filter.CnName)) { list = list.Where(x => x.CnName == filter.CnName.Trim()).ToList(); } if (!string.IsNullOrEmpty(filter.EnName)) { list = list.Where(x => x.EnName == filter.EnName.Trim()).ToList(); } //构造成Json的格式传递 iTotalRecords ：总记录数 iTotalDisplayRecords ：每页显示的记录数 var result = new { iTotalRecords = 1100, iTotalDisplayRecords = 10, data = list }; return Json(result, JsonRequestBehavior.AllowGet); } } 3、修改_Layout.cshtml，因为后面的View会用到
财务管理 @ViewBag.Title @* @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")*@ @* @RenderSection("featured", required: false)*@@RenderBody() @* *@@* @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)*@
4、添加渠道管理的视图Index，代码很简单，我都添加了详细的注释，相信大家都看得懂。这里主要只添加了列表展示，和查询过滤，分页排序。datables是支持服务器端分页排序的，但是我这里只写了客户端排序，就是先一次性把所有的数据查出来，然后再进行分页排序。在数据量小的情况下，体验还是非常不错的，也简单。如果数据量大，就要启用服务器分页，即每次按需取数据，关于datables服务器分页网上.NET的例子非常少，不过经过摸索，我已经实现了，只是此系列没有写出来。同时datables是支持缓存的，具体使用大家可以参考我上面发的网址，我这里只做个简单的引荐。 这里不好意思忘了测试兼容性问题，后面提供的源代码中Index视图这里兼容性有问题，对话框样式冲突了，在源码中请将
tbody{ height:50px;} 修改为 #table_local tbody{ height:50px;}
@{ ViewBag.Title = "Index";} @using (Html.BeginForm("List", null, FormMethod.Get, new { @clase = "form-inline", @role = "form" })) { 渠道管理 - 渠道代码：@Html.TextBox("ChannelCode","", new {@class="trade-time wid153" })
- 渠道中文名：@Html.TextBox("CnName", "",new {@class="trade-time" })
- 渠道英文名：@Html.TextBox("EnName", "",new {@class="trade-time" })
}
5、添加视图AddChannel，这里没写完。本来还打算把修改也添加进去的，有兴趣的朋友可以自己去完成
@{ ViewBag.Title = "添加渠道";}添加渠道
开发中... 由于要保持和美工给的样式风格一直，我修改了dataTables的样式源码
6、按F5运行
框架中用到的js和css、Img：
系列本来没写完，不打算写了，我就先把这个半成品的源码贴出来吧，免得小编又说我没有足够的知识分享了，虽然是半成品，但是基本的框框都有了。
插曲：本篇文章之前都没法在博客园首页显示的，小编给的回复是：没有足够的知识分享。我心拔凉拔凉的。虽然字码得不多，但是代码中倾注了我的思想和经验、时间和心血。精简、通俗、易懂一直是我追求的。
开发环境：VS2012
有朋友评论说源码里少了dll，那两个dll都是没用到的，我现在已经将没用的dll引用删除，所以源码下载地址更新了，给大家带来的不便请谅解！
半成品UI框架源码下载：
如果源码对大家很有帮助，希望大家给个推荐，当是支持下我无偿的技术分享，如果有更好的建议或不同的意见，可以提出来，大家一起探讨。谢谢！