1.在视图 Views 中新建文件夹  Shared

2.在 Shared 中新建布局页-母版页   _Layout.cshtml

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">

    <meta charset="UTF-8"> <!--编码方式采用UTF-8-->

    <meta name="renderer" content="webkit"> <!--默认使用极速内核-->

    <meta name="description" content="飞车,换装,跑马,斗地主,冒险岛">  <!--网站关键词-->

    <meta name="description" content="这是一个游戏网站"> <!--网站描述-->

    <title>@ViewBag.Title</title> <!--页面标题将在此处插入-->

    <link href="@Url.Content("~/Content/css.css")" rel="stylesheet" type="text/css" />

    @RenderSection("Css", false) <!--子页面需要的css将在此插入-->

    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

    @RenderSection("Js", false) <!--子页面需要的js将在此插入-->

</head>

<body>

    <header>

        <div>LOGO</div>

        <!--导航菜单-->

        <ul id="menu">

            <li>@Html.ActionLink("Home", "Index", "Home")</li>

            <li>@Html.ActionLink("Movies", "Index", "Movies")</li>

            <li>@Html.ActionLink("About", "About", "Home")</li>

        </ul>

    </header>

    <section id="main">

        <!-- 页面内容将在此处呈现-->

        @RenderBody()

    </section>

    <footer>

        <p>Copyright RUNOOB 2012. All Rights Reserved.</p>

    </footer>

</body>

</html>

3.在视图 Views 中新建视图  _ViewStart.cshtml

@{Layout = "~/Views/Shared/_Layout.cshtml";}

这段代码被自动添加到由应用程序显示的所有视图。

如果您删除了这个文件，则必须向所有视图中添加这行代码。

4.在 Shared 中新建布局页-分部视图  _Page.cshtml

调用代码：@Html.Partial("_PageName")

<div id="page">

    @Html.Partial("_Page")

</div>

5.在子页面调用方式：

@section Css{

    <link href="~/Content/home.css" rel="stylesheet" type="text/css" />

}

@section Js{

    <script src="~/Scripts/home.min.js"></script>

}

@{

    ViewBag.Title = "首页";

}

<div>首页HTML内容</div>

代码说明

1.RenderSection(string name, bool required = true)

　　说明：required默认为true表示引用这个布局页的所有View必须含有该Section，设为false则为可以有，也可以没有

2.Html.ActionLink("LinkText","ActionName","ControllerName","RoutValues","HtmlAttributes")

　　Html.ActionLink(string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes);

属性 描述
linkText string，必须的，URL 文本（标签），定位点元素的内部文本。
actionName string，必须的，操作（action）的名称。
ControllerName string，可选，控制器的名称。
routeValues object ，routeValues和HtmlAttributes必须同时存在，传递给操作（action)的值，是一个包含路由参数的对象。
HtmlAttributes object ，routeValues和HtmlAttributes必须同时存在，URL 的属性设置，是一个包含要为该元素设置的 HTML 特性的对象。

举例说明：

代码 输出
@Html.ActionLink("超链接文本","Index") <a href="/">超链接文本</a>   生成当前控制器下action名字为index 的超链接，如当前控制器不是默认首页，是About则会生成 <a href="/About">超链接文本</a> 
@Html.ActionLink("超链接文本","Index"，"Home") <a href="/Home">超链接文本</a>
@Html.ActionLink("超链接文本", "About", "Home") <a href="/Home/About">超链接文本</a>
@Html.ActionLink("超链接文本", "Index", "Home", new { id = "11" },null) <a href="/Home/Index/11">超链接文本</a>
@Html.ActionLink("超链接文本", "Index", "Home", new { id = "11" }, new { @class = "aLink", data_val = "shouye", id = "shouye" }) <a class="aLink" data-val="shouye" href="/Home/Index/11" id="shouye">超链接文本</a>

注释：这里只介绍了其中的几种常用的调用方式，具体F12去了解吧！

3.ViewBag 是用于向页面传参的，可用于子页面向母版页传参，就例如前面的ViewBag.Title。也可用于控制器向页面插入值，例如如下：

控制器代码：

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace GamePortal.Web.Controllers

{

    public class HomeController : Controller

    {

        // GET: Home

        public ActionResult Index()

        {

            ViewBag.UserName = "测试用户";

            ViewBag.UserAccount = "";

            ViewBag.UserIntegral = "";

            ViewBag.LastLogonTime = "2018-10-08 17:54:00";

            return View();

        }

    }

}

HTML代码：

<div>

    <ul>

        <li>用户姓名: @ViewBag.UserName</li>

        <li>用户账号: @ViewBag.UserAccount</li>

        <li>用户积分: @ViewBag.UserIntegral</li>

        <li>最后一次登录时间: @ViewBag.LastLogonTime</li>

    </ul>

</div>

MVC视图布局页常用代码的更多相关文章

  1. MVC的布局页，视图布局页和分布页的使用

    一,结构如下图 二,布局页和视图布局页 1>使用方法一 _ViewStart.cshtml @{ Layout = "~/Views/Shared/_Layout.cshtml&quo ...

  2. ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  3. ASP.NET Core 入门笔记7，ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  4. ASP.NET MVC在布局页上使用模型(model)

    看到这标题有点怪,一般情况之下,我们很容易在视图与部分视图中使用模型(model),但是如果想在布局页_Layout.cshtml页中使用模型(model),按照普通方式也许没有达到预期的效果,在实现 ...

  5. asp.net mvc razor布局页中a标签的href的跳转问题

    笔者做了一个文件上传系统,文件上传后,保存在wwwroot目录的file文件夹中,并把该文件的路径保存到数据库中, 如这样的一个路径保存在数据库: file/b775f487-0127-41e0-9d ...

  6. 一、Core的布局页、起始页及错误页

    一.布局页面: 使用布局页相当于一个母版页,可以将各个页面公用部分,如上方标题区.左侧导航菜单区.下方版权声明及状态显示区以及通用的js及css引用等,集中放到布局页管理,具体功能页面只需关注自己独有 ...

  7. MVC教程八：母版页(布局页)视图

    一.母版页介绍和使用 母版页的扩展名为".cshtml",也叫做视图布局页,它相当于网页的模板.在其他网页中,只要引用了母版页,母版页的页面内容就可以自动显示出来,设计者可以修改引 ...

  8. IDEA项目搭建十四——Web站点Controller基类及布局页静态资源设计

    一.简介 站点搭建完成后,编写页面时一般会有如下几个需求 1.嵌套静态页面时有很大一部分通用代码,如css.js这部分可以使用thymeleaf的局部片段代码块组成 2.这些静态资源默认放在程序中,但 ...

  9. ASP.NET MVC 5 学习教程：修改视图和布局页

    原文 ASP.NET MVC 5 学习教程:修改视图和布局页 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...

随机推荐

  1. ubuntu16.04 安装caffe以及python接口

    http://blog.csdn.net/qq_25073253/article/details/72571714http://blog.csdn.net/greed7480/article/deta ...

  2. Unity使用JsonFX插件进行序列化

    孙广东  2015.6.25 Unity and JSON – Quick Guide: 相比較XML的沉重和密集,Json更加高效. Introduction: 什么是 Json ?假设你从未使用过 ...

  3. 数据结构 http://www.cnblogs.com/sun-haiyu/p/7704654.html

    数据结构与算法--从平衡二叉树(AVL)到红黑树 上节学习了二叉查找树.算法的性能取决于树的形状,而树的形状取决于插入键的顺序.在最好的情况下,n个结点的树是完全平衡的,如下图“最好情况”所示,此时树 ...

  4. Loadrunner进行md5加密方法

    本文主要介绍使用Loadrunner进行字符串md5加密的方法. 使用Loadrunner进行md5比较简单,首先是加载md5.h头文件,后使用头文件中的加密函数即可. 1. md5.h头文件内容如下 ...

  5. HE算法与Scaler算法

    HE算法:图像直方图均衡化 Scaler算法:图像缩放 基于matab的scaler实现_图文_百度文库 https://wenku.baidu.com/view/016f5e4002768e9951 ...

  6. sublime text 2 破解

    本文是介绍sublime text 2.0.2 build 2221 64位 的破解 在你使用sublime时可能经常出现下图: 这是在提醒你注册 在工具栏上点击help->Enter Lice ...

  7. SQLServer------聚集索引和非聚集索引的区别

    转载: http://www.cnblogs.com/flashicp/archive/2007/05/08/739245.html 建立非聚集索引(vid不是主键) create index idx ...

  8. 如何让input number类型的标签不产生上下加减的按钮

    之前用 input type="number" 来放数字框,发现有个上下加减的东西,感觉不太好 这个容易出现0 然后减为负数 这种情况下怎么去掉右边的那个上下加减的小按钮呢?前端同 ...

  9. php 如何得到不含前导0的时分秒

    通常我们获取时分秒是用 date("H:i:s") ,得到的效果是这样的 而如果想获取不含前导0的时分秒的话,就需要把前导0去掉. 如何去掉呢?我们来分析一下,07变7,20还是2 ...

  10. 设置jQuery validate插件错误提示位置

    参照上一篇bootstrap布局注册表单 使用校验插件默认位置显示提示信息,发现错误提示信息换行了,由于增加了提示信息,表单显示高度也增加了,如下 默认提示信息位置代码为 将错误提示设置其显示在右边, ...