MVC 2 エディター テンプレートへの JavaScript と CSS の適切な登録
-
22-09-2019 - |
質問
ASP.NET MVC 2 (RTM) エディター テンプレートに JavaScript ブロックを適切に登録するにはどうすればよいですか?
私がいる特定のシナリオは、私が使用したいことです 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 つの DateTimePicker がある場合、このコンテンツは 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>
お知らせどのようにエディタテンプレートはモデルの3つの異なる性質のために含まれていますが、必要なスクリプトは一度しか含まれています。
他のヒント
これを処理するための単純なスクリプトManageを作成しましたが、残念ながらCSSチェックアウトのためにそれを行っていませんでした JavaScript インクルードおよび Css ファイル用の Asp.Net MVC マネージャー . 。残念ながら、CSS では適切に機能しません。JavaScript の場合は単にマスター ファイルの末尾に配置しただけですが、CSS は head タグに含める必要があります。それを行う方法はまだ見つかりません...
しかし、それを使用すると、テンプレート DateTime.ascx で使用するカスタム HtmlHelper、DatePicker にスクリプトを含めることができました。