Question

我在一些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

真的坚持这个，所以任何帮助都会受到赞赏！

Answer 1

您当前的代码无效，因为您尝试在.js文件中使用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>';
    }
});

注意：测试上面的代码有本地问题，但它应该非常接近你想要的。

Answer 2

在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>';
});

<强>更新只需仔细阅读您的代码示例，我同意格林先生的说法，它不会开箱即用，因为Razor只是为了改变你的cshtml视图，而不是Javascript / CSS文件。所以你应该将你的js代码移动为你的cshtml的内联js，或者使用下面文章中描述的魔术技巧，它允许你做动态的，剃刀生成的javascript / css文件

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

Answer 3

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

你可以做的事情。建立一个可共享的服务＆＃39;剃刀会产生的。然后从角度控制器中引用它。基本上将你的角度服务放在cshtml文件中。

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

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

在你的控制中添加功能：

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

Answer 4

您可以使用@Html.Raw

@Html.Raw(OurSystem.Configuration.PageSize)

在AngularJS Html中渲染Razor变量

4 个答案: