在单独的文件中编码Javascript

Question

我的视图中有这个脚本：

@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 Helper"Encoder"显然无法工作，我该如何解决问题，以便我仍然有Encoder，但Js在单独的文件里？

Answer 1

任一：

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

Answer 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编码器问题，为什么不简单地在JS文件中放入一个javascript变量，然后在包含该文件之前在视图中声明并设置该变量呢。像这样：

@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');
})