在MVC 2编辑器模板中正确注册JavaScript和CSS

Jax*_*ian 6 javascript asp.net-mvc mvc-editor-templates asp.net-mvc-2

如何在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>
Run Code Online (Sandbox Code Playgroud)

所以很明显我可以把这些行放到我的模板中,但是如果我有一个有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>
Run Code Online (Sandbox Code Playgroud)

Dar*_*rov 4

我通常在母版页中添加一个被视图覆盖的脚本占位符:

掌握:

<%@ 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>
Run Code Online (Sandbox Code Playgroud)

看法:

<%@ 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>
Run Code Online (Sandbox Code Playgroud)

请注意如何为模型的三个不同属性包含编辑器模板,但所需的脚本仅包含一次。

  • 不过,我不希望我的观点必须处理这些脚本。我希望我的视图完全不关心我的模板的实现。我的计划是使用这个非理想的 javascript“控件”,直到我有更好的基于 JQuery 或 MVC 的“控件”来用作我的日期时间选择器。当那时到来时,我不想编辑除此编辑器模板之外的任何文件。SOC 是这里的目标 - 我的视图不需要知道我的模板依赖于哪些 js 文件。 (3认同)