Правильная регистрация JavaScript и CSS в шаблонах редактора MVC 2
-
22-09-2019 - |
Вопрос
Как мне правильно зарегистрировать блоки javascript в шаблоне редактора ASP.NET MVC 2 (RTM)?
Конкретный сценарий, в котором я нахожусь, заключается в том, что я хочу использовать Dynarch JSCal2 Указатель даты и времени для моего стандартного средства выбора даты и времени, но этот вопрос, как правило, относится к любому повторно используемому пакету 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>
Решение
Обычно я добавляю заполнитель сценария на свою главную страницу, который переопределяется представлениями:
Владелец:
<%@ 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>
Обратите внимание, что шаблон редактора включен для трех разных свойств модели, но необходимые сценарии включены только один раз.
Другие советы
Я создаю простой скрипт, способный справиться с этим, к сожалению, я не сделал этого для проверки CSS. Asp.Net MVC Manager для включения JavaScript и файлов Css .К сожалению, он не работает должным образом для CSS, для Javascript я просто разместил их внизу моего основного файла, но CSS должен быть в теге заголовка, я еще не нашел способа сделать это...
Но благодаря этому у меня появился сценарий в пользовательском HtmlHelper, DatePicker, который я использую с шаблоном DateTime.ascx.
Тот Самый менеджер веб-активов telerik позволяет вам достичь того, чего вы хотите, и имеет открытый исходный код.