In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the Modal Popup, which works in totally different way so I thought to give more detail about it. First of all we will write a function to open the modal popup which we will call from two different methods, new customer and edit customer. Enough talk, let's write the open method in our customer controller
$scope.open = function (size) {
var modalInstance = $modal.open({
size: size,
animation: false,
backdrop: 'static',
templateUrl: 'app/customer/AddEditCustomer.html',
controller: 'customerModalCtrl',
resolve: {
customer: function () {
return $scope.customer;
}
}
});
modalInstance.result.then(function (response) {
debugger;
$scope.currentCustomer = response;
$state.go('customer.detail', { 'customerId': response.CustomerId });
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
Let's first try to edit the existing customer, since we are showing the detail of a customer means we already have the customer detail on scope so we will use the same data, for that see the edit button html
<button ng-click="editCustomer()"
ng-hide="currentCustomer == null"
class="btn btn-primary">
Edit
</button>
We are showing this button only when there is any data in current customer, so let's use this data to pen the modal popup, so our edit customer method will be very easy:
$scope.editCustomer = function () {
$scope.customer = $scope.currentCustomer;
$scope.open('lg');
}
Just pass the current customer data into customer on the scope which we used in our open method earlier. I am passing size 'lg' to show the large modal popup. In add new customer we will use the small one, still we have not created our customerModalCtrl to handle the modal popup data, so create it in the same file, most of the people like to create the modal popup controller in the same file so we are :)
app.controller('customerModalCtrl',
['$scope', '$modalInstance', 'Customer', 'customer',
function ($scope, $modalInstance, Customer, customer) {
$scope.customer = customer;
if (customer.CustomerId > 0)
$scope.headerTitle = 'Edit Customer';
else
$scope.headerTitle = 'Add Customer';
$scope.save = function () {
Customer.Save($scope.customer).then(function (response) {
$modalInstance.close(response.data);
})
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
Main problem new users mostly face to pass the data to modal controller, have a look how we are facing different parameters, better to explain it
$modalInstance.close(response.data) is used inside the then function so it can return the save data with customer id, if you will move it out of the save.then then is will return current scope data without customer Id.
We already completed every thing, let's see the service method to save and Web API action for it.
// Save Customer
customerService.Save = function (customer, files) {
var deferred = $q.defer();
return $http.post(baseUrl + "Save", customer)
.success(function (data) {
deferred.resolve(customerService.customer = data);
}).error(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
Web API to save record into database, simply check if id is greater than 0 then update otherwise add new record and return saved record with created Id
[Route("api/Customer/Save")]
[HttpPost]
public Customer SaveCustomer(Customer customer)
{
if (customer.CustomerId > 0)
{
var dbCustomer = db.Customers.FirstOrDefault(x => x.CustomerId == customer.CustomerId);
dbCustomer.FullName = customer.FullName;
dbCustomer.Address = customer.Address;
dbCustomer.City = customer.City;
dbCustomer.Country = customer.Country;
dbCustomer.ZipCode = customer.ZipCode;
db.SaveChanges();
return dbCustomer;
}
else
{
db.Customers.Add(customer);
db.SaveChanges();
return customer;
}
}
How to create a new customer, We will create a new customer object in Web API and show put on $scope, so here is controller, service and Web API functions
// Controllerr: Add Customer
$scope.addCustomer = function () {
Customer.newCustomer()
.then(function (data) {
$scope.customer = Customer.customer;
$scope.open('sm');
});
}
// Service: New Customers
customerService.newCustomer = function () {
var deferred = $q.defer();
return $http.get(baseUrl + "new")
.success(function (data) {
deferred.resolve(customerService.customer = data);
})
.error(function (error) {
deferred.reject(error);
})
return deferred.promise;
}
// Web API Method
[Route("api/Customer/new")]
[HttpGet]
public Customer NewCustomer()
{
return new Customer();
}
We already saw the HTML part to add the new customer, let's see one more time:
<button ng-click="addCustomer()"
class="btn btn-success btn-lg">
<i class="glyphicon glyphicon-plus"></i> Add Customer
</button>
Here is the complete Add/Edit modal dialog HTML:
<div class="modal-content">
<form name="form" >
<div class="modal-header">
<button type="button"
class="close"
ng-click="cancel()"
data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{headerTitle}}</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Full Name</label>
<div class="col-lg-8">
<input type="text"
class="form-control"
ng-model="customer.FullName"
ng-required="true">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Address</label>
<div class="col-lg-8">
<input type="text"
class="form-control"
ng-model="customer.Address"
ng-required="true">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">City</label>
<div class="col-lg-8">
<input type="text"
class="form-control"
ng-model="customer.City"
ng-required="true">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Country</label>
<div class="col-lg-8">
<input type="text"
class="form-control"
ng-model="customer.Country"
ng-required="true">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Zip Code</label>
<div class="col-lg-8">
<input type="text"
class="form-control"
ng-model="customer.ZipCode"
ng-required="true">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button"
ng-click="save()"
ng-disabled="form.$invalid"
class="btn btn-success">
Save
</button>
<button type="button"
ng-click="cancel()"
class="btn btn-danger"
data-dismiss="modal">
Cancel
</button>
<div class="alert-danger" ng-if="error.length > 0 " ng-bind="error"></div>
</div>
</form>
</div>
Everything is done, I will be happy to answer if you have any question regarding this article or you want me to write something which can help you. I know, you are going to ask how to upload the image :) I try to do so but could not found any easy way till now and I don't want to copy the same thing from some other site, soon I will write something about it.
See the previous article Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1
|
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
| By Ali Adravi On 29 Jul, 15 Viewed: 19,575 |
Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi On 14 Aug 2015 Viewed: 20,895
Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi On 06 Aug 2015 Viewed: 57,700
Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi On 29 Jul 2015 Viewed: 4,488
Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi On 28 Jul 2015 Viewed: 31,336
Progress bar for Angularjs application by using directives is simple and real easy. I was googling and could not found any directive way, if you will check most of the people says before call the http method open the progress bas and close once you get the result or get any error. Do you think it... By Ali Adravi On 24 Jul 2015 Viewed: 14,197