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

本想着使用第三方的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视图

@{

    ViewBag.Title = "";

    Layout = null;

}

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta charset="utf-8" />

</head>

<frameset rows="104,*,30" cols="*" frameborder="no" border="0" framespacing="0">@*顶部发104px，底部30px，中间部分自适应*@

  <frame src="Home/Top" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />

  <frameset cols="193,*" frameborder="no" border="0" framespacing="0" id="middenFram">@*左侧193px，右侧自适应*@

    <frame src="Home/Left" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"/>

    <frame src="Home/Right" name="mainFrame" id="mainFrame" title="mainFrame" />

  </frameset>

  <frame src="/Content/Bootom.html" name="topFrame" scrolling="No" noresize="noresize" id="bootomFrame" title="topFrame" />

</frameset>

<noframes>

  <body> </body>

    </noframes>

</html>

3、新建Top视图

@{

    Layout = null;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <title></title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <meta charset="utf-8" />

    <link href="~/Content/sharestyle.css" rel="stylesheet" />

    <style type="text/css">

        .hightCss

        {

            color: yellow;

        }

        body

        {

            margin: 0px;

            padding: 0px;

        }

    </style>

</head>

<body>

    <div class="index_header">

        <div class="index_headertop">

            <div class="index_logo"><a href="#">

                <img src="/images/index_logo.png"></a></div>

            <div class="lgstatus">

                欢迎您，@ViewBag.UserName<i><em>20</em></i>可用余额：<span>￥@ViewBag.AvailableBalance</span>&nbsp;&nbsp;&nbsp;

      <input type="submit" value="在线充值" class="btsty2">

            </div>

        </div>

        <div class="clear"></div>

        <div class="index_headerbot">

            <div class="nav_list">

                <ul>

                    <li><a href="#">业务管理</a>

                        <div class="nav_out" style="display: none;">

                            <i></i>

                            <p><a href="#">订单管理</a></p>

                            <p><a href="#">提单管理</a></p>

                            <p><a href="#">身份证管理</a></p>

                        </div>

                    </li>

                    <li class="slctd"><a href="#">财务管理</a>

                        <div class="nav_out" style="display: none;">

                            <i></i>

                            <p><a href="#">财务流水</a></p>

                            <p><a href="#">提单对账</a></p>

                            <p><a href="#">运单对账</a></p>

                            <p><a href="#">异常费用对账</a></p>

                            <p><a href="#">充值记录</a></p>

                        </div>

                    </li>

                    <li><a href="#">系统管理</a>

                        <div class="nav_out" style="display: none;">

                            <i></i>

                            <p><a href="#">基本信息管理</a></p>

                            <p><a href="#">认证管理</a></p>

                            <p><a href="#">修改密码</a></p>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="fucnbx"><span><a href="#"><i class="ilChannel"></i>运单打印客户端下载</a></span> <span><a href="#"><i class="i2"></i>API文档</a></span> <span><a href="#"><i class="i3"></i>退出</a></span> </div>

        </div>

    </div>

</body>

</html>

4、新建Right视图

@{

    Layout = null;

}

<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta charset="utf-8" />

    <style type="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>

  <div class="rightcont">Hello,World

    </div>

    </body>

</html>

5、新建Left视图

@{

    Layout = null;

}

<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta charset="utf-8" />

    <link href="~/Content/sharestyle.css" rel="stylesheet" />

    <link href="~/Content/main.css" rel="stylesheet" />

    <style type="text/css">

        body

        {

           margin:0px;

           padding:0px;

        }

    </style>

</head>

<body>

 <div class="leftbar" id="divOrder">

  <dl>

    <dt class="head2" id="dt_ulOrder" onclick='ShowMenuList("ulOrder")'>订单管理</dt>

    <ul class="box_n" id="ulOrder">

      <li><a href="#">批量新建订单</a></li>

      <li><a href="#">手工新建订单</a></li>

      <li><a class="nav_sub" href="#">订单草稿<span>（3）</span></a></li>

      <li><a href="#">已确认订单<span>（3）</span></a></li>

      <li><a href="#">待发货订单<span>（3）</span></a></li>

      <li><a href="#">已发货订单<span>（0）</span></a></li>

      <li><a href="#">订单回收站<span>（0）</span></a></li>

      <li><a href="#">退件<span>（0）</span></a></li>

      <li><a href="#">批量修改订单</a></li>

    </ul>

  </dl>

  <dl>

    <dt class="head1" id="dt_ulLading" onclick='ShowMenuList("ulLading")'>提单管理</dt>

    <ul class="box_n" id="ulLading" style="display:none;" >

      <li><a href="#">创建托盘</a></li>

      <li><a href="#">未交货托盘<span>（6）</span></a></li>

      <li><a href="#">已交货托盘</a></li>

      <li><a href="#">创建交货单</a></li>

      <li><a href="#">交货单列表</a></li>

      <li><a href="#">待预扣提单<span>（3）</span></a></li>

      <li><a href="#">已预扣提单</a></li>

    </ul>

  </dl>

  <dl>

    <dt class="head1" id="dt_ulIdentityCard" onclick='ShowMenuList("ulIdentityCard")'>身份证管理</dt>

    <ul class="box_n" id="ulIdentityCard" style="display:none;" >

      <li><a href="#">待验证身份证<span>（3）</span></a></li>

      <li><a href="#">无需验证身份证<span>（3）</span></a></li>

      <li><a href="#">已验证身份证<span>（3）</span></a></li>

    </ul>

  </dl>

</div>

 <div class="leftbar" id="divSysManage"></div>

     <div class="leftbar" id="divFinancial">

        <dl>

            <dt id="dt_ulChannel" class="head2" onclick='ShowMenuList("ulChannel")'>渠道费用管理</dt>

            <ul class="box_n" id="ulChannel">

                <li><a href="#" onclick="goNewPage('a.html','渠道分类');">渠道分类</a></li>

                <li><a target="mainFrame" id="channelManage" onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li>

                <li><a href="#">分区管理</a></li>

                <li><a href="#">价格管理</a></li>

            </ul>

        </dl>

        <dl>

            <dt id="dt_ulFinancial" class="head1" onclick='ShowMenuList("ulFinancial")'>财务管理</dt>

            <ul class="box_n" id="ulFinancial" style="display: none;">

                <li><a href="#">财务流水</a></li>

                <li><a href="#">提单对账</a></li>

                <li><a href="#">运单对账</a></li>

                <li><a href="#">异常费用对账</a></li>

                <li><a href="#">充值记录</a></li>

            </ul>

        </dl>

    </div>

</body>

</html>

6、新建Bootom.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="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>

    <div class="copyright">©2015 </div>

</body>

</html>

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

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

ASP.NET MVC搭建项目后台UI框架—1、后台主框架的更多相关文章

ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

修改MySQL默认字符集编码
好记心不如烂笔头,很多东西当时没记下来,过了就忘了,下次用到时又得浪费好多时间才能解决.今天又遇到修改MySQL默认字符集编码的问题,折腾了半天解决了,赶快记录下来,以后就不用每次折腾了. 查看MyS ...
Mono产品生命周期
软件生命周期同任何事物一样,一个软件产品或软件系统也要经历孕育.诞生.成长.成熟.衰亡等阶段,一般称为软件生命周期(软件生存周期) .软件生命周期模型是指人们为开发更好的软件而归纳总结的软件生命周期 ...
Flume1 初识Flume和虚拟机搭建Flume环境
前言: 工作中需要同步日志到hdfs,以前是找运维用rsync做同步,现在一般是用flume同步数据到hdfs.以前为了工作简单看个flume的一些东西,今天下午有时间自己利用虚拟机搭建了 ...
[ 技术人员创业Tips ] 1：抓住优质客户（上）
写一篇技术以外的内容,可能会得罪一些人,轻拍,此外本文写的比较随意,写到哪里算哪里,轻拍. IT业不知道从什么时候起特别流行谈创业,似乎不谈创业就落伍,我不评价这种风气的好坏,只提一些自己的一些经验和 ...
2000条你应知的WPF小姿势基础篇<8-14>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...
windows phone如何才能在中国翻身？
最近的新闻告诉我们,Android和IOS的系统继续保持市场领先,并且Android的市场份额达到了历史最高点. 做为windows phone的消费者,作为微软粉丝,我感到十分的不爽. 前几天MIU ...
Linux简单指令操作
Linux CentOS运维中,常用的操作和命令记录下: 1.DNS设置在Linux服务器上,当我们ping出现这个错误时:ping: unknown host,很大可能是系统的DNS没有设置或者设 ...
ASP.NET Web API Model-ValueProvider
ASP.NET Web API Model-ValueProvider 前言前面一篇讲解了Model元数据,Model元数据是在Model绑定中很重要的一部分,只是Model绑定中涉及的知识点比较多 ...
CSharpGL(13)用GLSL实现点光源(point light)和平行光源(directional light)的漫反射(diffuse reflection)
CSharpGL(13)用GLSL实现点光源(point light)和平行光源(directional light)的漫反射(diffuse reflection) 2016-08-13 由于CSh ...
ABP教程-对Person信息进行操作
这一章的功能比较简单.下面开始修改视图对person的视图文件进行修改 <div class="row"> <div class="col-md-1 ...

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

目录

从这里开始

ASP.NET MVC搭建项目后台UI框架—1、后台主框架的更多相关文章

随机推荐

热门专题