Правильная регистрация JavaScript и CSS в шаблонах редактора MVC 2 - PullRequest
Новая
       31

Правильная регистрация JavaScript и CSS в шаблонах редактора MVC 2

6 голосов
/ 27 марта 2010

Как правильно зарегистрировать блоки javascript в шаблоне редактора ASP.NET MVC 2 (RTM)?

Конкретный сценарий, в котором я нахожусь, заключается в том, что я хочу использовать Dynarch JSCal2 DateTimePicker для моего стандартного средства выбора даты и времени, но этот вопрос в целом относится к любому повторно используемому пакету javascript. Теперь мой шаблон работает нормально, но в моей главной странице есть JS и CSS, и я предпочел бы включить эти вещи, только если они мне действительно нужны: 

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

Так что, очевидно, я мог бы просто вставить эти строки в свой шаблон, но если бы у меня был экран с 5 DateTimePickers, то этот контент дублировался бы 5 раз, что было бы не идеально. В любом случае, я все еще хочу, чтобы шаблон моего представления запускал этот код в <head> моей страницы.

Хотя это совершенно не связано с тем, как я задавал этот вопрос, я решил поделиться своим шаблоном здесь (пока), если он пригодится каким-либо образом: 

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

Ответы [ 3 ]

4 голосов
/ 27 марта 2010

Я обычно добавляю скрипт-заполнитель на мою главную страницу, который переопределяется представлениями:

Мастер: 

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

Вид: 

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

Обратите внимание, как шаблон редактора включен для трех различных свойств модели, но необходимые сценарии включены только один раз.

3 голосов
/ 29 марта 2010

Я создаю простой сценарий. Управляй этим, к сожалению, я не сделал этого для проверки CSS. Asp.Net MVC Manager для javascript include и Css файлов . К сожалению, это не работает в первую очередь для CSS, для javascript у меня просто были они внизу моего основного файла, но CSS должен быть в теге head, я пока не нашел способа сделать это ...

Но благодаря этому я смог создать скрипт в пользовательском HtmlHelper, DatePicker, который я использую с шаблоном DateTime.ascx.

1 голос
/ 16 июля 2010

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.

...