Migrating from Spark to Razor

Question

We are gradually migrating a Spark based project to use Razor and I have come across something I can't seem to find an answer to.

My line in my Spark master calls a sub View like so

<Sidebar>   
    <segment name="header"> 
        <div> <!-- header content--> </div>
    </segment>
    <segment name="content"> 
        <div> <!-- content content--> </div>
    </segment>
</Sidebar>

The Sidebar spark looks like so

<div id="sidebar" >
<div class="header">
    <render segment="header">
        <!-- placeholder -->
    </render>
</div>
<div class="ui-layout-content content">
    <render segment="content">
        <!-- placeholder -->
    </render>   
</div>

This renders with the content from the first section displayed in the layout from the second. Is there some way I can recreate this using Razor. I can see that I need to use Partials, but I can't see how to pass the content into the sidebar subview.

Essentially I'm trying to recreate the functionality that Spark calls Segments (or previously Sections) http://sparkviewengine.com/reference/elements#segmentpreviouslyknownassection

EDIT: More information. I have an Index.cshtml that gets it's layout from Application.cshtml. In here I have the markup code that goes into the Sidebar.cshtml partial.

If I add put @section header (which is rendered in the Sidebar.cshtml) in my Index.cshtml file it doesn't recognise it as a valid section. I have @RenderSection("header", false) in my Sidebar.cshtml file.

How do I tie these 2 together?

So my hierarchy is as follows

Application.cshtml -- Global page layout
Index.cshtml -- Page layout including content for the sidebar
Sidebar.cshtml -- Template / layoout for sidebar content from Index.cshtml

For example

in Index.cshtml

    @RenderPage("Sidebar") 
    @section SidebarHeader { <!--Title or something --> }
    @section SidebarContent { <!--Content --> }

Then in Sidebar.cshtml

    <div class="header">
        @RenderSection("SidebarHeader", false)
    </div>
    <div class="ui-layout-content content">
        @RenderSection("SidebarContent", false)
    </div>

The idea is that I can have a template in a sub-view that is populated with the content from the view. Meaning that I can template areas for other pages across the site. Eg. The sidebar content on another page will need the same format, but different content.

Answer 1

You can use Layouts and Sections to accomplish the same. See details here: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

Index.cshtml:

@RenderSection("Sidebar")

Your sidebar.cshtml would look like this:

<div id="sidebar" >
    <div class="header">
        @RenderSection("header", required: false)
    </div>
    <div class="ui-layout-content content">
        @RenderSection("content", required: false)  
    </div>
</div>

And sub view(s) like this (you can define them in one too but having them separate is probably better in the long term):

SubViews.cshtml:

    @section header {
      <div> <!-- header content--> </div>

    }

    @section content {
      <div> <!-- content content--> </div>

    }