在 AngularJS Html 中渲染 Razor 变量答案

【问题标题】：Render Razor variable inside AngularJS Html在 AngularJS Html 中渲染 Razor 变量
【发布时间】：2015-12-21 23:47:22
【问题描述】：

我在一些 Html 中嵌入了一个 Html 变量，我从数据库中检索到 AngularJS $scope 对象。然后我使用 ng-bind-html 指令在 MVC/razor 视图中呈现它。一个简单的例子如下：

myView.cshtml

<html>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <p ng-bind-html="pageSizeHtml"></p>
    </div>
  </body>
</html>

myCtrl.js

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {
    $scope.pageSizeHtml = '<div>Your page size is: @OurSystem.Configuration.PageSize</div>'
});

当我运行它时，呈现的页面如下所示：

    Your page size is: @OurSystem.Configuration.PageSize

但我希望它解释 Razor 变量的值，看起来像这样：

    Your default page size is: A4

真的坚持这一点，所以任何帮助将不胜感激！

【问题讨论】：

您能否展示一个简短但完整的页面来演示该问题？如果角度应用程序包含在剃刀视图中，这应该没问题，但如果它是模板或其他一些外部源，则不是。
@BrendanGreen 我添加了更明确的代码示例。希望这会让事情变得更清楚。如果不只是问。
那行不通。 JS 文件不会通过“剃须刀引擎”运行，因此它被视为字符串文字。最好使用 ng-init 并从视图中传递它。我有一个可行的例子，我会坚持回答。
@BrendanGreen：啊。这是有道理的。 razor 变量在服务器上解释，angularJS 之后在客户端解释。我希望使用 Web API 返回此数据，但我将等待您的答复。感谢您的及时回复。这些事情可能需要几个小时！

标签： html angularjs asp.net-mvc razor

【解决方案1】：

您当前的代码将不起作用，因为您尝试在 .js 文件中使用 razor 语法，该文件不会被 razor 引擎转换。因此，您将获得文字字符串。

一种选择是在实际剃刀视图中使用ng-init 将值传递给角度控制器。

在你看来：

<html>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl" ng-init="myInit(@OurSystem.Configuration.PageSize)">
      <p ng-bind-html="pageSizeHtml"></p>
    </div>
  </body>
</html>

在 JS 控制器中：

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {
    $scope.myInit = function(val) {
        $scope.pageSizeHtml = '<div>Your page size is: ' + val + '</div>';
    }
});

注意：测试上述代码时遇到本地问题，但它应该与您想要的非常接近。

【讨论】：

【解决方案2】：

Razor 没有在 *.js 文件中执行它自己的魔法。

你可以做几件事。制作剃须刀将生成的“可共享服务”。然后从您的角度控制器中引用它。基本上把你的角度服务放在 cshtml 文件中。

或使用 init 函数将变量传递给您的控制器。在你的cshtml中

<div data-ng-init="init({pageSize: @OurSystem.Configuration.PageSize})>
</div>

在你的控件中添加函数：

init(parameters){
// parameters will be json object with pageSize property
}

【讨论】：

【解决方案3】：

为了在 Javascript 中使用 Razor，我有 Html.Json 扩展：

public static class HtmlExtensions
{

  public static IHtmlString Json(this HtmlHelper html, object serializableValue)
  {
      return MvcHtmlString.Create(Newtonsoft.Json.JsonConvert.SerializeObject(serializableValue));
  }
}

如果 javascript 在 Razor 中存在引用问题，那么您可以这样使用它：

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {
    $scope.pageSizeHtml = '<div>Your page size is: '+@Html.Json(OurSystem.Configuration.PageSize)+'</div>';
});

更新： 只需更仔细地阅读您的代码示例，我同意 Green 先生的观点，它不会开箱即用，因为 Razor 旨在仅转换您的 cshtml 视图，而不是 Javascript/CSS 文件。所以你应该将你的 js 代码作为你的 cshtml 的内联 js 移动，或者使用下面文章中描述的魔术技巧，让你做动态的、剃刀生成的 javascript/css 文件

http://blog.pmunin.com/2013/04/dynamic-javascript-css-in-aspnet-mvc.html

【讨论】：

感谢@Phillipp Munin。我查看了您的链接，老实说那里有很多代码，我并没有真正理解。我现在可以看到 Razor 无法以我想要的方式工作。但是，我确实需要它是动态的，因此返回的 HTML 可以在其中嵌入任何剃须刀配置变量，而不仅仅是我给出的简单示例。深思熟虑。感谢您的宝贵时间。
@ 符号对我造成了错误。你还需要做些什么吗？

【解决方案4】：

您可以使用@Html.Raw

@Html.Raw(OurSystem.Configuration.PageSize)

【讨论】：

您不能在 .js 文件中使用 Razor 语法。