Fork me on GitHub
Controller和View的交互

Controller和View的交互

目录

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
  4. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

这一节,我将用一个Demo来演示在此UI框架中,控制器和视图的交互。以渠道管理为例。效果图如下:

这里我使用了基于jquery的模态窗体组件lhgdialog和表格组件dataTables。dataTables更多资料请参考:http://dt.thxopen.com/example/

lhgdialog更多资料请参考:http://www.lhgdialog.com/api/

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,这里为了演示,我使用的假数据

 View Code

3、修改_Layout.cshtml,因为后面的View会用到

 View Code

4、添加渠道管理的视图,代码很简单,我都添加了详细的注释,相信大家都看得懂。这里主要只添加了列表展示,和查询过滤,分页排序。datables是支持服务器端排序的,但是我这里只写了客户端排序,就是先一次性把所有的数据查出来,然后再进行排序。

在数据量小的情况下,体验还是非常不错的,也简单。同时datables是支持缓存的,具体使用大家可以参考我上面发的网址,我这里只做个简单的引荐。

 View Code

5、添加视图AddChannel,这里没写完。本来还打算把修改也添加进去的,有兴趣的朋友可以自己去完成

复制代码
@{
    ViewBag.Title = "添加渠道";
}
<style type="text/css">
    body {
        overflow:hidden;
    }
</style>
<h2>添加渠道</h2>
<div>开发中...</div>
复制代码

由于要保持和美工给的样式风格一直,我修改了dataTables的样式源码

6、按F5运行

框架中用到的js和css、Img:CssJsImg源码

系列本来没写完,不打算写了,我就先把这个半成品的源码贴出来吧,免得小编又说我没有足够的知识分享了,虽然是半成品,但是基本的框框都有了。

插曲:本篇文章之前都没法在博客园首页显示的,小编给的回复是:没有足够的知识分享。我心拔凉拔凉的。虽然字码得不多,但是代码中倾注了我的思想和经验、时间和心血。精简、通俗、易懂一直是我追求的。

开发环境:VS2012

有朋友评论说源码里少了dll,那两个dll都是没用到的,我现在已经将没用的dll引用删除,所以源码下载地址更新了,给大家带来的不便请谅解!

半成品UI框架源码下载:http://pan.baidu.com/s/1pJmiIN5

如果源码对大家很有帮助,希望大家给个推荐,当是支持下我无偿的技术分享,如果有更好的建议或不同的意见,可以提出来,大家一起探讨。谢谢!

posted on 2015-05-18 21:43  HackerVirus  阅读(794)  评论(0编辑  收藏  举报