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

最新推荐文章于 2024-06-13 15:11:40 发布

weixin_33881753

最新推荐文章于 2024-06-13 15:11:40 发布

阅读量3.6k

点赞数 3

文章标签：测试前端前端框架 ViewUI

原文链接：http://www.cnblogs.com/yk123/p/4598949.html

版权

本文介绍了如何使用ASP.NET MVC搭建一个基于frameset布局的简单网站，未采用前端框架。通过创建APP1Controller作为页面控制器，实现了经典Top/Left/Right/Bottom布局。详细讲解了Index、Top和Left视图的结构，并提供了相关JS和CSS文件的下载链接。后续章节将探讨面板展开和Tab页效果。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

weixin_33881753

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现

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

扫一扫