2009-03-29 26 views
32

Tengo una vista simple y deseo agregar un JQuery DatePicker JavaScript a esta vista (y no a cada vista, a través de una página maestra).¿Cómo agrego JavaScript a una vista ASP.NET MVC?

No estoy seguro de cuál es la mejor manera de hacerlo.

En segundo lugar, soy consciente de dónde y cuándo se carga mi JavaScript. Soy fan de YSlow y recomiendo que añada scripts al final de la página, lo cual hago.

Entonces, ¿cómo podría hacer ambas cosas?

Aquí está la vista:

<%@ 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> 

Respuesta

12

Una forma es poner un marcador de contenido en la parte inferior de la página principal, la página específica esclavo que necesita el Javascript puede especificar el contenido marcadores de posición como el código JavaScript necesario. Otras páginas que no necesitan el javascript simplemente no especifican ningún contenido para el marcador de posición.

+0

Saludos :) Para el registro, he añadido un nuevo ContentPlaceHolder en la parte inferior de la página, justo encima de la etiqueta. Debate sobre eso, aquí: http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html –

+0

Estoy de acuerdo, generalmente también tendré uno en la cabeza ... el proyecto en el que estoy trabajando noe es muy JS pesado, así que jquery y jquery ui se cargan vía master ... El navegador del cliente lo consigue al iniciar sesión, y puede guardarlo en caché ... – Tracker1

15

Su página maestra debe tener un ContentPlaceHolder para la cabeza.

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

entonces usted es capaz de incluir elementos del cabezal (JavaScripts, hojas de estilo, etc ...) en sus puntos de vista:

<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> 
+1

esta respuesta fue mejor, excepto que estaba poniéndola en la cabeza ... cuando dijo que debería agregarse al final de la página. Entonces winob0t recibe el tic. –

22

en ASP.NET MVC3, ahora se puede utilizar un RenderSection a lograr esto, al menos para escenarios más simples. Sólo tiene que añadir un RenderSection a la parte inferior de la página de diseño, y desde su punto de vista rellene el código appliation

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

+1

+1 para el enlace RenderSections. Eso era lo que estaba buscando. – rein

Cuestiones relacionadas