Registrazione corretta di JavaScript e CSS nei modelli di editor MVC 2

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

Domanda

Come posso registrare correttamente i blocchi JavaScript in un modello di editor ASP.NET MVC 2 (RTM)?

Lo scenario specifico in cui mi trovo è quello che voglio utilizzare Dynarch JSCal2 DateTimePicker per il mio selettore datetime standard, ma questa domanda riguarda in generale qualsiasi pacchetto javascript riutilizzabile.Il mio modello funziona correttamente ora, ma ha i miei JS e CSS inclusi nella mia pagina master e preferirei includere queste cose solo se ne ho effettivamente bisogno:

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

Quindi ovviamente potrei semplicemente inserire queste righe nel mio modello, ma se avessi uno schermo con 5 DateTimePicker, questo contenuto verrebbe duplicato 5 volte, il che non sarebbe l'ideale.Ad ogni modo, voglio comunque che il modello della mia vista attivi l'inserimento di questo codice nel file <head> della mia pagina.

Sebbene non sia completamente correlato al fatto che ho posto questa domanda, ho pensato di condividere il mio modello qui (finora) nel caso fosse utile in qualche modo:

<%@ 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>
È stato utile?

Soluzione

Di solito aggiungo un segnaposto di script nella mia pagina master che viene sovrascritto dalle visualizzazioni:

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>

Visualizzazione:

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

Nota come il modello dell'editor è incluso per tre diverse proprietà del modello ma gli script richiesti sono inclusi solo una volta.

Altri suggerimenti

I costruire un semplice scritp Gestisci per gestire questa situazione, purtroppo non ho fatto per il check-out i CSS Asp.Net MVC manager per javascript includere e file CSS . Purtroppo, non funziona proeprly per i CSS, JavaScript io semplicemente li avevo al fondo del mio master file, ma i CSS deve essere nel tag head, non ho trovato un modo ancora da fare ...

ma usando che sono stato in grado di avuto script in un HtmlHelper personalizzato, DatePicker che io uso con un modello DateTime.ascx.

Il Telerik web Asset Manager consente per realizzare ciò che si vuole ed è open source.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top