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

随机推荐

Android手机监控软件设计实现
一.需求分析: 随着IT信息技术的飞速发展,手机的普及,伴随着智能手机的出现及快速的更新换代,手机已不仅仅是一个通信工具,更是一个多功能的应用平台. 手机监控软件则是基于电脑监控软件的原理,植入手机平 ...
javascript之css常用属性
1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed : 生成绝对定位的元素,相对于浏览 ...
Helpers\Date
Helpers\Date The Date helper is used for calculations with dates. Date::difference($from, $to, $type ...
iOS实用的小技巧
1.快捷键上传APP模拟器截图:comm+s 自动保存到桌面 2.storyboard 改型号尺寸如从iPad改为iPhone6:
关于IE调试模式下才能显示效果
要去除console.log() 低版本IE 没有开启调试模式 console.log()会导致报错
封装JDBC操作数据库的方法
自己动手封装java操作数据库的方法: 一:目录结构二:所需依赖的第三方jar包这里只需引入mysql-connector-java-5.1.8-bin.jar,mysql数据库驱动jar包三: ...
Redis的安装与使用
一.什么 Redis REmote DIctionary Server,简称 Redis,是一个类似于Memcached的Key-Value存储系统.相比Memcached,它支持更丰富的数据结构,包 ...
CentOS下安装福昕PDF软件
官方下载地址:http://www.foxitsoftware.cn/downloads/ tar -jxvf foxreader.tar.bz2问题:下载官方包以后解压,双击不能打开,也没有任何提示 ...
jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
3.x vector的用法
#include<vector> //struct struct GOLD_STRUCT { Sprite * goldspSprite; int goldValue; ...

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

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

随机推荐

热门专题