如何从剃刀部分引用JavaScript变量？

Question

我正在尝试将CS​​S文件动态呈现到视图中，但是文件的部分位置在javascript变量中。

目前我有：

@section Styles {
    @{

        <link href="@Url.Content(Model.CssPath)" rel="stylesheet" type="text/css" />
     }
}

但是我需要在路径中包含变量，如下所示：

@section Styles {
    @{
       var pathPrefix = "somePath/";
        <link href="@Url.Content(pathPrefix + Model.CssPath)" rel="stylesheet" type="text/css" />
    }
}

我了解到服务器端代码是在javascript变量存在之前进行评估的，那么我该怎么做？

Answer 1

首先-为什么要混合客户端/服务器端代码？

您不能将JS变量与服务器端生成的内容一起使用，因为-如您所说-它是在客户端的浏览器点击JS代码之前在服务器上执行的。 这是预期的行为。

如果可以在服务器端确定此变量值，则应将其移到那里。

如果必须在客户端生成，则可以使用document.createElement('link');生成<link>标记document.createElement('link'); 但对我来说似乎很奇怪:)

Answer 2

与其尝试通过razor视图添加样式表，不如将csspath放入javascript变量中，然后使用jquery将其与pathPrefix组合在一起，并以这种方式附加样式表。

就像是....

<script>
    var cssPath = @Model.cssPath;
    var pathPrefix = "www.";
    $('head').append('<link rel="stylesheet" type="text/css" href="'+pathPrefix+cssPath+'">');
</script>