Geek Answers Handbook

Correct JavaScript and CSS registration in MVC 2 editor templates

How to correctly register javascript blocks in an ASP.NET MVC 2 (RTM) editor template?

The specific scenario I'm participating in is that I want to use Dynarch JSCal2 DateTimePicker for my standard datetime collector, but this question is generally for any reusable javascript package. Now I have my template, but I have my JS and CSS on my main page, and I would prefer to include these things only if I really need them:

<link rel="stylesheet" type="text/css" href="../../Content/JSCal2-1.7/jscal2.css" /> <link rel="stylesheet" type="text/css" href="../../Content/JSCal2-1.7/border-radius.css" /> <script type="text/javascript" src="../../Scripts/JSCal2-1.7/jscal2.js"></script> <script type="text/javascript" src="../../Scripts/JSCal2-1.7/lang/en.js"></script>

So, obviously, I could just put these lines in my template, but if I have a screen with 5 DateTimePickers, then this content will be duplicated 5 times, which would not be ideal. In any case, I still want my view template to run this code in the <head> my page.

As long as I am completely unconnected with asking this question, I thought I would share my template here (for now) if it would be useful anyway:

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DateTime>" %> <%= Html.TextBoxFor(model => Model) %> <input type="button" id="<%= ViewData.TemplateInfo.GetFullHtmlFieldId("cal-trigger") %>" value="..." /> <script type="text/javascript"> var <%= ViewData.TemplateInfo.GetFullHtmlFieldId("cal") %> = Calendar.setup({ trigger : "<%= ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty) %>", inputField : "<%= ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty) %>", onSelect : function() { this.hide(); }, showTime : 12, selectionType : Calendar.SEL_SINGLE, dateFormat : '%o/%e/%Y %l:%M %P' }); </script>
+6
javascript asp.net-mvc asp.net-mvc-2 mvc-editor-templates
source share
3 answers

I usually add a script placeholder on my main page, which is overridden by views:

Teacher:

 <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <asp:ContentPlaceHolder ID="Styles" runat="server" /> </head> <body> <asp:ContentPlaceHolder ID="MainContent" runat="server" /> <script type="text/javascript" src="scriptAvailableToAllPages.js"></script> <asp:ContentPlaceHolder ID="Scripts" runat="server" /> </body> </html>

View:

 <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Ns.MyModel>" %> <asp:Content ID="indexScripts" ContentPlaceHolderID="Scripts" runat="server"> <script type="text/javascript" src="specific.js"></script> </asp:Content> <asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server"> <% using (Html.BeginForm()) { %> <%= Html.EditorFor(x => x.Date1) %> <%= Html.EditorFor(x => x.Date2) %> <%= Html.EditorFor(x => x.Date3) %> <input type="submit" value="OK" /> <% } %> </asp:Content>

Note that the editor template is included for three different model properties, but the necessary scripts are included only once.

+4
source share

I am creating a simple scritp. Manage this, unfortunately, I did not do this to validate the Asp.Net MVC Manager CSS for javascript include and Css files . Unfortunately, it does not work procprly for CSS, for javascript I just just had them at the bottom of my main file, but CSS should be in the main tag, I haven't found a way to do this yet ...

But using this, I was able to have a script in the custom HtmlHelper, DatePicker, which I use with the DateTime.ascx template.

+3
source share

telerik web resource manager allows you to do what you want and is open source.

+1
source share

More articles:


All Articles