在單獨的文件中編碼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“編碼器”顯然不起作用，我將如何解決這個問題，以便我仍然有編碼器但是在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');
})