8

所以我正在尝试创建一个自定义编辑器，以便DataType在“持续时间”中出现一个带有 HH:MM:SS 掩码格式的文本框。

到目前为止，我已经创建了一段非常简单的代码

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", type = "duration" })

<script>
    $(document).ready(function () {
        $("#@Html.NameFor(c => c)").mask("00:00:00");
    });
</script>

这是我的~/Views/Shared/EditorTemplates/Duration.cshtml档案。但是，它需要加载额外的 javascript ( maskedInput.js)。

是否有任何剃须刀包含我可以在这里使用，以便我可以在页面加载中包含一次且仅一次的 maskedInput.js 文件。我意识到我可以将它添加到编辑器所在的父页面（但这需要知道使用该编辑器的每个页面）。我可以将它添加到主布局视图中，但这意味着不使用此编辑器的页面的开销。

所以我想总而言之，我要问的是：-“有没有办法从 EditorTemplate 中包含一次且仅一次的 javascript 文件”。

4

3 回答 3

7

我正是为此目的编写了一个nuget 包，并写了YD1m提到的博客文章。

要使用该包，您需要做的第一件事是Html.RenderScripts()在布局中的某个位置添加一个调用，以便在渲染 Razor 视图期间使用帮助程序添加的所有脚本文件引用和块都输出到响应中。进行此调用的典型位置是在顶层布局中的核心脚本之后。这是一个示例布局：

<!DOCTYPE html>
<html lang="en"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>       
        @RenderBody()           
        <script src="~/Scripts/jquery-2.0.2.js"></script>
        @* Call just after the core scripts in the top level layout *@
        @Html.RenderScripts()    
    </body>
</html>

如果您使用的是 Microsoft ASP.NET Web 优化框架，则可以使用 的重载方法Html.RenderScripts()将该Scripts.Render()方法用作生成脚本的函数：

@Html.RenderScripts(Scripts.Render)

完成后，现在您需要在编辑器模板中做的就是使用 nuget 包中的帮助程序来添加对脚本的引用并添加代码块

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", type = "duration" })

@using (Html.BeginScriptContext())
{
    Html.AddScriptFile("~/Scripts/maskedInput.js");
    Html.AddScriptBlock(
        @<script>
            $(document).ready(function () {
                $("#@Html.NameFor(c => c)").mask("00:00:00");
            });
        </script>);
}

引用的脚本文件只会在页面中添加一次，所有脚本块将在Html.RenderScripts()调用结束时写出。

使用帮助程序，您可以在视图、部分视图和编辑器/显示模板中添加脚本文件和脚本块。请注意，当前版本（1.1.0.0）在通过 AJAX 调用时不会使用帮助程序渲染脚本，但这是我希望在下一个版本中添加的内容。

于 2013-08-07T17:12:18.303 回答
0

好吧，您可以执行以下操作：

添加@RenderSection("MaskedInput", false)到您的主布局。那会渲染

@section MaskedInput{}

在具有该部分的每个页面上；

在您需要添加 maskedInput.js 的页面上：

@section MaskedInput
{
    @*Include scripts, styles or whatever you need here*@
}
于 2013-06-28T13:17:42.243 回答
0

您可以使用 Dictionary 属性创建单例类，该类将存储您的自定义助手/模板中的脚本。在您的模板中，您可以调用方法，该方法将脚本放入带有一些字符串键的单例字典属性中。在该方法中，您可以防止添加具有相同键的脚本。

最后，您应该编写一个渲染操作以从字典中渲染脚本，并从您的主布局中调用此操作。

在这里您可以找到类似于我的解决方案：

在 ASP.NET MVC 中管理 Razor 局部视图和模板的脚本

于 2013-06-28T13:27:01.513 回答