Menu
In a MVC3 project, I have a "_Layout.vbhtml" file with this code
<!DOCTYPE html> <html> <head> </head> <body> ... <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script> @RenderSection("Scripts", false) </body> </html> Then, I have a Partial View "ValidationScripts.vbhtml" in the Shared folder with
@Section Scripts <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery.validate.fix.js")"></script> <script src="@Url.Content("~/Scripts/localization/messages_de.js")"></script> End Section If I call the Partial View from a View like this...
@ModelType MvcExample.MyModel @Code ViewData("Title") = "Test" End Code @Html.Partial("ValidationScripts") <h2>Just a Test</h2> ... the Section "Scripts" is not rendered on the page, and the output HTML is
<!DOCTYPE html> <html> <head> </head> <body> ... <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script> </body> </html> How can I render the Section in the Partial View ?
815
Rendering a Partial View You can render the partial view in the parent view using the HTML helper methods: @html. Partial() , @html. RenderPartial() , and @html. RenderAction() .
The jQuery . load method calls your controller method, passing the value of the search text and updates the contents of the <div> with the partial view. Side note: The use of a <form> tag and @Html. ValidationSummary() and @Html.
To create a partial view, right-click on view -> shared folder and select Add -> View option. In this way we can add a partial view. It is not mandatory to create a partial view in a shared folder but a partial view is mostly used as a reusable component, it is a good practice to put it in the "shared" folder.
I had the same issue on top of duplicate scripts, so I created a couple of Extension methods:
public static class HtmlHelperExtensions { private const string _jSViewDataName = "RenderJavaScript"; private const string _styleViewDataName = "RenderStyle"; public static void AddJavaScript(this HtmlHelper htmlHelper, string scriptURL) { List<string> scriptList = htmlHelper.ViewContext.HttpContext .Items[HtmlHelperExtensions._jSViewDataName] as List<string>; if (scriptList != null) { if (!scriptList.Contains(scriptURL)) { scriptList.Add(scriptURL); } } else { scriptList = new List<string>(); scriptList.Add(scriptURL); htmlHelper.ViewContext.HttpContext .Items.Add(HtmlHelperExtensions._jSViewDataName, scriptList); } } public static MvcHtmlString RenderJavaScripts(this HtmlHelper HtmlHelper) { StringBuilder result = new StringBuilder(); List<string> scriptList = HtmlHelper.ViewContext.HttpContext .Items[HtmlHelperExtensions._jSViewDataName] as List<string>; if (scriptList != null) { foreach (string script in scriptList) { result.AppendLine(string.Format( "<script type=\"text/javascript\" src=\"{0}\"></script>", script)); } } return MvcHtmlString.Create(result.ToString()); } public static void AddStyle(this HtmlHelper htmlHelper, string styleURL) { List<string> styleList = htmlHelper.ViewContext.HttpContext .Items[HtmlHelperExtensions._styleViewDataName] as List<string>; if (styleList != null) { if (!styleList.Contains(styleURL)) { styleList.Add(styleURL); } } else { styleList = new List<string>(); styleList.Add(styleURL); htmlHelper.ViewContext.HttpContext .Items.Add(HtmlHelperExtensions._styleViewDataName, styleList); } } public static MvcHtmlString RenderStyles(this HtmlHelper htmlHelper) { StringBuilder result = new StringBuilder(); List<string> styleList = htmlHelper.ViewContext.HttpContext .Items[HtmlHelperExtensions._styleViewDataName] as List<string>; if (styleList != null) { foreach (string script in styleList) { result.AppendLine(string.Format( "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />", script)); } } return MvcHtmlString.Create(result.ToString()); } } On any View or Partial View or Display/Edit Template you simply add what you need:
@{ Html.AddJavaScript("http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"); } In your Layouts you render it where you want it:
<!DOCTYPE html> <html lang="en"> <head> @Html.RenderStyles() @Html.RenderJavascripts() The only issue you may have is the order in which the scripts are rendered if you get to complex. If that becomes an issue, simply add the scripts to the bottom of your views/templates, and simply reverse the order in the extension method before rendering them.
200
You can't use sections in partial views. You can go for custom helpers as mentioned here.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
