In this post we will develop a simple page that displays the list of customers, by clicking on any record from the list, it opens up the customer page where a user can update its record. This post is a third part of Angular JS with ASP.NET application. In the last posts we developed and configured AngularJS in ASP.NET MVC app and saw different options like routing and opening views inside main application container.

Customers List Page

Customer Maintain Page

In your Angular JS – ASP.MVC project create a new folder named app and in side app create another folder customers. The reason of creating a separate app folder and then customers is to structure our solution and put all the customer related angular js controller and data adapter inside it. Controller will be used to contain the scope variables that stores the form data and Data adapter will be used to call Web API methods using angular $http object.

Step 1 – Creating Controller Data Adapter

1. Create a new CustomerDataFactory.js file inside app/Customer folder.
2. Add getCustomers, getCustomer, saveCustomer and deleteCustomer methods. In the code below I am using $http function of angular to call the Web API methods. I have not shown the WEB API methods in this post but you can get an idea about it calling it from Angular part.

MyApp.factory('CustomerDataFactory',

return {
getCustomers: getCustomers,
GetCustomer: getCustomer,
saveCustomer: saveCustomer,
deleteCustomer: deleteCustomer
};
}]);
Step 2 – Creating Customer Controller of Angular

1. Create a new CustomerController.js file inside app/Customer folder

    MyApp.controller('CustomerController',

$scope.cancelCustomer = function () {
$window.history.back();
}
}]);
In the above code, once the controller is loaded, it will call the getCustomers method that calls the Web API method which returns all customers. On Success, it will set the collections of customers in a list.

Next, there is another method getCustomer that takes customer as an object and change the location path to customerMain which will open another page to edit customer information.

addNewCustomer does same as getCustomer in fact the form will be empty so the user can add new customer.

Step 3 – Now add these js files CustomerController.js and CustomerDataFactory.js in BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/MyApp")

.Include("~/Scripts/bootstrap.min.js")
.Include("~/Scripts/jquery-1.10.2.js")
.Include("~/Scripts/angular.min.js")
.Include("~/Scripts/angular-route.min.js")
.Include("~/Scripts/angular-ui/ui-bootstrap-tpls.min.js")
.Include("~/app/MainApp.js")
.Include("~/app/Customer/CustomerDataFactory.js")
.Include("~/app/Customer/CustomerController.js")
);
Step 4 – Add Views

1. Create a new empty MVC Controller named as CustomerController.cs
2. There will be two methods, Index (default) to load the Customer list page and the CustomerMaintain to load the detailed page for editing/updating customer record.

   public class CustomerController : Controller

// GET: Customer
public ActionResult Index()
{
return View();
}
 
public ActionResult CustomerMaintain()
{
return View();
}
}
*  When adding view for each action make sure they are partial views otherwise it won’t be open inside the main landing page

      Complete markup for Index.cshtml that display the list of customers

         Index.cshtml
@{
Layout = null;
}

 
<div class="container-fluid">
<div class="nav">
Customers
</div>
<hr />
<p></p>
<div>
<button type="button" ng-click="addNewCustomer()" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>Customer ID</th>
<th>Title </th>
<th>First Name</th>
<th>Last Name</th>
<th>Tel Number</th>
<th>Mobile Number</th>
<th>Email</th>
<th>Address 1</th>
<th>Address 2</th>
<th>City</th>
<th>PO BOX</th>
</tr>
</thead>
<tbody ng-repeat="customer in customers">
<tr ng-click="getCustomer(customer)">
<td>{{customer.CustomerID}}</td>
<td>{{customer.Title}}</td>
<td> {{customer.FirstName}}</td>
<td> {{customer.LastName}}</td>
<td> {{customer.TelNumber}}</td>
<td> {{customer.MobileNumber}}</td>
<td> {{customer.Email}}</td>
<td> {{customer.Address1}}</td>
<td> {{customer.Address2}}</td>
<td> {{customer.City}}</td>
<td> {{customer.POBox}}</td>
</tr>
</tbody>
</table>
</div>

Complete markup for CustomerMaintain.cshtml to update specific customer record or create new customer

     CustomerMaintain.cshtml
@{
Layout = null;
}
<div class="container-fluid">
<div class="nav">
Manage Customer
</div>
<br />
<form role="form" class="form-horizontal">
<div class="col-sm-3">
<button type="button" ng-click="cancelCustomer()" class="btn btn-default" ng-disabled="disableSaving">
<i class="glyphicon glyphicon-arrow-left"></i>
</button>
<button type="button" ng-click="addCustomer()" class="btn btn-primary" ng-disabled="disableSaving">
<i class="glyphicon glyphicon-floppy-save"></i>
</button>
</div>
 
<fieldset>
<legend>Customer Information</legend>
</fieldset>
<div class="form-group">
<label class="col-sm-3 control-label" for="customerID">Customer Number</label>
<div class="col-sm-9">
<input ng-model="customer.CustomerID" readonly="readonly" type="text" id="customerID" name="customerID" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="title">Title</label>
<div class="col-sm-9">
<select class="form-control" ng-model="customer.Title" name="title" id="title" required>
<option value="Company">Company</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="firstName">First Name</label>
<div class="col-sm-9">
<input ng-model="customer.FirstName" type="text" id="firstName" name="firstName" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="lastName">Last Name</label>
<div class="col-sm-9">
<input ng-model="customer.LastName" type="text" id="lastName" name="lastName" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="telNumber">Telephone Number</label>
<div class="col-sm-9">
<input ng-model="customer.TelNumber" type="text" id="telNumber" name="telNumber" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="mobileNumber">Mobile Number</label>
<div class="col-sm-9">
<input ng-model="customer.MobileNumber" type="text" id="mobileNumber" name="mobileNumber" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="email">Email</label>
<div class="col-sm-9">
<input ng-model="customer.Email" type="text" id="email" name="email" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="address1">Address 1</label>
<div class="col-sm-9">
<input ng-model="customer.Address1" type="text" id="address1" name="address1" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="address2">Address 2</label>
<div class="col-sm-9">
<input ng-model="customer.Address2" type="text" id="address2" name="address2" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="city">City</label>
<div class="col-sm-9">
<input ng-model="customer.City" type="text" id="city" name="city" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="pobox">PO Box</label>
<div class="col-sm-9">
<input ng-model="customer.POBox" type="text" id="pobox" name="pobox" class="form-control" />
</div>
</div>
</form>
</div>
Step 5 – Add routing for Customer Maintain and Customer in MyApp.js. Following is the complete markup for MyApp.js
var MyApp = angular.module('MyApp', ['ngRoute']);

 
}]);
That’s all, build and run the project. Hope this helps!