ASP.NETMVC搭建简单⽹站--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 = "1000";
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>
<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" >
<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" >
<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" >
<i></i>
<p><a href="#">基本信息管理</a></p>
<p><a href="#">认证管理</a></p>
asp查看源码配置ui<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>
</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 = ElementById(id);
var dtObj = ElementById("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" >
<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" >
<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" >
<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页效果。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论