Registrar adecuadamente a JavaScript y CSS en MVC plantillas 2 Editor

StackOverflow https://stackoverflow.com/questions/2530623

Pregunta

Como me registro correctamente bloques JavaScript en una plantilla de 2 (RTM) Editor de ASP.NET MVC?

El escenario específico que estoy en es que quiero usar Dynarch JSCal2 DateTimePicker para mi selector de fecha y hora estándar, pero esta pregunta es, en general, a cualquier paquete Javascript reutilizable. Tengo mi plantilla funciona correctamente ahora pero tiene mi 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, entonces este contenido se duplicaría 5 veces lo que no sería ideal. De todas formas, todavía quiero Plantilla de mi vista para activar el código de su puesta en el <head> de mi página.

A pesar de que 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>
¿Fue útil?

Solución

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>

Ver: 

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

Aviso cómo el editor de plantillas se incluye para tres propiedades diferentes del modelo, pero las secuencias de comandos requeridos están incluidos solamente una vez.

Otros consejos

Construyo un simple scritp Administrar para manejar esto, por desgracia, no he hecho por CSS echa un vistazo a Asp.Net MVC Manager para Javascript y CSS incluyen . Por desgracia, no está trabajando proeprly para CSS, JavaScript i simplemente los tenía en la parte inferior de mi archivo maestro, pero CSS debe estar en la etiqueta de la cabeza, no he encontrado todavía una manera de hacer eso ...

Pero el uso que yo he sido capaz de guión tenido en HtmlHelper encargo, DatePicker que utilizo con una plantilla DateTime.ascx.

El telerik web gestor de activos que permite para lograr lo que quiere y es de código abierto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top