Append HTML code to a existing Razor section - asp.net-mvc-3

Question

Is it possible to append the HTML code to a existing razor section?
Below is my scenario:
My _layout.cshtml contains something like this:
#RenderSection("BottomSection", required: false)
and in one of the view - _article.cshtml, I have defined the section like below:
#section BottomSection
{
<script src='~/Scripts/module/article_details.js' type='text/javascript'></script>
<script src='~/Scripts/module/modal.js' type='text/javascript'></script>
#MvcHtmlString.Create(Model.ExtraStuff)
}
and in a partial view named _counter.cshtml, which is used by the above view; I would like to add more HTML code to the same section i.e., BottomSection.
I tried declaring the BottomSection section again in the partial view:
#section BottomSection{
<text>More data</text>
}
But it didn't worked out.
Is there any way to achieve this - dynamically append more code to an already defined razor section in MVC 4?
Please note that the partial view doesn't expects any data from the parent view/model.
And I'm using MVC 4 with .Net Framework 4.0/VS2010.

Answer 1

I don't know how to append stuff to sections (in fact I would like to know that myself), but I know a trick that might produce similar result. Instead of using sections one can use TempData. TempData is a lot like ViewBag, but once a variable is set it'll live there for current user until one tries to access it again (it can live through a few successive requests for current user, so extra caution is advised). Below is an example of how it could be used.
In layout:
#Html.Raw(new MvcHtmlString((string)TempData["BottomSection"]));
In the view:
#{
var bottomSection = (string)TempData["BottomSection"];
if (bottomSection == null)
{
bottomSection = "";
}
bottomSection += "<script src='~/Scripts/module/article_details.js' type='text/javascript'></script>\n";
bottomSection += "<script src='~/Scripts/module/modal.js' type='text/javascript'></script>\n";
bottomSection += Model.ExtraStuff + "\n";
TempData["BottomSection"] = bottomSection;
}
In the partial view:
#{
var bottomSection = (string)TempData["BottomSection"];
if (bottomSection == null)
{
bottomSection = "";
}
bottomSection += "More data";
TempData["BottomSection"] = bottomSection;
}
This can be further improved by writing a helper for those pseudo sections and\or by moving the contents of the sections a separate partials (look below).
bottomSection += Html.Partial("_StuffToAddToSection").ToString();
Helper class:
public static class PseudoSectionsHelper
{
public static MvcHtmlString AppendToPseudoSection<T>(this TempDataDictionary TempData, string sectionName, T model, Func<T, HelperResult> content, bool addNewLineCharacter = true)
where T : class
{
return AppendToPseudoSection(TempData, sectionName, content(model).ToString(), addNewLineCharacter);
}
public static MvcHtmlString AppendToPseudoSection(this TempDataDictionary TempData, string sectionName, MvcHtmlString content, bool addNewLineCharacter = true)
{
return AppendToPseudoSection(TempData, sectionName, content.ToString(), addNewLineCharacter);
}
public static MvcHtmlString AppendToPseudoSection(this TempDataDictionary TempData, string sectionName, string content, bool addNewLineCharacter = true)
{
var section = (string)TempData[sectionName];
if (section == null)
{
section = "";
}
else if (addNewLineCharacter)
{
section += "\n";
}
section += content;
TempData[sectionName] = section;
// We return empty MvcHtmlString to be able to use this helper inline (without declaring code block #{ some code... } in view)
return new MvcHtmlString("");
}
public static MvcHtmlString PseudoSection(this TempDataDictionary TempData, string sectionName)
{
var section = (string)TempData[sectionName];
return new MvcHtmlString(section);
}
}
Use example
In layout add:
#TempData.PseudoSection("BottomSection")
In view:
#TempData.AppendToPseudoSection("BottomSection", Model, #<text>
<script src='~/Scripts/module/article_details.js' type='text/javascript'></script>
<script src='~/Scripts/module/modal.js' type='text/javascript'></script>
#MvcHtmlString.Create(Model.ExtraStuff)
</text>)
or
#{
TempData.AppendToPseudoSection("BottomSection", Model, #<text>
<script src='~/Scripts/module/article_details.js' type='text/javascript'></script>
<script src='~/Scripts/module/modal.js' type='text/javascript'></script>
#MvcHtmlString.Create(Model.ExtraStuff)
</text>);
}
or even
#TempData.AppendToPseudoSection("BottomSection", Html.Partial("BottomSectionScriptsAndStuff"))
And in partial:
#TempData.AppendToPseudoSection("BottomSection", "More data")

Answer 2

Maybe i dont understand your question but why you dont using nested partial views???
for example :
PartialView1
`<script src='~/Scripts/module/article_details.js' type='text/javascript'></script>
<script src='~/Scripts/module/modal.js' type='text/javascript'></script>
#MvcHtmlString.Create(Model.ExtraStuff)
#{Html.RenderPartial("PartialView2",Model.ExtraStuff );}`
PartialView2
`<text>More data</text>`

Answer 3

Using Ajax you can load the partial view and can render in your target division.
Try using jquery ajax
$.ajax({
type: 'GET',
url: '#Url.Action("Action","Controller")',
cache: false,
timeout: 20000,
contentType: "application/json; charset=utf-8",
success: function (_results) {
$("#TargetDiv").html(_results);
},
error: function (_results) {
}
});