Registro correcto de JavaScript y CSS en MVC 2 Plantillas de editor

¿Cómo puedo registrar correctamente los bloques de JavaScript en una plantilla de Editor ASP.NET MVC 2 (RTM)?Registro correcto de JavaScript y CSS en MVC 2 Plantillas de editor

El escenario específico en el que estoy es que quiero usar Dynarch JSCal2 DateTimePicker para mi selector de fecha y hora estándar, pero esta pregunta es en general para cualquier paquete javascript reutilizable. Tengo mi plantilla funciona correctamente ahora pero tiene mis JS y CSS incluye en mi página maestra y yo más bien sólo se incluiría estas cosas si realmente los necesita:

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

Así que, obviamente tan sólo pudiera poner estas líneas en mi plantilla, pero si tengo una pantalla que tiene 5 DateTimePickers, este contenido se duplicará 5 veces, lo que no sería ideal. De todos modos, todavía quiero que la Plantilla de mi Vista active este código en el <head> de mi página.

Si bien tiene relación alguna con mi hacer esta pregunta, pensé que me gustaría compartir mi plantilla aquí (hasta ahora) en caso de que sea útil en cualquier forma:

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

Fuente

2010-03-27 Jaxidian

A partir de ahora, solo estoy agregando todos los recursos posibles a mi página maestra. No quiero tener que administrar todos los recursos aún, la administración TODAVÍA estará en el lugar equivocado. – Jaxidian

Pregunta relacionada: http://stackoverflow.com/questions/2877927 –

Pregunta relacionada: http://stackoverflow.com/questions/2852928 –

Yo suelo añadir un marcador de posición de la escritura en mi página maestra que es anulado por puntos de vista:

maestro:

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

Vista:

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

Observe cómo se incluye la plantilla del editor para tres propiedades diferentes del modelo, pero los scripts necesarios se incluyen solo una vez.

Fuente

2010-03-27 19:33:39

Tiene sentido, pero ¿cómo se podrían enganchar mis plantillas de editor en eso? – Jaxidian

Las plantillas de editor dependen de algún módulo de script/complemento que se incluirá en la página. En su caso, supongo que este script contiene la función 'Calendar.setup'. La vista principal se encarga de incluir esta secuencia de comandos. En el ejemplo que proporcioné, todos los scripts están incluidos al final de la página (ver el archivo maestro), pero si lo prefiere, puede moverlos a la sección 'head'. –

No quiero que mis vistas tengan que ocuparse de estos scripts, sin embargo. Quiero que mis vistas no se preocupen por completo con las implementaciones de mis plantillas. Mi plan es usar este "control" javascript no ideal hasta que tenga un mejor "control" basado en JQuery o MVC para usar como datetimepicker. Y cuando llegue ese momento, no quiero tener que editar ningún otro archivo que no sea esta plantilla de editor único. SOC es el objetivo aquí; mi vista no debería necesitar saber de qué archivos js depende mi plantilla. – Jaxidian

I Build a simple scritp Administrar para manejar esto, lamentablemente no lo he hecho para comprobar CSS Asp.Net MVC Manager for javascript include and Css files. Desafortunadamente, no está funcionando adecuadamente para CSS, para JavaScript simplemente los tengo en la parte inferior de mi archivo maestro, pero CSS debe estar en la etiqueta principal, no he encontrado una manera de hacerlo ...

Pero usando eso he podido tener script en un HtmlHelper personalizado, DatePicker que uso con una plantilla DateTime.ascx.

Fuente

2010-03-29 02:20:00

¡Gracias por esta información! Parece que quieres hacer exactamente lo que quiero hacer. Analizaré esto y compartiré cualquier mejora que pueda tener. – Jaxidian

Después de probar esto, simplemente no puedo hacer que CSSManager funcione y no veo cómo es posible. – Jaxidian

Eso es lo que dije en mi respuesta, es más complicado para CSS ... Y no lo hice en mi código, solo funciona cuando lo agrega en la etiqueta del encabezado de una vista –

El telerik web asset manager le permite lograr lo que quiere y es de código abierto.

Fuente

2010-07-15 22:48:53

¡Agradable! ¡Gracias! – Jaxidian

Registro correcto de JavaScript y CSS en MVC 2 Plantillas de editor

Respuesta

Cuestiones relacionadas