ansaurus

Question

Properly registering JavaScript and CSS in MVC 2 Editor Templates

Answer 1

+2 A:

I usually add a script placeholder in my master page that is overridden by views:

Master:

<%@ 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"&gt;
<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>

Notice how the editor template is included for three different properties of the model but the required scripts are included only once.

Darin Dimitrov 2010-03-27 19:33:39

Makes sense, but how would my Editor Templates hook into that?

Jaxidian 2010-03-27 19:34:33

The editor templates rely on some script module/plugin to be included in the page. In your case I guess that this script contains the `Calendar.setup` function. The main view takes care to include this script. In the example I provided all scripts are included at the end of the page (see master file) but if you prefer you could move them to the `head` section.

Darin Dimitrov 2010-03-27 19:38:22

I don't want my views to have to deal with these scripts, though. I want my views to be completely unconcerned with my templates' implementations. My plan is to use this non-ideal javascript "control" until I have a better JQuery or MVC-based "control" to use as my datetimepicker. And when that time comes, I don't want to have to edit any files other than this one editor template. SOC is the goal here - my view shouldn't need to know what js files my template depends upon.

Jaxidian 2010-03-27 19:44:27

Unfortunately the WebForms view engine prevents you from overriding sections defined in master from partial views. Other view engines such as NVelocity or Brail allow you to achieve this.

Darin Dimitrov 2010-03-27 19:50:33

So there are no equivalents to ScriptManager.Registerxxx functions for MVC Templates?

Jaxidian 2010-03-27 19:52:45

This also does not work for partial views.

xanadont 2010-08-06 19:36:54

Answer 2

+2 A:

I Build a simple scritp Manage to handle this, unfortunately i haven't done it for CSS check out Asp.Net MVC Manager for javascript include and Css files . Unfortunately, it's not working proeprly for CSS, for javascript i simply just had them at the bottom of my master file, but CSS must be in the head tag, i haven't found a way yet to do that...

But using that I've been able to had script in a custom HtmlHelper, DatePicker which I use with a template DateTime.ascx.

moi_meme 2010-03-29 02:20:00

Thanks for this info! It sounds like you're wanting to do exactly what I want to do. I'll look into this and share any improvements I might have.

Jaxidian 2010-03-29 10:44:42

After trying this out, I simply cannot get the CSSManager to work and I don't see how it is possible.

Jaxidian 2010-03-29 13:24:14

That's what I said in my response, it's more complicated for CSS... And I didn't do it in my code, it's only working when you add it in the header tag of a view

moi_meme 2010-03-29 17:12:21

I know your implementation of it is not working. I meant I could not figure out how to get it to work. The primary problem I see is caused by the stateless nature of this, and what we're trying to do with the CSS requires state, and deferred execution.

Jaxidian 2010-03-30 21:50:25

Answer 3

+1 A:

The telerik web asset manager allows you to accomplish what you want and is open source.

Brian 2010-07-15 22:48:53

Nice! Thank you!

Jaxidian 2010-07-16 16:03:45

ansaurus

tags:

views:

answers:

Properly registering JavaScript and CSS in MVC 2 Editor Templates

related questions