Correctement l'enregistrement JavaScript et CSS dans les modèles MVC 2 Editor

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

Question

Comment puis-je enregistrer correctement javascript blocs dans un ASP.NET MVC 2 (RTM) modèle Editor?

Le scénario spécifique que je suis est que je veux utiliser Dynarch JSCal2 DateTimePicker pour mon sélecteur datetime standard, mais cette question est en général un paquet javascript réutilisable. J'ai mon modèle fonctionne correctement maintenant, mais il a mon JS et CSS inclut dans ma page principale et je préférerais n'inclure ces choses si je les ai réellement besoin: 

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

Alors, évidemment, je pouvais mettre ces lignes dans mon modèle, mais si j'ai un écran qui a 5 DateTimePickers, alors ce contenu sera dupliqué 5 fois qui ne serait pas idéal. Quoi qu'il en soit, je veux encore le modèle de mon point de vue pour déclencher ce code mis dans la <head> de ma page.

Bien qu'il soit tout à fait sans rapport avec ma posant cette question, je pensais que je partage mon modèle ici (jusqu'à présent) dans le cas où il est utile de quelque façon que: 

<%@ 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>
Était-ce utile?

La solution

Je l'habitude d'ajouter un espace réservé de script dans ma page principale qui est surchargée par des vues:

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>

Voir: 

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

Remarquez comment le modèle de l'éditeur est inclus pour trois propriétés différentes du modèle, mais les scripts nécessaires sont inclus une seule fois.

Autres conseils

Je construis simple scritp Gérer pour gérer cela, malheureusement je ne l'ai pas fait pour le contrôle CSS sur Asp.Net MVC javascript Manager pour inclure des fichiers et Css . Malheureusement, il ne fonctionne pas proeprly CSS, pour javascript i tout simplement les avais au fond de mon fichier maître, mais CSS doit être dans la balise de tête, je ne l'ai pas trouvé un moyen encore de le faire ...

Mais en utilisant que j'ai pu eu script dans un HtmlHelper personnalisé, DatePicker que je l'utilise avec un modèle DateTime.ascx.

Le telerik gestionnaire d'actifs web vous permet pour accomplir ce que vous voulez et est open source.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top