ASP.NET MVC Razor,嵌套布局(部分页面或重新定义的部分)?

时间:2018-01-03 18:15:28

标签: asp.net-mvc razor sections renderpartial

问题:

在嵌套布局和部分中,如何知道何时使用部分页面以及何时使用重新定义的部分?

详细说明:

我问过上一个问题ASP.NET MVC Razor Sections and Partials ,但没有完全理解我的问题是什么,直到我深入挖掘并意识到我真的需要理解部分页面和重新定义的部分之间的区别以及何时使用一个另一个。

根据原始教程并在Nested Layouts in ASP.NET MVC razor views上浏览此YouTube教程,我开始了解带有章节的嵌套布局。

我仍在尝试了解重新定义部分与部分页面,使用本教程关于Razor, Nested Layouts and Redefined Sections

我确实找到了这个问题Difference between MVC 3 Partial Page (Razor) and MVC 3 View Page with Layout (Razor)?response,这意味着可能没有区别。

下面是包含Sections的嵌套布局(_MasterLayout.cshtml和_SubLayout.cshtml)的代码。我使用包含带有ID的div的部分页面,因此可以显示或隐藏它们。

_MasterLayout.cshtml

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/jquery-1.10.2.min.js")

</head> 
<body>

    <div id="header">
        <h1>My Site Header</h1>
    </div>

    <div id="content">
        @RenderBody()
    </div>

    <div id="footer">
        <p>Site Footer - &copy; Santa Clause</p>
    </div>

</body> 
</html>

_SubLayout.cshtml

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

    @if (IsSectionDefined("SideBar"))
    {
        <div id="sidebar">
            @RenderSection("SideBar")
        </div>
    }

    <div id="content">
        @RenderBody()
    </div>

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

@Html.Partial("HomeContentPartial")

@section SideBar {

    @Html.Partial("HomeMenuPartial")

}

.CSS

#header {
    background-color: #5c87b2;
    color: white;
    padding: 1px; }

#content {
    float: left;
    margin: 10px; }

#sidebar {
    float: left;
    margin: 10px;
    padding: 10px;
    border: dotted 5px red;
    width: 180px; }

#footer {
    text-align: center;
    clear: both; }

_ViewStart.cshtml

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

HomeMenuPartial.cshtml

<div id="menu1">
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
    </ul>
</div>

<div id="menu2">
    <ul>
        <li><a href="#">Link Four</a></li>
        <li><a href="#">Link Five</a></li>
        <li><a href="#">Link Six</a></li>
    </ul>
</div>

<div id="menu3">
    <ul>
        <li><a href="#">Link Seven</a></li>
        <li><a href="#">Link Eight</a></li>
        <li><a href="#">Link Nine</a></li>
    </ul>
</div>

<div id="menu4">
    <ul>
        <li><a href="#">Link Ten</a></li>
        <li><a href="#">Link Eleven</a></li>
        <li><a href="#">Link Twelve</a></li>
    </ul>
</div>

HomeContentPartial.cshtml

<div id="GridView" style="min-width: 1200px; min-height: 100px; background-color: #dda7e4">
    <p>This is the Grid View</p>
</div>

<div id="TabView" style="min-width: 1200px; min-height: 100px; background-color: #a0acdb">
    <p>This is the Tab View</p>
</div>

0 个答案:

没有答案