up vote 14 down vote favorite
2
share [g+] share [fb]

simple question i'm sure (blush). I have a simple View and I wish to add a JQuery DatePicker javascript to this view (and not every view, via a masterpage).

I'm not sure what is the best way to do this.

Second, I'm conscience of where/when my Javascript loads. I'm a fan of YSlow and it recommends that i add any scripts to the bottom of the page, which I do.

So .. how could i do both?

Here's the view

<%@ Page
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <% using (Html.BeginForm()) {%>

    <p>
        <label for="StartDate">Start Date:</label>
        <!-- JQuery DatePicker to be added, here. -->
    </p>
    <% } %>
</asp:Content>

cheers ;)

link|improve this question
82% accept rate
feedback

3 Answers

up vote 6 down vote accepted

One way is put a content placeholder at the bottom of your master page, then the specific slave page that needs the javascript can specify the placeholders contents as the required javascript. Other pages that don't need the javascript simply don't specify any content for the placeholder.

link|improve this answer
Cheers :) For the record, i've added a new ContentPlaceHolder at the bottom of the page, right above the </body> tag. Discussion about that, here: developer.yahoo.net/blog/archives/2007/07/… – Pure.Krome Mar 29 '09 at 5:20
Agreed, will usually have one in the head as well.. the project i'm working on noe is very JS heavy, so jquery & jquery ui are loaded via master... The client browser gets this at login, and can cache it... – Tracker1 Mar 30 '09 at 6:13
feedback
up vote 10 down vote

Your MasterPage should have a ContentPlaceHolder for the head.

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server" />
</head>

Then you're able to include head elements (JavaScripts, StyleSheets, etc...) in your views:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="/Scripts/jquery/ui/ui.datepicker.js" type="text/javascript">
    </script>
    <link href="/Styles/myStyle.css" rel="stylesheet" type="text/css" />
</asp:Content>
link|improve this answer
1  
this answer was better, except that it was putting it in the head .. when i did say it should be added to the bottom of the page. So winob0t gets the tick. – Pure.Krome Mar 29 '09 at 5:19
feedback
up vote 9 down vote

In ASP.NET MVC3, you can now use a RenderSection to achieve this, at least for simpler scenarios. Just add a RenderSection to the bottom of the layout page, and from your view fill in the appliation code

RenderSections: http://www.dotnetcurry.com/ShowArticle.aspx?ID=636

link|improve this answer
+1 for the RenderSections link. That was what I was looking for. – rein Feb 7 at 1:33
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.