Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Angularjs modal popup Open bootstrap modal popup in angularjs how to re-size the modal popup Add Edit record in modal popup in angularjs angularjs bootstrap modal example angularjs bootstrap modal size angularjs bootstrap modal directive angularjs bootstrap modal scope angularjs bootstrap modal close event angularjs bootstrap modal confirm angularjs bootstrap modal form angularjs bootstrap modal resolve angularjs bootstrap modal not working

Add/Edid Customer in Modal Popup

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());
    });
};
  • Size: optional, it takes two values
  • 'sm': small which apply the model-sm class, width: 300px
  • 'lg': large which apply the model-sm class, with: 900px
  • $modal.open: for it we need to inject $model in our controller and 'ui.bootstrap' in our application
  • animation: false, just disabled because AngularUI doesn't support Angular 1.4 yet
  • backdrop: it takes 3 values
  • true: back ground will be grayed out, closed when click out side of dialog
  • false: no back ground, closed when click out side of dialog
  • 'static': grayed out background and will not close when click out side of dialog
  • templateUrl: html page URL, be careful it is case sensitive
  • controller: controller name on which the model will play, just we will create after it.
  • resolve: whatever the data we want to pass will need to go inside it, see the pattern how it is used
  • I am passing customer on scope, we will see it soon
  • modalInstance.result.then: it will return the saved record and we are making it current customer and changing the state to show it on the detail section
  • function: this function will be called when model dismissed, just loging the time to console

alt text

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

  • $scope: nothing new
  • $modalInstance: to close, dismiss the modal latter on
  • Customer: Service to save the data into database
  • customer: this is the variable in which we are passing value to the controller, scroll up and see what we used in resolve in open method of the modal, assign it to scope so it can be bind in view
  • headerTitle: to show on the model conditionally
  • To methods:
    • save: simple method to call the service method and get the save data
    • cancel: just to dismiss the modal popup

$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">&times;</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

Ali Adravi 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.
  • angularjs
  • modal-popup
  • bootstrap
By Ali Adravi On 29 Jul, 15  Viewed: 19,499

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

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

Angularjs Cascading Dropdown/Select with demo

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

Custom Directives in AngularJS with example and demo

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

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

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

Angularjs Progress bar directive for entire application

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