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>
<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 ...
随机推荐
- C#系列之String和StringBuilder
前言 首先和博园的各位打声招呼,小弟在博园呆了也有一年多了.平常一有时间就会过来看看文章,学习各位的经验,现在养成了一种一天不来博园,心里就不踏实的习惯,不知道在看我博文的大哥们有没有这个感觉. 读归 ...
- 04---XML编程整理
一.XML概述 XML(eXtensible Markup Language),可扩展标记语言, 被设计的宗旨是传输数据,而非显示数据 W3C发布的,目前遵循1.0 ...
- php输出错误信息
error_reporting(E_ALL); ini_set('display_errors','on'); header("Content-Type:text/html;charset ...
- Mechanism of Loading Resources
Mechanism of Loading Resources 1. Distributed strategy 1.1. Developer guilde 1.2. Notes 2. Centraliz ...
- Mailing API
Mailing API Configuration Basic Usage Embedding Inline Attachments Mail & Local Development Work ...
- 深入浅出ECharts系列(一)地图+散点图
深入浅出ECharts系列(一) 目标 本次教程的目标是实现“微博签到点亮中国”散点图,实现结果如图: 2. 准备工作 a) 首先下载ECharts插件,你可以根据自己的实际需求选择你 ...
- Failed to create java virtue machine(不能创建java虚拟机)
今天开发模块时,遇到这个问题,本来是版本的问题,jdk1.6的版本有点低,与cxf框架不兼容,需要用到jdk1.7,结果安装了jdk1.7之后,客户方要求必须用jdk1.6,要统一,所以卸载jdk1. ...
- UVA - 213 Message Decoding (输入字符串并对单个字符进行操作的输入输出)
POINT: 关于表示一个编码:利用code字符数组表示一个编码字符,其中code[len][val]表示长度为len,二进制值为val的字符: 主程序如下: #include <iostrea ...
- [YII]将ar查询结果转化成数组
$Column= Column::model()->findAll(); $data = array_map(create_function('$m', 'return $m->getAt ...
- sharepoint 删除list里的所有内容
[System.reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint") $siteUrl = " ...