猿教程 Logo

新建布局视图

猿教程 本节教程讲述如何创建一个Asp.Net MVC的布局视图。

要在Visual Studio中创建新的布局视图,右键单击共享文件夹 - >选择添加 - >单击新项目..

在添加新项目对话框中,选择MVC 5布局页面(Razor),并将布局页面名称为“_myLayoutPage.cshtml”,然后单击添加。


你会看到_myLayoutPage.cshtml如下所示。

相关实例:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

现在,使用RenderSection(“footer”,true)方法添加<footer>标记以及一些样式,如下所示。 请注意,我们根据需要制定了本节。 这意味着使用_myLayoutPage作为其布局视图的任何视图都必须包含页脚节。

相关实例:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div>
        @RenderBody()
    </div>
    <footer class="panel-footer">
        @RenderSection("footer", true)
    </footer>
</body>
</html>

现在,让我们在HomeController的Index视图中使用_myLayoutPage.cshtml。

您可以通过右键单击HomeController的Index操作方法添加空的index视图,然后选择添加视图。 选择Empty作为脚手架模板,将_myLayoutPage.cshtml作为布局视图,然后单击添加。


这将创建Index.cshtml如下所示。

相关实例:

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

    <h2>Index</h2>

所以现在,我们创建了使用我们的_myLayoutPage.cshtml作为布局视图的index视图。 我们现在将添加页脚部分和一些样式,因为_myLayoutPage需要页脚部分。

相关实例:

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

<div class="jumbotron">
    <h2>Index</h2>
</div>
<div class="row">
    <div class="col-md-4">
        <p>This is body.</p>
    </div>
    @section footer{
        <p class="lead">
            This is footer section.
        </p>
    }
</div>

现在,运行应用程序,您将看到index视图将包含正文和页脚部分如下所示。


现在,通过猿教程(www.yuanjiaocheng.net)本节的学习,您可以使用不同的呈现方法创建新的布局视图。


版权声明:本站所有教程均为本站原创或翻译,转载请注明出处,请尊重他人劳动果实。请记住本站地址:www.yuanjiaocheng.net (猿教程) 作者:卿文刚
本文标题: C#环境
本文地址:http://www.yuanjiaocheng.net/mvc/create-layout-view-in-mvc.html