Question:

Within Nested Layouts and sections, how does one know when to use Partial Pages and when to use Redefined Sections?

Details:

I asked this previous question ASP.NET MVC Razor Sections and Partials without fully understanding exactly what my question was until I dug in a little deeper and realized that I really need to understand the difference between Partial Pages and Redefined Sections and when to use one over the other.

Based on the original tutorial and going through this YouTube tutorial on Nested Layouts in ASP.NET MVC razor views, I started getting the hang of Nested Layouts with Sections.

I am still trying to understand Redefining Sections vs. Partial Pages using this tutorial about Razor, Nested Layouts and Redefined Sections.

I did find this question, Difference between MVC 3 Partial Page (Razor) and MVC 3 View Page with Layout (Razor)? and this response, which implies there is perhaps no difference.

Below is the code which contains nested layouts (_MasterLayout.cshtml and _SubLayout.cshtml) with Sections. I'm using Partial Pages containing divs with ids, so they can be shown or hidden.

_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>