dynamically changing #section in asp.net view - asp.net-mvc

Question

I am working on asp.net MVC 3 application and I have a layout page with a section like this:
<div class="rt-block">
<div id="rt-mainbody">
#if (IsSectionDefined("BodyTitle"))
{
<div class="rt-headline">
<h1 class="rt-article-title">
#RenderSection("BodyTitle", false)
</h1>
</div>
}
<div class="clear">
</div>
<div>
#RenderBody()
</div>
</div>
</div>
In My View, I am defining the section like this:
#section BodyTitle {
<span>Verify</span> Your Identity
}
partail view here
This View loads one of two partial views depending on link click.
I want that when one partial view is loaded then section has different text where it should have different text when other partial view is loaded. How can I change section contents on change of partial view ?
I tried to move section to partial views but in that case it is not loaded at all. Can't we define section in partial view which is declared in layout view ?
Please suggest

Answer 1

You cannot define sections in partial views. They must be defined in the main view. So basically what you need is to update 2 different portions of your DOM when a link is clicked. One possible way to achieve this is to render the partial view to a string inside the controller action and then return a JSON result containing the 2 properties with the corresponding partial contents.
return Json(new
{
partialHtml = RenderPartialViewToString("_SomePartial"),
sectionHtml = RenderPartialViewToString("_SomeSection")
});
and then:
$.ajax({
url: '...',
type: 'POST',
success: function(result) {
// first update the partial
$('#partialContainerId').html(partialHtml);
// now update the section
$('.rt-article-title').html(sectionHtml);
}
});
You could externalize the contents of the section inside a partial.