CODEWITHSUNDEEP
htmlangularjsasp.net-mvcrazor
Jeff Yates
Jeff Yates

Reputation: 1093

Render Razor variable inside AngularJS Html

I have an Html variable embedded within some Html that I retrieve from the database into an AngularJS $scope object. I then render this in a MVC/razor view using the ng-bind-html directive. A simple example follows:

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

When I run this the rendered page looks like this:

    Your page size is: @OurSystem.Configuration.PageSize

But I want it to interpret the value of the Razor variable and look like this:

    Your default page size is: A4

Really stuck on this so any help would be appreciated!

Upvotes: 3

Views: 7818

Answers (4)

Philipp Munin
Philipp Munin

Reputation: 5903

For using Razor in Javascript I have Html.Json extension:

public static class HtmlExtensions
{

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

If javascript has quoting issues with Razor, then you can just use it like that:

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

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

UPDATE: Just read your code example more carefully, and I agree with Mr. Green, it won't work Out-of-box because Razor designed to transform just you cshtml views, not Javascript/CSS files. So you should move your js code as inline js of your cshtml, or use the magic trick described in the article below that allow you to do dynamic, razor-generated javascript/css files

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

Upvotes: 1

Brendan Green
Brendan Green

Reputation: 11914

Your current code won't work, because you are trying to use the razor syntax in a .js file, which won't be transformed by the razor engine. Thus, you get the literal string instead.

An option is to use ng-init in the actual razor view to pass the value into the angular controller.

In your view:

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

And in the JS controller:

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

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

Note: having local issues testing the above code, but it should be pretty close to what you want.

Upvotes: 5

Remigijus
Remigijus

Reputation: 96

Razor is not executing it's own magic in *.js files.

Couple things you can do. Make a 'sharable servise' that razor will generate. Then reference it from you angular controller. Basically put your angular service in cshtml file.

Or use init function to pass variable to your controller. In your cshtml

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

In your controlle add function:

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

Upvotes: 1

Dandy
Dandy

Reputation: 2177

You can use @Html.Raw

@Html.Raw(OurSystem.Configuration.PageSize)

Upvotes: 0

Related Questions