javascript - 如何避免在此 EditorTemplate 中放置 javascript？

Question

我根据其他一些 SO 问题和 Google 结果编写了以下 EditorTemplate:

@model Nullable<DateTime>
@{
    var metadata = ModelMetadata.FromStringExpression("", ViewData);
    string value;
    if(!String.IsNullOrEmpty(metadata.EditFormatString)) {
        if(Model.HasValue) {
            value = String.Format(metadata.EditFormatString, Model.Value);
        }
        else {
            value = metadata.NullDisplayText;
        }
    }
    else {
        value = Model.ToString();
    }
}
@Html.TextBox("", value, new { @class = "textBoxDate" })
<script type ="text/javascript">
    $(document).ready(function () {
        $('.textBoxDate').datepicker();
    });
</script>

我不喜欢的一点是，脚本会在每个 textBoxDate 下方编写。我明白为什么，并且我知道一种可能的解决方案是将脚本放入 .js 文件并在我的页面上引用它。这不是非常困难或任何事情，但我希望有一个解决方案，它会更……无缝/神奇(为什么？有趣，它会很整洁，只是因为……)。有什么想法吗？

Answer 1

我认为将脚本放到 .js 文件中并在您的页面上引用它是解决此问题的最有趣和简洁的方法。

如果您正在寻找一个不太简洁的解决方案，您可以添加几个 HtmlHelper 扩展以在模板引擎遇到它们时添加寄存器依赖项，然后在页面末尾打印出一堆脚本标记。

private const string requiredJavascriptIncludesContextItemsKey = "requiredJavascriptIncludesContextItemsKey";

public static void Require(this HtmlHelper html, string src)
{
    var collection = (HashSet<string>) html.ViewContext.HttpContext.Items[requiredJavascriptIncludesContextItemsKey] ?? new HashSet<string>();
    collection.Add(src);
    html.ViewContext.HttpContext.Items[requiredJavascriptIncludesContextItemsKey] = collection;
}

public static HtmlString RequiredJavascriptIncludes(this HtmlHelper html)
{
    var sb = new StringBuilder();
    foreach (var src in (HashSet<string>) html.ViewContext.HttpContext.Items[requiredJavascriptIncludesContextItemsKey] ?? new HashSet<string>())
    {
        sb.Append(string.Format("<script type='text/javascript' src='{0}></script>", src));
    }

    return new HtmlString(sb.ToString());
}

您可以在任何模板中调用 @Html.Require 方法。在你的情况下，它会是这样的:

@model Nullable<DateTime>
@{
    var metadata = ModelMetadata.FromStringExpression("", ViewData);
    string value;
    if(!String.IsNullOrEmpty(metadata.EditFormatString)) {
        if(Model.HasValue) {
            value = String.Format(metadata.EditFormatString, Model.Value);
        }
        else {
            value = metadata.NullDisplayText;
        }
    }
    else {
        value = Model.ToString();
    }
}
@Html.TextBox("", value, new { @class = "textBoxDate" })
@Html.Require(Html.Content("scripts/datepicker.js"))

然后，在基本模板页面的底部，您将调用 @Html.RequiredJavascriptIncludes() 并且您已注册的所有 js 依赖项将呈现为脚本标记html 文档的结尾。