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

“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">
        @Html.Partial("UserControl/Person")
    </div>
    <div ng-controller="Person2Cntrl" class="person-widget">
        @Html.Partial("UserControl/Person")
    </div>
    <br />    
    <div>
        <input type="button" ng-click="clicked()" value="Click" style="width:200px; height:40px; margin-left:20px;" />
    </div>
</div>

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:

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

Controllers:

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 () {
        alert($scope.person1.name);
        alert($scope.person2.name);
    };
}

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 may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.