学技术这件事儿本来就是学习现有的东西,然后变成自己的,本文当然也是借鉴的别人的东西,写出来作为一个对知识的巩固。
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", ""