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

时间  2019-11-05
标签 asp.net asp mvc 搭建 项目 后台 框架 栏目 ASP 繁體版
原文   原文链接

目录

  1. ASP.NET MVC搭建项目后台UI框架—一、后台主框架
  2. ASP.NET MVC搭建项目后台UI框架—二、菜单特效
  3. ASP.NET MVC搭建项目后台UI框架—三、面板折叠和展开
  4. ASP.NET MVC搭建项目后台UI框架—四、tab多页签支持
  5. ASP.NET MVC搭建项目后台UI框架—五、Demo演示Controller和View的交互
  6. ASP.NET MVC搭建项目后台UI框架—六、客户管理（添加、修改、查询、分页）
  7. ASP.NET MVC搭建项目后台UI框架—七、统计报表
  8. ASP.NET MVC搭建项目后台UI框架—八、将View中选择的数据行中的部分数据传入到Controller中
  9. ASP.NET MVC搭建项目后台UI框架—九、服务器端排序
  10. ASP.NET MVC搭建项目后天UI框架—十、导出excel（数据量大，很是耗时的，异步导出）
  11. ASP.NET MVC搭建项目后台UI框架—十一、自动加载下拉框查询

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

一、  把这些零散的html界面链接起来html

二、  本身编写js或者jquery实现菜单效果前端

三、  把html页面集成在咱们的MVC Razor视图中jquery

本想着使用第三方的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源码异步

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

  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();
        }
    }

二、  新建Index视图post

@{
    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>
View Code

三、 新建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>
View Code

四、新建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>
View Code

五、新建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>
View Code

六、新建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>
View Code

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程