CODEWITHSUNDEEP
javascriptasp.net-mvcangularjsasp.net-mvc-4
TheBoubou
TheBoubou

Reputation: 19903

Assign ASP.NET MVC model to AngularJS scope

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

Upvotes: 6

Views: 3606

Answers (4)

Ravi Anand
Ravi Anand

Reputation: 5524

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;

Upvotes: 0

suisgrand
suisgrand

Reputation: 114

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.

Upvotes: 0

Jason Li
Jason Li

Reputation: 1585

<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>

Upvotes: 3

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 3

Related Questions