Moving MVC2 Helpers to MVC3 razor view engine
In my MVC 2 site, I have an html helper, that I use to add javascripts for my pages. In my master page I have the main javascripts I want to include, and then in the aspx pages, I include page specific javascripts.
So for example, my Site.Master has something like this:
....
<head>
<%=html.renderScripts() %>
</head>
...
//core scripts for main page
<%html.AddScript("/scripts/jquery.js") %>
<%html.AddScript("/scripts/myLib.js") %>
....
Then in the child aspx page, I may also want to include other scripts.
...
//the page specific script I want to use
<% html.AddScript("/scripts/register.aspx.js") %>
...
So when the full page gets rendered the javascript files are all collected and rendered in the head by sitemaster placeholder function RenderScripts. This works fine.
Now with MVC 3 and razor view engine, they layout pages behave differently, because now my page level javascripts are not rendered/included. Now all I see the LayoutMaster contents.
How do I get the solution wo workwith MVC 3 and the razor view engine. (The helper has already been re-written to return a HTMLString ;-))
For reference: my MasterLayout looks like this:
...
...
<head>
@{
Html.AddJavaScript("/Scripts/jQuery.js");
Html.AddJavaScript("/Scripts/myLib.js");
}
//Render scripts
@html.RenderScripts()
</head>
....
and the child page looks like this:
@{
Layout = "~/Views/Shared/MasterLayout.cshtml";
ViewBag.Title = "Child Page";
Html.AddJavaScript("/Scripts/register.aspx.js");
}
....
<div>some html </div>
Thanks for your help.
Edit = Just to explain, if this question is not clear enough.
When producing a "page" I collect all the javascript files the designers want to use, by using the html.addJavascript("filename.js") and store these in a dictionary - (1) stops people adding duplicate js files - then finally when the page is ready to render, I write out all the javascript files neatly in the header. (2) - this helper helps keep JS in one place, and prevents designers from adding javascript files all over the place. This used to work fine with Master/SiteMaster Pages in mvc 2. but how can I achieve this with razor?
Edit: html helper code:
....
private const string SCRIPTLINK =
"<script src=\"{0}\" type=\"text/javascript\"></script>";
public static HtmlString RenderScripts(this HtmlHelper helper) {
OrderedDiction开发者_如何学运维ary scripts =
helper.ViewContext.HttpContext.Items["JavaScripts"] as OrderedDictionary;
StringBuilder sb = new StringBuilder(500);
foreach (DictionaryEntry script in scripts) {
sb.AppendFormat(SCRIPTLINK, script.Key);
}
return new HtmlString(sb.ToString());
}
....
It's difficult to help you with your current solution without seeing the code for your HtmlHelpers. However, an alternative (and quite common) approach would be to use Razor sections instead.
In your layout page define a section placholder using @RenderSection()
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
@RenderSection("Scripts", required: false)
</head>
Then in your view define your section content
@section Scripts {
<script src="myscript.js" type="text/javascript"></script>
}
If you want to save yourself some typing and make it even cleaner, you could create a HtmlHelper to output your script tag
public static MVcHtmlString AddScript(this HtmlHelper helper, string path) {
//create script element html here
}
and then you can us a similar syntax style to your example
@section Scripts {
@Html.AddScript("myscript.js")
}
Your code is probably using separate dictionaries for the layout page and the view.
Try storing the dictionary in ViewBag, or in HttpContext.Items.
Thanks for the help and tips Slaks and David. I finally got a solution that seems to work, but with some things I don't like. If there is a better way, please feel free to point it out.
Here is my Child Page:
@{
ViewBag.Title = "Child Page";
}
@section Scripts {
@{Html.AddJavaScript("/Scripts/register.aspx.js");}
}
<div>some html </div>
I then have a _ViewStart.cshtml with:
@{
this.Context.Items.Add("JavaScripts",
new System.Collections.Specialized.OrderedDictionary());
Layout = "~/Views/Shared/MasterLayout.cshtml";
}
And my MasterLayout looks like this:
<html>
....
<title>@ViewBag.Title</title>
<head>
@{
//core scripts
html.AddScript("/scripts/jquery.js");
html.AddScript("/scripts/myLib.js");
....
}
@RenderSection("Scripts", required:true)
//Have to call render scripts here, but not sure about this?
@Html.RenderScripts()
</head>
....
</html>
This does render my script tags in the correct order and place, but does require the client to call the html helper renderScripts in child pages. which is ok, as we can create templates to help with that. Any better ideas?
加载中,请稍侯......
精彩评论