ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现

学技术这件事儿本来就是学习现有的东西，然后变成自己的，本文当然也是借鉴的别人的东西，写出来作为一个对知识的巩固。
1.网站用的是MVC模式，新建一个MVC项目，建立一个APP1Controller,作为页面的控制器，首页采用的是传统的frameset布局，没有用到前段的UI框架，项目架构示意图：

后台控制器中目前是这样的一个结构：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace App1.Controllers

{

    public class App1Controller : Controller

    {

        //

        // GET: /App1/

        public ActionResult Index()

        {

            ViewBag.Message = "Welcome!";

            return View();

        }

        public ActionResult Top()

        {

            ViewBag.UserName = "超级管理员";

            ViewBag.AvailableBalance = "";

            return View();

        }

        public ActionResult Left()

        {

            return View();

        }

        public ActionResult Right()

        {

            return View();

        }

    }

}

下面是前台的View页面：

首先附一张效果图：

1）Index.cshtml：

@{

    ViewBag.Title = "";

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <meta charset="utf-8" />

    <title>Index</title>

</head>

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

        <frame src="App1/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="App1/Left" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"/>

            <frame src="App1/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>

说明：这里frameset的布局方式算是比较老的一种方式了，因为没有用到UI框架所以此处不做过多的追究，大体就是一个Top/Left/Right/Bottom的经典布局模式。

2）Top.cshtml:

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <title>Top</title>

    <meta name="viewport" content="width=device-width" />

    <meta charset="utf-8" />

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

    <style type="text/css">

        .hightCss {

            color: yellow;

        }

        body {

            margin: 0px;

            padding: 0px;

        }

    </style>

    <script src="~/Scripts/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        //控制Left视图中菜单模块的显示

        function showLeftList(divId) {

            self.parent.frames["leftFrame"].showDivMenu(divId);

        }

        //菜单键及高亮显示

        $(function () {

            $(".nav_list ul li a").click(function () {

                $(".nav_list ul li a").css("background-color", "");

                $(".nav_list ul li a").css("color", "#ceebff");

                $(this).css("background-color", "#66d354");

                $(this).css("color", "white");

            });

        });

    </script>

</head>

<body>

    <div class="index_header">

        <div class="index_headertop">

            <div class="index_logo">

                <a href="#">

                    <img src="/Images/icon_11.png" /></a>

            </div>

            <div class="lgstatus">

                欢迎您，@ViewBag.UserName<i><em>20</em></i>可用余额：

                <span>$@ViewBag.AvailableBalance</span>&nbsp;&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="#" onclick="showLeftList('divOrder')">业务管理</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" onclick="showLeftList('divFinancial')"><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="#" onclick="showLeftList('divSysManage')">系统管理</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>

这里对应着效果图看一下，基本上就是点击Top页上面的标题，然后再Left页显示对应的下面的div里的内容（当前设置为不不显示了），点击事件是通过js代码实现的showLeftList方法，该方法里面有一个参数divId,然后通过 self.parent.frames["leftFrame"].showDivMenu(divId)来实现很显然是在Left页面中实现showDivMenu方法。

3）Left.cshtml:

@{

    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>

    <script src="~/Scripts/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        function ShowMenuList(id) {

            var objectobj = document.getElementById(id);

            var dtObj = document.getElementById("dt_" + id);

            if (objectobj.style.display == "none") {

                objectobj.style.display = "";

                dtObj.setAttribute("class", "head2");

                //其它菜单折叠

                $(dtObj).parent().parent().find("dt").not(dtObj).attr("class", "head1"); //折叠

                $(objectobj).parent().parent().find("ul").not(objectobj).css("display", "none"); //隐藏菜单子项

            } else {

                objectobj.style.display = "none";

                dtObj.setAttribute("class", "head1");

            }

        }

        //控制菜单模块的显示和隐藏

        function showDivMenu(divId) {

            $("#" + divId).css("visibility", "visible");

            $("#" + divId).siblings("div").css("visibility", "hidden");

        }

        $(function () {

            $(".box_n li a").click(function () {

                $(".box_n li a").removeClass("nav_sub");

                $(this).addClass("nav_sub");

            });

        });

        function goNewPage(url, name) {

            self.parent.frames["mainFrame"].addTab(url, name);

        }

    </script>

</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>

本页面实现了Top页面中点击标题显示制定内容的功能，此外还有子标题的显示是通过ShowMenuList方法实现，参数为要显示的字标题列表的ul的ID属性。
4）Right.cshtml:

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <meta charset="utf-8" />

    <style type="text/css">

        html, body {

            margin: 0px;

            font-family: Arial, sans-serif;

            font-size: 12px;

            height: 100%;

            padding: 2px 4px 4px 0px;

            overflow: hidden;

        }

    </style>

    <title>Right</title>

</head>

<body>

    <div class="rightcont">

        Hello,World!

    </div>

</body>

</html>

这里面可以显示网站的主要内容了。

最后附录一下本网站需要用到的Js文件和Css样式文件下载链接：下载

下一节将实现一些面板的展开隐藏和Tab页效果。

ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现的更多相关文章

ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
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框架—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 ...
ASP.NET MVC创建的网站
ASP.NET MVC创建的网站最近在写一个网站,昨天刚写完,由于要和朋友一起测试,但是他电脑上没有环境,所以希望我在自己电脑上部署一下,让他直接通过浏览器来访问来测试,所以从昨晚到今天上午,通 ...
FineAdmin.Mvc 使用ok-admin+ASP.NET MVC搭建的通用权限后台管理系统
FineAdmin.Mvc 介绍使用ok-admin+ASP.NET MVC搭建的通用权限后台管理系统RightControl后台layui模板不太好看,换成ok-admin v2.0重写一遍.项目 ...
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 ...

随机推荐

[Heroku] How to pull, push changes
1. First you need to login heroku: heroku login 2. Then you need to download the code: heroku git:cl ...
SAP进销存难点分析及对策
1.基本需求: 业务部门提出如上表格式进销存需求,并且金额要和总账中存货科目保持一致,如果要实现上表格式进校存,可以通过SAP标准程序(MC.9.MB51.MB5B)加工繁琐而成.现分析一下SAP标准 ...
mysqldump原理3
现网中数据库运维时,要经常对数据库做热备.为保证恢复时数据的完整性与一致性, 一种方法是在备份之前锁表,但锁表会影响正在运行的业务. mysqldump是当前MySQL中最常用的备份工具,通过mysq ...
根据字符串计算UILabel尺寸
iOS开发中经常会遇到UILabel大小尺寸不固定的情况,需要根据文字内容变化,这时候就需要计算文字大小以自动改变UILabel的尺寸. iOS7之后计算尺寸只需要一个方法就可以: - (CGSize ...
Android学习之Activity初步
Activity作为Android的第一步接触的概念,在学习中将初步的认识总结下来,以便后续的回顾与反思. 1.在用Android Studio生成第一个helloworld应用程序运行在手机上时,发 ...
网络请求OkHttp的使用
okHttp: 1.okHttp是squere公司出的,在Android4.0以后盛行 2.httpClient 在5.0中弃用,在6.0以Google的sdk中没有该api 3.httpUrlCo ...
cvThreshold
看了很多很坑的文章. 呵呵哒.而且基本上都是一个地方转载的,英文翻译我用你单独给一个词条么?就不能负点儿责? cvThreshold(img4, img3, 0, 128, CV_THRESH_OTS ...
AngularJS中在前后端分离模式下实现权限控制 - 基于RBAC
一:RBAC 百科解释: 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注.在RBAC中,权限与角色相关联,用 ...
Android开发了解——AIDL
AIDL:Android Interface Definition Language,即Android接口定义语言. 什么是AIDL Android系统中的进程之间不能共享内存,因此,需要提供一些机制 ...
CCLablettf读取显示xml文件内容显示中文
CCDictionary *strings = CCDictionary::createWithContentsOfFile("tips2.xml"); const char *h ...

ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现

ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现的更多相关文章

随机推荐

热门专题