Richtig Registrierung JavaScript und CSS in MVC 2 Editor Vorlagen

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

Frage

Wie kann ich Javascript-Blöcke in einer ASP.NET MVC 2 (RTM) Editor-Vorlage ordnungsgemäß registrieren?

Das spezifische Szenario in Ich bin ist, dass ich Dynarch JSCal2 Datetime für meine Standard-Datetime-Picker, aber diese Frage ist in jedes wiederverwendbaren Javascript Paket im allgemeinen. Ich habe meine Vorlage jetzt richtig arbeiten, aber es hat meine JS und CSS enthält in meiner Masterseite und ich würde lieber bin diese Dinge nur, wenn ich sie wirklich brauche: 

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

So offensichtlich konnte ich gerade diese Zeilen in meiner Vorlage, aber dann, wenn ich einen Bildschirm haben, die 5 DateTimePickers hat, dann würde dieser Inhalt 5 mal dupliziert werden, die nicht ideal wäre. Wie auch immer, ich will noch Vorlage meiner Ansicht der diesen Code auslösen in die <head> meiner Seite gesetzt wird.

Während es völlig unabhängig ist, meine diese Frage, ich dachte, dass ich meine Vorlage hier teilen würde (bisher) in Fall ist es sinnvoll in irgendeiner Weise: 

<%@ 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>
War es hilfreich?

Lösung

ich in der Regel einen Skript Platzhalter in meiner Masterseite hinzufügen, die von Ansichten außer Kraft gesetzt wird:

Master: 

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

Ausblick: 

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

Beachten Sie, wie die Editor-Vorlage für drei verschiedene Eigenschaften des Modells enthalten ist, aber die erforderlichen Skripte werden nur einmal enthalten.

Andere Tipps

ich ein einfaches Erstellen scritp zu handhaben verwalten, leider habe ich es nicht für CSS getan überprüfen Asp.Net MVC-Manager für Javascript und CSS-Dateien enthalten . Leider nicht proeprly für CSS, ich einfach für Javascript, es funktioniert sie am unteren Rand meiner Stammdatei nur hatte, aber CSS im head-Tag sein muss, habe ich nicht gefunden, einen Weg noch, dass ...

Aber mit, dass ich in einem benutzerdefinierten Htmlhelper zu hatte Skript in der Lage gewesen, Datepicker, die mich mit einer Vorlage verwenden DateTime.ascx.

Der telerik Web-Asset-Manager ermöglicht es Ihnen, zu erreichen, was Sie wollen, und ist Open Source.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top