Menu
I am wondering what the best practice is for including javascript files inside partial views. Once rendered this will end up as a js include tag in the middle of my page's html. From my point of view this isn't a nice way of doing this. They belong in the head tag and as such should not prevent the browser from rendering the html in one go.
An example: I am using a jquery picturegallery plugin inside a 'PictureGallery' partial view as this partial view will be used on several pages. This plugin only needs to be loaded when this view is used and I don't want to have to need to know which plugins each partial view is using...
Thanks for your answers.
786
JavaScript functions can be bound to elements on the partial view; the partial view is rendered at the same time as the parent view. This happens when loading the partial view with a @Html.
We can include a JavaScript file in another JavaScript file using the native ES6 module system. This allows us to share code between different JavaScript files and achieve modularity in the code. There are other ways to include a JS file like Node JS require, jQuery's getScript function, and Fetch Loading.
Add section "Scripts" at the end of your Layout file and after including jQuery. Then, always put your scripts into this section. That's it. This doesn't work if, for example, in your _Layout 's <head> you write $(document).
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() .
Seems very similar to this question: Linking JavaScript Libraries in User Controls
I'll repost my answer that that question here.
I would definitely advise against putting them inside partials for exactly the reason you mention. There is a high chance that one view could pull in two partials that both have references to the same js file. You've also got the performance hit of loading js before loading the rest of the html.
I don't know about best practice but I choose to include any common js files inside the masterpage and then define a separate ContentPlaceHolder for some additional js files that are specific to a particular or small number of views.
Here's an example master page - it's pretty self explanatory.
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <head runat="server"> ... BLAH ... <asp:ContentPlaceHolder ID="AdditionalHead" runat="server" /> ... BLAH ... <%= Html.CSSBlock("/styles/site.css") %> <%= Html.CSSBlock("/styles/ie6.css", 6) %> <%= Html.CSSBlock("/styles/ie7.css", 7) %> <asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" /> </head> <body> ... BLAH ... <%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %> <%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %> <asp:ContentPlaceHolder ID="AdditionalJS" runat="server" /> </body> Html.CSSBlock & Html.JSBlock are obviously my own extensions but again, they are self explanatory in what they do.
Then in say a SignUp.aspx view I would have
<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server"> <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %> </asp:Content> HTHs, Charles
Ps. Here is a follow up question I asked about minifying and concatenating js files: Concatenate & Minify JS on the fly OR at build time - ASP.NET MVC
EDIT: As requested on my other answer, my implementation of .JSBlock(a, b) as requested
public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName) { return html.JSBlock(fileName, string.Empty); } public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName) { if (string.IsNullOrEmpty(fileName)) throw new ArgumentNullException("fileName"); string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", html.MEDebugReleaseString(fileName, releaseFileName)); return MvcHtmlString.Create(jsTag); } And then where the magic happens...
public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString) { string toReturn = debugString; #if DEBUG #else if (!string.IsNullOrEmpty(releaseString)) toReturn = releaseString; #endif return MvcHtmlString.Create(toReturn); } 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
