ASP.NET MVC搭建项目后台UI框架

目录

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的交互
6. ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
7. ASP.NET MVC搭建项目后台UI框架—7、统计报表
8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
9. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
10. ASP.NET MVC搭建项目后天UI框架—10、导出excel（数据量大，非常耗时的，异步导出）

准备做一个新的项目，从网页设计师手中拿到了html静态页面（没有一行js），但是都一个个零散的界面，我需要做的是：

1、  把这些零散的html界面连接起来

2、  自己编写js或者jquery实现菜单效果

3、  把html页面集成在我们的MVC Razor视图中

本想着使用第三方的UI框架 如Jquery EasyUI、ExtJs、MiniUI等来搭建框架，但是上面要求必须做得和美工给的html页面样式一致，不能用这些比较复杂的UI框架。作为非前端工程师，我只有硬着头皮上了。经过差不多2天的折腾，自己搭建好了UI框架。主要使用jquery和一些jquery的ui插件。即便使用了第三方的UI插件也是非常痛苦的，因为我需要修改UI插件的主题样式，改得和美工给我的界面看上去差不多。那我为什么要使用UI插件呢，一方面是为了提高用户体验，另一方面是为了减少编码，让View和Controller更好的结合，如果我不添加jquery的ui插件进来，可以直接在View中拼接美工给我的html页面，这样看起来简单多了，但是这样的话，界面复用性太差，需要更多的编码，我需要做的是，通过框架来尽可能减少团队成员的编码量，提高开发效率。

先看下最终效果：

从这里开始

 一看到这样的后台界面，我首先就联想到使用iframe 或者 frameset 来搭建，因为这样可以实现页面嵌入。项目组有同事说可以使用能够MVC里面的局部视图，跟以前ASPX视图里面的母版页差不多，但是这不是我想要的，我不想每点击一个功能菜单都刷新整个界面，而且后面我要对菜单项做权限控制的。我先不添加任何js，一步一步来。

关于iframe 和 frame的区别大家可以网上查找，这里我不做过多解释，最终我使用了frame。框架中用到的js和css：CssJsImg源码

1、 新建ASP.NET MVC4项目MSD.WL.Site， 然后新建控制器HomeController，这里我用了4个Action方法，分别对应4个界面，Index代表frame主界面

  public class HomeController : Controller    {        public ActionResult Index()        {            ViewBag.Message = "欢迎使用财务模块";            return View();        }        public ActionResult Top()        {            ViewBag.UserName = "超级管理员";            ViewBag.AvailableBalance = "8888.00";            return View();        }        public ActionResult Left()        {            return View();        }        public ActionResult Right()        {            return View();        }    }

2、  新建Index视图

View Code

3、 新建Top视图

View Code

4、新建Right视图

View Code

5、新建Left视图

View Code

6、新建Bootom.html

View Code

F5运行，这个时候，你看到的界面应该是这样的：