目录

  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（数据量大，非常耗时的，异步导出）
  11. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

准备做一个新的项目，从网页设计师手中拿到了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 classHomeController : Controller{publicActionResult Index(){ViewBag.Message= "欢迎使用财务模块";returnView();}publicActionResult Top(){ViewBag.UserName= "超级管理员";ViewBag.AvailableBalance= "8888.00";returnView();}publicActionResult Left(){returnView();}publicActionResult Right(){returnView();}}

2、  新建Index视图

@{ViewBag.Title = "";Layout = null;
}<!DOCTYPE html>
<htmllang="zh">
<head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><metacharset="utf-8" />
</head>
<framesetrows="104,*,30"cols="*"frameborder="no"border="0"framespacing="0">@*顶部发104px，底部30px，中间部分自适应*@<framesrc="Home/Top"name="topFrame"scrolling="No"noresize="noresize"id="topFrame"title="topFrame" /><framesetcols="193,*"frameborder="no"border="0"framespacing="0"id="middenFram">@*左侧193px，右侧自适应*@<framesrc="Home/Left"name="leftFrame"scrolling="No"noresize="noresize"id="leftFrame"title="leftFrame"/><framesrc="Home/Right"name="mainFrame"id="mainFrame"title="mainFrame" /></frameset><framesrc="/Content/Bootom.html"name="topFrame"scrolling="No"noresize="noresize"id="bootomFrame"title="topFrame" />
</frameset>
<noframes><body> </body></noframes>
</html>

View Code

3、 新建Top视图

@{Layout = null;
}<!DOCTYPE html>
<htmllang="en">
<head><title></title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metacharset="utf-8" /><linkhref="~/Content/sharestyle.css"rel="stylesheet" /><styletype="text/css">.hightCss{color:yellow;}body{margin:0px;padding:0px;}</style>
</head>
<body><divclass="index_header"><divclass="index_headertop"><divclass="index_logo"><ahref="#"><imgsrc="/images/index_logo.png"></a></div><divclass="lgstatus">欢迎您，@ViewBag.UserName<i><em>20</em></i>可用余额：<span>￥@ViewBag.AvailableBalance</span>&nbsp;&nbsp;&nbsp;<inputtype="submit"value="在线充值"class="btsty2"></div></div><divclass="clear"></div><divclass="index_headerbot"><divclass="nav_list"><ul><li><ahref="#">业务管理</a><divclass="nav_out"style="display: none;"><i></i><p><ahref="#">订单管理</a></p><p><ahref="#">提单管理</a></p><p><ahref="#">身份证管理</a></p></div></li><liclass="slctd"><ahref="#">财务管理</a><divclass="nav_out"style="display: none;"><i></i><p><ahref="#">财务流水</a></p><p><ahref="#">提单对账</a></p><p><ahref="#">运单对账</a></p><p><ahref="#">异常费用对账</a></p><p><ahref="#">充值记录</a></p></div></li><li><ahref="#">系统管理</a><divclass="nav_out"style="display: none;"><i></i><p><ahref="#">基本信息管理</a></p><p><ahref="#">认证管理</a></p><p><ahref="#">修改密码</a></p></div></li></ul></div><divclass="fucnbx"><span><ahref="#"><iclass="ilChannel"></i>运单打印客户端下载</a></span> <span><ahref="#"><iclass="i2"></i>API文档</a></span> <span><ahref="#"><iclass="i3"></i>退出</a></span> </div></div></div>
</body>
</html>

View Code

4、新建Right视图

@{Layout = null;
}<!DOCTYPE html>
<htmllang="zh">
<head><title></title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><metacharset="utf-8" /><styletype="text/css">html, body{margin:0px;font-family:Arial, Sans-Serif; /*font-size: 62.5%;*/font-size:12px;height:100%;padding:2px 4px 4px 0px;overflow:hidden;
}</style>
</head>
<body><divclass="rightcont">Hello,World</div></body>
</html>

View Code

5、新建Left视图

@{Layout = null;
}<!DOCTYPE html>
<htmllang="zh">
<head><title></title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><metacharset="utf-8" /><linkhref="~/Content/sharestyle.css"rel="stylesheet" /><linkhref="~/Content/main.css"rel="stylesheet" /><styletype="text/css">body{margin:0px;padding:0px;}</style>
</head>
<body><divclass="leftbar"id="divOrder"><dl><dtclass="head2"id="dt_ulOrder"onclick='ShowMenuList("ulOrder")'>订单管理</dt><ulclass="box_n"id="ulOrder"><li><ahref="#">批量新建订单</a></li><li><ahref="#">手工新建订单</a></li><li><aclass="nav_sub"href="#">订单草稿<span>（3）</span></a></li><li><ahref="#">已确认订单<span>（3）</span></a></li><li><ahref="#">待发货订单<span>（3）</span></a></li><li><ahref="#">已发货订单<span>（0）</span></a></li><li><ahref="#">订单回收站<span>（0）</span></a></li><li><ahref="#">退件<span>（0）</span></a></li><li><ahref="#">批量修改订单</a></li></ul></dl><dl><dtclass="head1"id="dt_ulLading"onclick='ShowMenuList("ulLading")'>提单管理</dt><ulclass="box_n"id="ulLading"style="display:none;" ><li><ahref="#">创建托盘</a></li><li><ahref="#">未交货托盘<span>（6）</span></a></li><li><ahref="#">已交货托盘</a></li><li><ahref="#">创建交货单</a></li><li><ahref="#">交货单列表</a></li><li><ahref="#">待预扣提单<span>（3）</span></a></li><li><ahref="#">已预扣提单</a></li></ul></dl><dl><dtclass="head1"id="dt_ulIdentityCard"onclick='ShowMenuList("ulIdentityCard")'>身份证管理</dt><ulclass="box_n"id="ulIdentityCard"style="display:none;" ><li><ahref="#">待验证身份证<span>（3）</span></a></li><li><ahref="#">无需验证身份证<span>（3）</span></a></li><li><ahref="#">已验证身份证<span>（3）</span></a></li></ul></dl>
</div><divclass="leftbar"id="divSysManage"></div><divclass="leftbar"id="divFinancial"><dl><dtid="dt_ulChannel"class="head2"onclick='ShowMenuList("ulChannel")'>渠道费用管理</dt><ulclass="box_n"id="ulChannel"><li><ahref="#"onclick="goNewPage('a.html','渠道分类');">渠道分类</a></li><li><atarget="mainFrame"id="channelManage"onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li><li><ahref="#">分区管理</a></li><li><ahref="#">价格管理</a></li></ul></dl><dl><dtid="dt_ulFinancial"class="head1"onclick='ShowMenuList("ulFinancial")'>财务管理</dt><ulclass="box_n"id="ulFinancial"style="display: none;"><li><ahref="#">财务流水</a></li><li><ahref="#">提单对账</a></li><li><ahref="#">运单对账</a></li><li><ahref="#">异常费用对账</a></li><li><ahref="#">充值记录</a></li></ul></dl></div>
</body>
</html>

View Code

6、新建Bootom.html

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title></title><styletype="text/css">.copyright{width:100%;height:30px;line-height:30px;text-align:center;color:#dadada;background:#393939;font-size:12px;position:fixed;bottom:0px;left:0px;}</style>
</head>
<body><divclass="copyright">©2015 </div>
</body>
</html>

View Code

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

源码请见我的书《ASP.NET MVC企业级实战》源码的第11章~

ASP.NET MVC搭建项目后台UI框架—1、后台主框架相关推荐

  1. 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus

    最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...

  2. angular2+typescript在asp.net MVC Web项目上的实现

    网上现在还没有关于angular2+typescript在asp.net mvc web项目上的实现的系统介绍,这里我也只是探索到了一个简单的方式,还有很多问题没能解决.但是能有个好的开头也值得记录一 ...

  3. 图文详解远程部署ASP.NET MVC 5项目

    图文详解远程部署ASP.NET MVC 5项目 原文:图文详解远程部署ASP.NET MVC 5项目 话外篇: 由于感觉自己的机器比较慢,配置不好,所以最近想把之前的项目部署到实验室的服务器上,但是由 ...

  4. Asp.net MVC 示例项目Suteki.Shop分析之---结束篇

    到今天,这个系列的文章就要先告一段落了.其中我用了10篇文章也没有穷尽该项目的设计思想,只能从中捡了一些我感兴趣的东西进行了分析和说明,正所谓兴趣是最大的动力.当然限于本人水平有限,难免有一些认识上的 ...

  5. 利用Powershell自动部署asp.net mvc网站项目 （一）

    这一篇中我们会写一些关于自动化部署的代码.我们会使用 Powershell 书写这类代码. 你将发现这篇文章中涉及的东西非常具体,有的要求甚至相当苛刻且可能不具有通用性.这是因为部署从来都是跟环境打交 ...

  6. Asp.net MVC 搭建属于自己的框架（一）

    为什么要自己搭框架? 大家伙别急,让我慢慢地告诉你!大家有没有这种感觉,从一家跳槽到另一家公司,公司的框架往往是不相同的,这样你必须就得摒弃原来的,学习新的框架. 问题是你用习惯了一种框架,比如封装的 ...

  7. ASP.NET MVC经典项目ProDinner项目解析（3）

    三.Data层解析 这一层主要是和数据库相关联的, 所以这一层直接关系到应用程序的健壮性.最近在各个渠道都在提大数据这个概念,大数据高并发,尤其是facebook倡导的基于java应用的Hadoop框 ...

  8. 【MVC】ASP.Net MVC 4项目升级MVC 5的方法

    1.备份你的项目 2.从Web API升级到Web API 2,修改global.asax,将 ? 1 WebApiConfig.Register(GlobalConfiguration.Config ...

  9. Asp.net MVC 示例项目Suteki.Shop分析之---ViewData

            使用强类型的ViewData好处有许多,比如说在IDE中就会有更好的支持,比如代码提示.同时在View与Controller之间有更严谨的"约定".在Suteki. ...

  10. 【MVC4升级到MVC5】ASP.Net MVC 4项目升级MVC 5的方法

    1.备份你的项目 2.从Web API升级到Web API 2,修改global.asax,将 ? 1 WebApiConfig.Register(GlobalConfiguration.Config ...

最新文章

  1. 最先进的图像分类算法：FixEfficientNet-L2
  2. 完美解决Informix的中文乱码问题
  3. Android中文API（97）—— ContextMenu
  4. linux mysql 操作命令
  5. spring基于XML的声明式事务控制-配置步骤
  6. 微信小程序开发---页面生命周期
  7. 有效软件开发的25条军规
  8. 【学习】如何用jQuery获取iframe中的元素
  9. jQuery 学习笔记 元素操作
  10. Inno Setup for Windows service
  11. 设计模式解密（2）- 工厂模式（简单工厂、工厂方法、抽象工厂）
  12. 将 .json 格式 转换成 .xml格式
  13. 星际开图挂_《星际争霸2》牛x强力高端职业玩家手把手教你识别开图挂
  14. Yii2用户信息存储与获取
  15. 英语从句（英语兔学习笔记）
  16. c#取消word修订痕迹_C# 插入、修改、删除Word批注
  17. Tomcat 如何查看端口
  18. 【转】计算机词汇简繁体对照表
  19. 计算机本科生需要具备的素养
  20. 【负荷预测】基于灰色预测算法的负荷预测（Python代码实现）

热门文章

  1. java中的抽象类（abstract）
  2. {$POINTERMATH ON} 方便指针操作的编译指令
  3. 使用Intent Filter来响应隐式Intent
  4. “代理XP”组件已作为此服务器安全配置的一部分被关闭
  5. ASP.NET 学习日志
  6. Silverlight 2.0 RTW 正式版发布(附下载地址)
  7. 通过代理截取并修改非对称密钥加密信息
  8. JVM第一节：内存结构
  9. vue中Component错误
  10. Sublime text 3 注册码激活码 版本号3143