Assign ASP.NET MVC model to AngularJS scope

Question

Below the code of my view (the javascript code is in the view, just temp just for testing).

I'd like assign the ASP.NET MVC model (@Model) to the AngularJS scope ($scope.person)

How can I do this ?

Thanks,

The view

@model MyApp.Person

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

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = ?????
}]);
</script>

Update 1 : I tried this code, in the JS file :

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

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = @Html.Raw(window.person);
}]);

In the view file :

<script>
    @{
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    }
    window.person = serializer.Serialize(Model);
</script>

I get 2 errors :

ReferenceError: serializer is not defined (on windows)
window.person = serializer.Serialize(Model);

SyntaxError: illegal character (it's the @)
$scope.person = @Html.Raw(window.person);

The 'illegal character' is just an 'false' IntelliSense assumption. When surrounded with '' the error will go away. — devqon
– devqon, Commented Sep 25, 2014 at 7:59

Jason Li · Accepted Answer · 2014-09-25 06:53:59Z

3

<script>
    @{
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        var json = serializer.Serialize(Model);
    }
    var myApp = angular.module('myApp', []);

    myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
        $scope.person = @Html.Raw(json);
    }]);
</script>

answered Sep 25, 2014 at 6:53

Jason Li

1,5851 gold badge12 silver badges20 bronze badges

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

5 Comments

TheBoubou Over a year ago

Work but only when the code is in the view and not in a separated JS file.

Jason Li Over a year ago

@Kris-I like Satpal said, //Store data in global variable.

Jason Li Over a year ago

in the js file, $scope.person = window.person; in the view file, window.person = @serializer.Serialize(Model); or put this line in the brackets.

TheBoubou Over a year ago

Reference error on "ReferenceError: serializer is not defined", in the bracket it's worst.

Jason Li Over a year ago

Satpal · Accepted Answer · 2014-09-25 06:50:18Z

3

I am not sure if this will work with Angular.

You can use Json.Encode Method converts a data object to a string that is in the JavaScript Object Notation (JSON) format.

window.person = @Html.Raw(Json.Encode(Model)); //Store data in global variable.

In Your angular code use,

$scope.person = window.person

However, Best solution will be to create a service and fetch the person data using the service.

Complete Code

@model MyApp.Person

<script>
window.person = @Html.Raw(Json.Encode(Model)); //Store data in global variable.
var myApp = angular.module('myApp', []);

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = window.person
}]);
</script>

edited Sep 25, 2014 at 6:50

answered Sep 25, 2014 at 6:43

Satpal

134k13 gold badges168 silver badges171 bronze badges

3 Comments

TheBoubou Over a year ago

The question is with angularJS. When I add this line, all the AngularJS code not work anymore.

TheBoubou Over a year ago

Same, AngularJS code not work anymore. The best solution is not use AngularJS I think.

TheBoubou Over a year ago

In the view, it's temp will be move to separated JS file

suisgrand · Accepted Answer · 2017-01-18 17:09:41Z

0

i had the same problem. this will work. in your view:

<script>
    myApp.value('person', @Html.Raw(Model));
</script>

and in your (angular) controller:

myApp.controller('personController', ['$scope', '$http', 'person' function ($scope, $http, person) {
    console.log(person);
}]);

If you "inject" your json value on your controller, you are sorted.

answered Jan 18, 2017 at 17:09

suisgrand

1141 silver badge6 bronze badges

Comments

Ravi Anand · Accepted Answer · 2017-03-08 17:51:17Z

0

At first assign value in global java script variable then use it in your separate angular file

 <script>
   var obj =  '@Html.Raw(Model)';
</script>

now in your angular page

$scope.person = obj;

answered Mar 8, 2017 at 17:51

Ravi Anand

5,54211 gold badges54 silver badges81 bronze badges

Collectives™ on Stack Overflow

Assign ASP.NET MVC model to AngularJS scope

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related