Angular JS with ASP.NET MVC – Part 3

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

1

Customer Maintain Page

2

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

["$http",
function ($http) {
var getCustomers = function () {
return $http.get("http://localhost/WebAPIService/api/Customer");
};

var getCustomer = function (enterpriseID, customerID) {
return $http.get("http://localhost/WebAPIService/api/Customer?customerId=" + customerID);
};

 
var saveCustomer = function (customer) {
return $http.post("http://localhost/WebAPIService/api/saveCustomer", customer);
}

 
var deleteCustomer = function (customerID) {
return $http.post("http://localhost/WebAPIService/api/deleteCustomer", customer);
}

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", "$window", "$routeParams", "$location", "CustomerDataFactory",
function CustomerController($scope, $window, $routeParams, $location, CustomerDataFactory) {
 

CustomerDataFactory.getCustomers()
.success(function (customers) {
$scope.customers = customers;
})
.error(function (error) {
$scope.status = 'Unable to load customers';
});
}

$scope.getCustomer = function (customer) {
$location.path("/customerMaintain/" + customer.CustomerID);
}

$scope.addCustomer = function () {
CustomerDataFactory.saveCustomer($scope.customer).success(
function (result) {
//on success
$scope.customer.CustomerID = result;
},
function (results) {
$scope.status = 'Unable to load customers';
});

}
$scope.addNewCustomer = function () {
$location.path("/customerMaintain/")
}

$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

3      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']);

MyApp.config(
 
["$routeProvider"
function ($routeProvider) {
 
$routeProvider
.when("/customer", {
templateUrl: "Customer/Index",
controller: "CustomerController"
})
.when("/customerMaintain/:CustomerID, {
templateUrl: "Customer/CustomerMaintain",
controller: "CustomerController"
})
.when("/customerMaintain/", {
templateUrl: "Customer/CustomerMaintain",
controller: "CustomerController"
})

 
}]);

That’s all, build and run the project. Hope this helps!

 

 

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s