在JS內的HTML中嵌入Razor

Question

我有一個用JS生成的動態表，該表在表的其中一列中添加了一個按鈕（和圖像）：

var btn = $("<button/>", { class: "btn btn-default dropdown-toggle options_btn_custom", }).prepend('<img src="@Url.Content("~/Content/img/Settings.png")" />');

問題是HTML中的Razor圖片網址顯示不正確：

圖片的網址必須是相對的（因此，Razor）...

我知道可以將Razor直接嵌入JS中，但是有沒有辦法讓它也可以在嵌入式HTML中工作，還是太遠了？

Answer 1

快速修復，不知道我必須將Razor保留在視圖中...所以在我的視圖中，我有：

    <script>
    var baseurl = "@Url.Content("~/")";
    </script>

然后是外部文件中的JS：

 var btn = $("<button/>", { class: "btn btn-default dropdown-toggle options_btn_custom" }).prepend('<img src="' + baseurl + '/Content/img/Settings.png"/>');

Answer 2

您可以將值設置為全局js var，然后可以在外部js文件中使用它

即

> var clientVar = null;
> 
> clientVar = '@Url.Content("~/Content/img/Settings.png")';

在外部js文件中，只需使用clienVar。 它應該工作

Answer 3

事實是，默認情況下，Razor未配置為處理JS文件。 最簡單的解決方案是在您的JS文件引用之前將值cshtml到script標簽中的cshtml文件中：

<script>
    window.data = {
        settingsImageUrl: '@Url.Content("~/Content/img/Settings.png")';
    };
<script>
<script src="your-script.js" />

然后隨時在your-script.js使用data.settingsImageUrl ：

var btn = $("<button/>", {
    class: "btn btn-default dropdown-toggle options_btn_custom", 
}).prepend('<img src=" + data.settingsImageUrl + " />');

替代解決方案

另一種可能的解決方案是使用運行中腳本所需的所有值來構建腳本文件。 為此，您可以設置指向動作的特殊路線。 在此操作中，您將使用JS對象定義將值構建為字符串，並將其作為text/javascript內容返回。 使用緩存動作過濾器可以很好地工作。 然后，您只需在目標腳本之前插入的script標記中指向此路由即可。

Answer 4

您可以將數據屬性呈現給包含將動態生成的對象的容器。 這樣做會阻止使用全局javascript變量。

<div id="myAwesomeFunctionalityContainer" data-image-url="@Url.Content("~/Content/img/")"></div>

然后從您的javascript文件中，讀取數據屬性“ image-url”

(function () {
   "use strict";

   $(window).load(function () {
      var $container = $("#myAwesomeFunctionalityContainer");
      var imgPath = $container.data("image-url");
      var classDef = "btn btn-default dropdown-toggle options_btn_custom";
      var btn = $("<button/>", {class: classDef}).prepend('<img src="' + imgPath + '/Setting.png" />');
   });
}());

好處是：

• 沒有全局變量，如果您編寫libray會導致頭痛。
• 容器使用數據屬性知道有效負載。 這對於有限數量的數據非常有效。 如果您需要剃刀提供更多數據/復雜對象，則可以將模型渲染為json字符串對象。 然后使用jquery.parseJSON將字符串對象轉換回json對象