在单独的文件中编码 Javascript答案

【问题标题】：Encoding Javascript in separate file在单独的文件中编码 Javascript
【发布时间】：2017-12-11 17:05:38
【问题描述】：

我认为有这个脚本：

@if(ViewBag.UserName != null)
{
    <script type="text/javascript">
        $(function(){
            var msg = 'Welcome, @Encoder.JavaScriptEncode(ViewBag.UserName, false)!';
            $("#welcome-message").html(msg).hide().show('slow');
        })
    </script>
}

但是，我想将 Javascript 放在一个单独的文件中，但是当我这样做时，Html 助手“编码器”显然无法工作，我该如何解决，以便我仍然拥有编码器，但使用Js在单独的文件中？

【问题讨论】：

标签： javascript encoding asp.net-mvc-5

【解决方案1】：

要么：

从 ASP.NET 生成 JavaScript（确保输出正确的 Content-Type 响应标头！）或
将数据输出到 DOM 的某处（例如 <meta> 元素或 data-* 属性），然后使用 JS 读取它

【讨论】：

【解决方案2】：

捆绑你的javascript文件，无论如何你都应该养成这样做的习惯。捆绑可以帮助您管理文件的版本（以便在您更新它们时刷新缓存的文件），还可以为您缩小文件，使您的数据更快地提供给客户端。

在您的 App_Start 文件夹中，有一个名为 BundleConfig.cs 的文件，它看起来像这样：

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        /* =====================================  Scripts  ===================================== */

        bundles.Add(
            new ScriptBundle("~/Script/JQuery/JQuery")
                .Include("~/Scripts/JQuery/jquery-{version}.js")
            );
        bundles.Add(
            new StyleBundle("~/bundles/styles/highslide")
                .Include("~/Highslide/Highslide-ie6.css")
                .Include("~/Highslide/Highslide.css")
            );
    }
}

在上面的示例中，我们包含一个 javascript 文件（此处的版本由框架自动填充）和一个名为 Highslide 的 css 库。你可以看到在这个库中我们可以包含多个文件。另外，请注意这些文件都在不同的目录中。这使您可以按照自己认为合适的方式构建项目。

现在，为了在您的视图中使用它，您所要做的就是：

@Scripts.Render("~/Script/JQuery/JQuery")
@Styles.Render("~/bundles/styles/highslide")

话虽如此，您现在可以在您的视图中执行此操作：

@if(ViewBag.UserName != null)
{
    @Scripts.Render("~/Script/JQuery/JQuery")
}

至于 Html 编码器问题，为什么不简单地将 javascript 变量放入 JS 文件中，然后在包含文件之前在视图中声明和设置变量。像这样：

@if(ViewBag.UserName != null)
{
    <script type="text/javascript">
        var msg = 'Weclome, ' + @Encoder.JavaScriptEncode(ViewBag.UserName, false)!;
    </script>
    @Scripts.Render("~/Script/MyScript")
}

您的脚本文件可能如下所示：

$(function(){
    $("#welcome-message").html(msg).hide().show('slow');
})

【讨论】：