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图像URL呈现错误：

图像的网址必须是相对的（因此是剃刀）......

我知道可以直接在JS中嵌入Razor，但是它是否有一种方法可以在嵌入式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标记：

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

然后随意在data.settingsImageUrl中使用your-script.js：

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" />');
   });
}());

好处是：

如果代码库增长，则没有会导致令人头疼的全局变量。
使用数据属性知道容器的有效负载。这适用于有限数量的数据。如果你需要更多来自razor的数据/复杂对象，那么你可以将模型渲染到json字符串对象。然后使用jquery.parseJSON

在JS中将Razor嵌入HTML中

4 个答案:

替代解决方案