Home > AngularJS, ASP.NET MVC > Reusable ASP.NET MVC user control in AngularJS (Same page)

Reusable ASP.NET MVC user control in AngularJS (Same page)

November 13, 2012 Leave a comment Go to comments

“AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Out of the box, it eliminates much of the code you currently write through data binding and dependency injection. And it all happens in JavaScript within the browser making it an ideal partner with any server technology.” – According to AngularJS documentation

Here I am going to show how we can use same asp.net mvc user controls multiple times in a single page with different sets of data.
As I am using asp.net mvc as server side technology, asp.net mvc razor views are used to produce the templates for AngularJS. For AngularJS it’s not a matter which server side technology you are going to use. It will work based on the syntax it needs to make it an AngularJS application.

In this example the index.cshtml is using “Person” user control multiple times.

    ViewBag.Title = "Dashboard";
    Layout = "~/Views/Shared/_Layout.cshtml";
<div ng-controller="PersonCntrl">
    <div ng-controller="Person1Cntrl" class="person-widget">
    <div ng-controller="Person2Cntrl" class="person-widget">
    <br />    
        <input type="button" ng-click="clicked()" value="Click" style="width:200px; height:40px; margin-left:20px;" />

Here in Index.cshtml we have three controllers. The personCntrl is the base controller and Person1Cntrl and Person2Cntrl are two child controllers. So here we are using two separate controllers to use the same user control multiple times. This is because we want to use separate scope for each user control instance.

The “person” user control:

    <input type="text" ng-model="person.name" />
    <textarea ng-model="person.address"></textarea>
    <input type="text" ng-model="person.email" />
        Phone Number</label>
    <input type="text" ng-model="person.phone" />
<label>TIN No</label>
<input type="text" ng-model="person.tinNo"/>


function PersonCntrl($scope) {
    $scope.person1 = { name: "Mizan", address: "Bagmara, Rajshahi", email: "mizanur.rahman@selise.ch", phone: "01718786498", tinNo: "TIN-000000" };
    $scope.person2 = { name: "Tasnim", address: "Puthia, Rajshahi", email: "reza@selise.ch", phone: "00000000000", tinNo: "TIN-11111" };

    $scope.clicked = function () {

function Person1Cntrl($scope) {
    $scope.person = $scope.person1;

function Person2Cntrl($scope) {
    $scope.person = $scope.person2;

The main trick is that we are setting the person1 to person in Person1Cntrl and person2 to person in Person2Cntrl. So, in first user control it will bind person1 object and in second user control it will bind person2 object in the view.

Now if we change in the view we will get the changes in the person1 and person2 object accordingly.

The output page will look like:

Image 1

Now if we change the value in the name field to “Mizan123” it will show “Mizan123” for alert($scope.person1.name);

Image 2

Thanks for reading this article. Any suggestion will be appreciated.

Categories: AngularJS, ASP.NET MVC
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: