Passing variables from C# MVC Controller to AngularJS using Razor

I wanted to pass some data from my MVC but didn’t want to go the hassle of creating a seperate WebAPI call and Angular service, so I used the Angular module’s value method. Then I could inject those variables individually into any controller or services that I wanted to.

HomeController.cs

1
2
3
4
5
6
7
8
public ActionResult Index()
{
  return View(new MyModel {
    Id = Guid.NewGuid(),
    Name = "My Name",
    Value = 42
  });
}

Index.cshtml

1
2
3
4
5
6
7
8
9
10
11
@section scripts {
 <script src="~/Scripts/angular.js"></script>
 <script src="~/App/app.js"></script>
 <script>
 angular.module('myApp').value({
 id: '@Model.Id',
 name: '@Model.Name',
 value: @Model.Value,
 });
 </script>
}

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function () {
    angular.module('myApp', []);
 
    angular.module('myApp').controller('myController', myController);
    myController.$inject = ['id', 'name', 'value'];
 
    function myController(id, name, value) {
 
        var vm = this;
 
        vm.id = id;
        vm.name = name;
        vm.value = value;;
    }
})();

It is also possible to inject the data as one object by doing the following:
Index.cshtml

1
2
3
4
5
6
7
8
9
10
11
@section scripts {
  <script src="~/Scripts/angular.js"></script>
  <script src="~/App/app.js"></script>
  <script>
  angular.module('myApp').value('mydata', {
    id: '@Model.Id',
    name: '@Model.Name',
    value: @Model.Value,
   });
 </script>
}

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function () {
    angular.module('myApp', []);
 
    angular.module('myApp').controller('myController', myController);
    myController.$inject = ['mydata'];
 
    function myController(mydata) {
 
        var vm = this;
 
        vm.id = mydata.id;
        vm.name = mydata.name;
        vm.value = mydata.value;;
    }
})();

Amoq – Liberating Funiture

The redesign of Amoq’s website is finally finished and live, check it out here: Amoq.co.za
The site is built using Drupal 6 and makes extensive use of JQuery and JavaScript to create a more interactive experience. In the next couple of weeks or so their online shop will be live, so you can get their cool products directly from them.

Olivia Morgado Photography

Although this is not a new website, I finally got around to adding this site to my portfolio, which I should have done a while ago. I did this website for a very talented photographer and cinematographer Oliva Morgado and you can check out her website here. We took the design provided by Makers of Stuff and created a Drupal template for Olivia, then built the website so that Olivia could maintain her own images and categories.

 

Welcome to our new site.

Hi,

Finally I got around to doing something more with my site, until now it has been very much the case of the cobbler’s children having no shoes! I am starting to rectify that and what you see here is the start of that process. Of course, as always, other things especially paying things will take priority but