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

从这里开始

一看到这样的后台界面,我首先就联想到使用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="/upload/attach/blank.gif"  data-echo="Home/Top" name="topFrame" scrolling="No" noresize="noresize"title="topFrame" /
  frameset cols="193,*" frameborder="no" border="0" framespacing="0"name="leftFrame" scrolling="No" noresize="noresize"title="leftFrame"/
    frame src="/upload/attach/blank.gif"  data-echo="Home/Right" name="mainFrame"title="mainFrame" /
  /frameset
  frame src="/upload/attach/blank.gif"  data-echo="/Content/Bootom.html" name="topFrame" scrolling="No" noresize="noresize"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="/upload/attach/blank.gif"  data-echo="/images/index_logo.png"/a/div
            div class="lgstatus"
                欢迎您,@ViewBag.UserNameiem20/em/i可用余额:span¥@ViewBag.AvailableBalance/spannbsp;nbsp;nbsp;
      input type="submit" value="在线充值" class="btsty2"
            /div
        /div
        div class="clear"/div
        div class="index_headerbot"
            div class="nav_list"
                ul
                    lia href="#"业务管理/a
                        div class="nav_out"
                            i/i
                            pa href="#"订单管理/a/p
                            pa href="#"提单管理/a/p
                            pa href="#"身份证管理/a/p
                        /div
                    /li
                    li class="slctd"a href="#"财务管理/a
                        div class="nav_out"
                            i/i
                            pa href="#"财务流水/a/p
                            pa href="#"提单对账/a/p
                            pa href="#"运单对账/a/p
                            pa href="#"异常费用对账/a/p
                            pa href="#"充值记录/a/p
                        /div
                    /li
                    lia href="#"系统管理/a
                        div class="nav_out"
                            i/i
                            pa href="#"基本信息管理/a/p
                            pa href="#"认证管理/a/p
                            pa href="#"修改密码/a/p
                        /div
                    /li
                /ul
            /div
            div class="fucnbx"spana href="#"i class="ilChannel"/i运单打印客户端下载/a/span spana href="#"i class="i2"/iAPI文档/a/span spana href="#"i class="i3"/i退出/a/span /div
        /div
    /div
/body
/html
技术分享


4、新建Right视图

技术分享View Code

5、新建Left视图

技术分享View Code

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搭建项目后台UI框架—1、后台主框架

原文地址:http://www.cnblogs.com/zxtceq/p/7285020.html


最新回复(0)
/jishu9R_2BFtjE13rqvCGi4q96yH5GYaZjG06ckwaJELLsEmvo_3D4719163
8 简首页