我可以在ScriptBundle中包含的Javascript中使用Razor語法嗎？

Question

我有一個控件，其功能類似於以下代碼：

Java腳本

$("#Postcode").autocomplete({
    source: '@(Url.Action("AutocompleteHelper"))'
});

的HTML

@Html.EditorFor(model => model.Postcode)

它曾經都直接位於.cshtml文件中，而Url.Action按預期生成工作URL。

最近，我需要在多個視圖中使用它，因此我將JS移到了一個單獨的.js文件（包裝到ScriptBundle並通過@Scripts.Render包含在父視圖中），並且現在將相應的HTML呈現為部分視圖。

這樣做的副作用是不再發生Razor轉換。 我不想用硬編碼的/ <Controller> / AutocompleteHelper字符串替換Url.Action ，所以還有其他方法可以動態生成和設置此值嗎？ 我可以將Javascript從捆綁軟件中移到部分視圖中，但是共識似乎是您不應該在部分視圖中使用JS。

Answer 1

這是我將mvc路徑放入我的javascript文件的方法...

在.js文件中，有一個Initialize函數（您可以根據需要命名）。 將路由傳遞給Initialize函數，然后讓Initialize函數將其分配給js文件中其他javascript可訪問的變量。

在您看來...

<script>
    Initialise(@(Url.Action("AutocompleteHelper")))
</script>
@Scripts.Render("~/bundles/yourscriptbundle")

在您的.js中...

var autoCompleteRoute;
function Initialise(route) {
  autoCompleteRoute = route;
}

然后可以在.js文件中使用該路由。 我更喜歡這種方法，因為在使用它的.js文件中聲明了變量並將其賦值。 使用設置/初始化功能還可以使您清楚地了解，在成功運行javascript之前，需要做一些事情。

Answer 2

不，Razor不會對捆綁的JS文件進行替換。 自修改代碼通常是一件壞事，因此， 如果可以幫助 ，我建議不要在頁面中注入Javascript。

只需將值注入到所需元素的data- attribute中，然后將其提取：

例如

@Html.EditorFor(model => model.Postcode, new {htmlAttributes = new {@class="postcode", data_source = Url.Action("AutocompleteHelper")}})

並僅與此類一起使用：

$(".postcode").each(function(){
    $(this).autocomplete({
         source: $(this).data('source')
    });
});

這樣一來，一段代碼即可處理多個郵政編碼控件。

Answer 3

不，你不能。 Razor引擎不處理Javascript文件。

您可以創建一個cshtml “視圖”並將代碼放在其中，並使用此代碼在頁面中包含它，就像我想的那樣（您無需為此做任何動作）：

@Html.RenderPartial("_JsFileName");

這樣，它將通過Razor引擎，並且您已設置好。 不幸的是，您當時不能將其包含在捆綁包中。

另一個選擇是僅在頁面中聲明該變量，然后在仍按“原樣”的javascript中使用該變量。

Answer 4

@PatrickHofman是正確的。 我實際上會遵循他的第二條建議：

另一個選擇是僅在頁面中聲明該變量，然后在仍按“原樣”的javascript中使用該變量。

但是，他沒有對此進行詳細介紹，因此我想補充一些建議。 您實際上要做的是在全局范圍內添加變量，以便任何外部JavaScript都可以訪問它。 但是，將事物添加到全局范圍很危險，因此您應該為應用程序實現唯一的名稱空間，並將所需的任何變量添加到該名稱空間，而不是直接在全局范圍中。 這樣可以減少名稱空間沖突的可能性。 因此，在您看來，您將添加如下內容：

<script>
    var MyAwesomeApp = MyAwesomeApp || {};
    MyAwesomeApp.SomeVariable = '@Model.SomeVariable';
</script>
@Scripts.Render("~/bundles/yourscriptbundle")

然后，您可以通過MyAwesomeApp.SomeVariable包中包含的外部JS中所需的變量。

Answer 5

我通常會執行@SimonRyan的建議，除了我使用options對象而不是僅傳遞一個字符串。 如果您需要一個，您很快就會需要另一個。 因此，使用options對象時，您需要修改的內容要少於添加更多參數時的修改量。

因此， Initalise調用將如下所示：

Initialise({
    autoCompleteHelperUrl: '@(Url.Action("AutocompleteHelper"))',
    anAdditionalUrl: '@(Url.Action("AdditonalUrl"))'
})

我在這里寫了一篇更詳細的博客文章： http : //blog.blanklabs.com/2015/02/aspnet-mvc-refactoring-friendly.html