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

起飞网 ASP.NET MVC 5 学习教程目录：

首先，你希望改变页面顶部的“Application name”链接，这段文字在每个页面都有，是公用的。尽管它出现在程序中的每个页面，但实际上它只写在一个地方。在解决方案资源管理器中找到 /Views/Shared 文件夹，打开_Layout.cshtml 文件。这个页面叫做布局页，放在所有页面都能用的共享文件夹中。

图1：_Layout.cshtml文件的位置

布局模板允许你在页面的某个地方指定HTML容器，然后在网站多个页面中应用。找到@RenderBody() 行，RenderBody 是一个占位符，所有你使用了_layout.cshtml文件的视图页面会被显示在这个地方，“包装”在布局页中。例如，如果你选择About链接，视图Views\Home\About.cshtml 将被绘制在 RenderBody  方法中。

修改布局模板中的ActionLink，将"Application name"改为"MVC Movie"。

代码清单1：修改后的ActionLink

<div class="container">

    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

    </button>

    @Html.ActionLink("MVC Movie", "Index", "Home", null, new { @class = "brand" })

    <div class="nav-collapse collapse">

        <ul class="nav">

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

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

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

        </ul>

        @Html.Partial("_LoginPartial")

    </div>

</div>

用下面的标签替换title元素的内容：

代码清单2：修改后的title标签

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - Movie App</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

运行应用程序，现在已将变成“MVC Movie”了。单击About链接，你会看到这个页面也显示“MVC Movie”。我们仅仅修改了布局模板，就为网站中的所有页面换上了新的标题。

图2：About页面

现在让我们来改变Index视图中的title吧。

打开MvcMovie\Views\HelloWorld\Index.cshtml 。有两个地方需要我们修改：浏览器标题栏中的文本，然后是次要的标题（<h2>元素）。你可以稍微修改一下代码，这样就可以看到哪些代码影响了哪些部分。

代码清单3：Index.cshtml

@{

    ViewBag.Title = "Movie List";

}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

为了指明HTML显示的标题，上面的代码中设置了ViewBag对象（在Index.cshtml视图模板中）的Title属性。在布局模板中（Views\Shared\_Layout.cshtml ）的<head>节点的<title>标签使用了这个值。

代码清单4：在布局页总使用Title的值

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - Movie App</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

使用这种ViewBag的方式，你可以很容易的在视图模板和布局页中之间传递参数。

运行应用程序，浏览http://localhost:xx/HelloWorld 。

图3：在浏览器中查看修改后的HelloWorld页面

注意这个页面发生的变化：

浏览器标题、主标题、此标题都发生了改变（如果你没有看到这些变化，可能是浏览器缓存了之前的内容，在浏览器中按CTRL+F5强制从刷新页面）。浏览器标题使我们在Index.cshtml中传递给布局页的参数，布局页又加上了“- Movie App”部分。

通过这个例子你会看到，布局模板提供了一种简单的修改应用程序中全部页面的方式。

到目前为止，我们用到的少量数据（像上面例子中的“Hello from our View Template!”）都是硬编码的。我们用到了MVC中的“V”（View）和“C”（Controller），但还没用到过“M”（Model）。接 下来我们就演练一下如何创建数据库，并通过模型来获取数据。

本文转自起飞网，原文地址：http://www.qeefee.com/mvc/mvc-5-changing-views-and-layout-pages

 

如果认为此文对您有帮助，别忘了支持一下哦！

作者：齐飞
声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。

ASP.NET MVC 5 学习教程：修改视图和布局页的更多相关文章

  1. ASP.NET MVC 5 学习教程：Edit方法和Edit视图详解

    原文 ASP.NET MVC 5 学习教程:Edit方法和Edit视图详解 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 ...

  2. ASP.NET MVC 5 学习教程：控制器传递数据给视图

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

  3. ASP.NET MVC 5 学习教程：添加视图

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

  4. ASP.NET MVC 5 学习教程：快速入门

    起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控制器访问模型的数据 生成的代码详解 使用 SQL Se ...

  5. ASP.NET MVC 5 学习教程：添加验证

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

  6. ASP.NET MVC 5 学习教程：数据迁移之添加字段

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

  7. ASP.NET MVC 5 学习教程：添加查询

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

  8. ASP.NET MVC 5 学习教程：使用 SQL Server LocalDB

    原文 ASP.NET MVC 5 学习教程:使用 SQL Server LocalDB 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 ...

  9. ASP.NET MVC 5 学习教程：生成的代码详解

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

随机推荐

  1. js函数调用模式总结

    在javascript中一共有四种调用模式:方法调用模式.函数调用模式.构造器调用模式和apply调用模式.这些模式在如何初始化关键参数this上存在差异 方法调用模式 当一个函数被保存为对象的一个属 ...

  2. 46. Lotus Notes中编程发送邮件（一）

    邮件是Lotus Notes体系的核心和基本功能,以至于Send()是NotesDocument的一个方法,任何一个文档都可以被发送出去,Notes里的一封邮件也只是一个有一些特殊字段的文档.在程序开 ...

  3. mysql 假设存在id则设数据自添加1 ，不存在则加入。java月份计算比較

    </pre><pre name="code" class="sql">INSERT INTO invite_rejectlog_num ...

  4. jsp 声明类的使用

    能够在"<%!"和"%>"之间声明一个类,该类在JSP页面内有效,即在JSP页面的Java程序片部分能够使用该类创建对象.在以下的样例中,我们定义了 ...

  5. NS2 nam中节点及数据流颜色设置

    NS2 节点颜色设置在http://hi.baidu.com/jrwen0/item/d105c642f4c3ce36fb89601b说明的比較具体,大家能够參见. 我这里想说的是数据流颜色的设置,相 ...

  6. python开发环境安装

    1.首先安装python-3.4.2.msi,此为python主程序,双击安装,根据自身的情况做选择,也可以使用默认设置,一路next也没什么问题. 2.设置环境变量=>编辑Path,在最后加上 ...

  7. 【ActiveMQ】持久化消息队列的三种方式

    1.ActiveMQ消息持久化方式,分别是:文件.mysql数据库.oracle数据库 2.修改方式: a.文件持久化: ActiveMQ默认的消息保存方式,一般如果没有修改过其他持久化方式的话可以不 ...

  8. java URI 与URL问题

    File类存在两个看起来很相似的方法toURI()和toURL(),这两个方法都是将文件转换成一个链接,可以网络访问.只是URI和URL的应用范围不同,URI来的更广. 那么为什么要使用toURI() ...

  9. Eclipse安装反编译插件JD(Java Decompiler)

    JD安装说明:*****Eclipse 插件安装*****1. 在网上搜索并下载jdeclipse_update_site.zip2. Eclipse -> Install New Softwa ...

  10. [LeetCode]题解（python）：062-Unique Paths

    题目来源: https://leetcode.com/problems/unique-paths/ 题意分析: 给定两个整型m,n.判断从一个m×n的矩阵里面,从(0,0)走到(m-1,n-1)一共有 ...