Registrazione corretta di JavaScript e CSS in MVC 2 Modelli di editor

Come registrare correttamente i blocchi javascript in un modello di editor ASP.NET MVC 2 (RTM)?Registrazione corretta di JavaScript e CSS in MVC 2 Modelli di editor

Lo scenario specifico in cui mi trovo è che voglio utilizzare Dynarch JSCal2 DateTimePicker per il mio selettore datetime standard, ma questa domanda è in generale per qualsiasi pacchetto javascript riutilizzabile. Ho il mio modello funziona correttamente, ma ora ha la mia JS e CSS include nella mia pagina master e avrei preferito includere solo queste cose, se ho effettivamente bisogno di loro:

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

Così, ovviamente, ho potuto solo mettere queste righe nel mio modello, ma se ho uno schermo con 5 DateTimePickers, questo contenuto verrebbe duplicato 5 volte e non sarebbe l'ideale. Ad ogni modo, desidero comunque che il mio modello di visualizzazione attivi il codice inserito nella pagina <head> della mia pagina.

Mentre è del tutto estraneo alla mia questa domanda, ho pensato di condividere la mia modello su qui (finora) nel caso in cui è utile in qualsiasi 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>

fonte

2010-03-27 Jaxidian

A partire da ora, sto solo aggiungendo tutte le risorse possibili alla mia pagina principale. Non voglio dover gestire le risorse dappertutto ancora che la gestione ANCORA essere nel posto sbagliato. – Jaxidian

Domanda correlata: http://stackoverflow.com/questions/2877927 –

Domande correlate: http://stackoverflow.com/questions/2852928 –

Io di solito aggiungere un segnaposto sceneggiatura nella mia pagina master che viene sovrascritto da vedute:

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>

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>

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

fonte

2010-03-27 19:33:39

Ha senso, ma come si collegherebbero i miei modelli di editor? – Jaxidian

I modelli di editor si basano su alcuni moduli/plugin di script da includere nella pagina. Nel tuo caso, suppongo che questo script contenga la funzione 'Calendar.setup'. La vista principale si occupa di includere questo script. Nell'esempio che ho fornito tutti gli script sono inclusi alla fine della pagina (vedi il file master), ma se preferisci puoi spostarli nella sezione 'testa'. –

Non voglio che le mie viste abbiano a che fare con questi script, però. Voglio che le mie opinioni siano completamente indifferenti alle implementazioni dei miei modelli. Il mio piano è di usare questo "controllo" javascript non ideale finché non avrò un "controllo" basato su JQuery o MVC da usare come mio datetimepicker. E quando arriverà quel momento, non voglio dover modificare file diversi da questo modello di editor. Il SOC è l'obiettivo qui - la mia vista non dovrebbe aver bisogno di sapere da quale file js dipende il mio template. – Jaxidian

I Creare un semplice scritp Gestire questo problema, sfortunatamente non l'ho fatto per CSS check out Asp.Net MVC Manager for javascript include and Css files. Sfortunatamente, non funziona proeprly per CSS, per javascript semplicemente li ho semplicemente in fondo al mio file master, ma i CSS devono essere nel tag head, non ho ancora trovato il modo di farlo ...

Ma usando quello sono stato in grado di avere uno script in un HtmlHelper personalizzato, DatePicker che uso con un modello DateTime.ascx.

fonte

2010-03-29 02:20:00

Grazie per queste informazioni! Sembra che tu voglia fare esattamente quello che voglio fare. Approfondirò questo e condividerò eventuali miglioramenti che potrei avere. – Jaxidian

Dopo aver provato questo, non riesco semplicemente a far funzionare il CSSManager e non vedo come sia possibile. – Jaxidian

Questo è quello che ho detto nella mia risposta, è più complicato per i CSS ... E non l'ho fatto nel mio codice, funziona solo quando lo aggiungi nel tag di intestazione di una vista –

Il telerik web asset manager consente di realizzare ciò che si desidera ed è open source.

fonte

2010-07-15 22:48:53

Bello! Grazie! – Jaxidian

Registrazione corretta di JavaScript e CSS in MVC 2 Modelli di editor

risposta

Problemi correlati