Question

所以我正在尝试创建一个自定义编辑器，以便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文件，只有一次”。

Answer 1

我为此目的写了一篇 nuget package ，并写了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 Optimization框架，则可以使用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()调用结束时写出。

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

Answer 2

嗯，你可以这样做：

将@RenderSection("MaskedInput", false)添加到主布局。那就是渲染

@section MaskedInput{}

在每个包含该部分的页面上;

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

@section MaskedInput
{
    @*Include scripts, styles or whatever you need here*@
}

Answer 3

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

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

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

Managing Scripts for Razor Partial Views and Templates in ASP.NET MVC

在自定义编辑器中包含一次和仅一次脚本

3 个答案: