ASP.NET MVC搭建項目後臺UI框架—一、後臺主框架

時間 2019-11-05

標籤 asp.net asp mvc 搭建項目後臺框架欄目 ASP 简体版

原文原文鏈接

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