Render Razor variable inside AngularJS Html

Question

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!

Can you show a short, but complete page that demonstrates the issue? This should be fine if the angular app is contaied within a razor view, but not if it's a template or some other external source. — Brendan Green
– Brendan Green, Commented Sep 24, 2015 at 11:59
@BrendanGreen I added more explicit code example. Hopefully that will make things clearer. If not just ask. — Jeff Yates
– Jeff Yates, Commented Sep 24, 2015 at 13:01
That won't work. The JS file won't run through the "razor engine" so it's treated as a string literal. Best to use ng-init and pass it in from the view instead. I have a working example I'll stick into an answer. — Brendan Green
– Brendan Green, Commented Sep 24, 2015 at 13:05
@BrendanGreen : Ah. That would make sense. The razor variable is interpreted on the server and the angularJS is interpreted afterwards on the client. I was hoping to use the Web API to return this data but I shall await your answer. Thanks for the prompt response. These things can take hours and hours! — Jeff Yates
– Jeff Yates, Commented Sep 24, 2015 at 13:15

Brendan Green · Accepted Answer · 2015-09-24 13:20:07Z

5

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.

answered Sep 24, 2015 at 13:20

Brendan Green

11.9k5 gold badges47 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Remigijus · Accepted Answer · 2015-09-24 13:19:06Z

1

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
}

edited Sep 24, 2015 at 13:19

answered Sep 24, 2015 at 13:13

Remigijus

964 bronze badges

Comments

Philipp Munin · Accepted Answer · 2015-09-24 13:21:50Z

1

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

edited Sep 24, 2015 at 13:21

answered Sep 24, 2015 at 13:08

Philipp Munin

5,9337 gold badges43 silver badges64 bronze badges

2 Comments

Jeff Yates Over a year ago

Thanks @Phillipp Munin. I looked at your link and to be honest there's a lot of code there and I didn't really understand it. I now can see how Razor won't work in the way I'd like. However, I do need it to be dynamic though, so the returned HTML can have ANY razor configuration variable embedded within it not just the simple example I gave to illustrate. Food for thought. Thanks for your time.

Winnemucca Over a year ago

THe @ symbol is causing errors for me. Did you have to do anything additional?

Dandy · Accepted Answer · 2015-09-24 11:51:56Z

0

You can use @Html.Raw

@Html.Raw(OurSystem.Configuration.PageSize)

answered Sep 24, 2015 at 11:51

Dandy

2,20716 silver badges16 bronze badges

1 Comment

SimonGates Over a year ago

You can't use Razor syntax in a .js file.

Collectives™ on Stack Overflow

Render Razor variable inside AngularJS Html

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related