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

Joh*_*ell 8 asp.net-mvc razor

所以我正在尝试创建一个自定义编辑器,以便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>
Run Code Online (Sandbox Code Playgroud)

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

有没有我可以在这里使用的剃须刀,以便我可以在页面加载中只包含一次maskedInput.js文件.我意识到我可以将它添加到编辑器将在的父页面上(但这需要知道使用此编辑器的每个页面).我可以将它添加到主布局视图,但这将意味着不使用此编辑器的页面的开销.

所以我总结一下,我要问的是: - "有没有办法在EditorTemplate中包含一次javascript文件,只有一次".

Rus*_*Cam 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>
Run Code Online (Sandbox Code Playgroud)

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

@Html.RenderScripts(Scripts.Render)
Run Code Online (Sandbox Code Playgroud)

完成后,现在您需要在编辑器模板中执行的操作是使用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>);
}
Run Code Online (Sandbox Code Playgroud)

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

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


Ser*_*gio 0

好吧,你可以执行以下操作:

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

@section MaskedInput{}
Run Code Online (Sandbox Code Playgroud)

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

在页面上,您需要添加您放置的 maskedInput.js:

@section MaskedInput
{
    @*Include scripts, styles or whatever you need here*@
}
Run Code Online (Sandbox Code Playgroud)

  • 是的,但这意味着我需要知道它所使用的所有页面;)这就是我试图避免的。我试图使其仅被称为使用此编辑器的表单页面,而无需手动编辑所有父页面。 (3认同)