Creating CURD Model in Asp.Net MVC Application Using Angular JS

This post is about the use of AngularJS for CURD operation in asp.net app development. There are developers working with an asp.net development company and they will explain the way to create CURD model in MVC app with the help of AngularJS. Read this post and discover how they do it.

In this article we are going to see how we can use the AngularJS for CURD operation in Asp.Net MVC application.

In Asp.Net MVC application CURD operation will be done through MVC Controllers, but we can achieve this operation through AngularJS $http service. This is the core angular service that will use to communicate http servers through JSONP.

In this Post I am going explain the vendor data manipulation by add, update, display and delete vendor records through Angular $http controller.

The following steps need to be done.

• Create SQL Table for do the CURD operation
• Create EF data model
• Create  JSON Result methods  for CURD operations
• Create angular module script
• Create  angular Service script
• Create angular Controller script

Create SQL Table for Vendor details

Copy the below code and paste in SQL server query window and execute in your local db.

CREATE TABLE [dbo].[Vendor] (
    [Vendor ID]   INT            IDENTITY (1, 1) NOT NULL,
    [Vendor Name] NCHAR (50)     NULL,
    [Address]     NVARCHAR (MAX) NULL,
    [City]        NVARCHAR (50)  NULL,
    [State]       NVARCHAR (50)  NULL,
    [Mobile]      NCHAR (10)     NULL,
    [Class]       NCHAR (10)     NULL
);

Create Entity framework data model for Vendor table.

Create the MVC Json Result controller for Show , Insert , update and delete Vendor details

Copy the below methods and paste it in your home controller.

Show All Vendors details

public JsonResult ShowAllSupplier()
        {
            using (TestDbEntities Entity = new TestDbEntities())
            {
                var VendList = Entity.Vendors.ToList();
                return Json(VendList, JsonRequestBehavior.AllowGet);
            }
      }

Insert Vendor details.

public void InsertVendor(Vendor _vendor)
        {
            if (_vendor != null)
            {
                using (TestDbEntities Entity = new TestDbEntities())
                {
                    Entity.Vendors.Add(_vendor);
                    Entity.SaveChanges();
                  
                }
            }
         
        }

Update Vendor Details

public void UpdateVendor(Vendor _vendor)
        {
            if (_vendor != null)
            {
                using (TestDbEntities Entity = new TestDbEntities())
                {
                    int VendId = Convert.ToInt16(_vendor.Vendor_ID);
                    Vendor _vendlist = Entity.Vendors.Where(x => x.Vendor_ID == VendId).FirstOrDefault();
                    _vendlist.Vendor_Name = _vendor.Vendor_Name;
                    _vendlist.Address = _vendor.Address;
                    _vendlist.City = _vendor.City;
                    _vendlist.State = _vendor.State;
                    _vendlist.Mobile = _vendor.Mobile;
                    _vendlist.Class = _vendor.Class;
                    Entity.SaveChanges();
                 
                }
            }
         
     }

Delete Vendor Details

public void DeleteVendor(int VendId)
        {
            using (TestDbEntities Entity = new TestDbEntities())
                {
                    var _vend = Entity.Vendors.Find(VendId);
                    Entity.Vendors.Remove(_vend);
                    Entity.SaveChanges();
                      
                }
          
         
        }

Get vendor information by vendor ID

public JsonResult GetVendorById(int _vendId)
        {
            using (TestDbEntities Entity = new TestDbEntities())
            {
                var VendorId = Convert.ToInt16(_vendId);
                var getVendById = Entity.Vendors.Find(VendorId);
                return Json(getVendById, JsonRequestBehavior.AllowGet);
            }

Create the Java script files for Angular Service and Angular Controller.

Create the below Java script files under Script/Curd folder

• VendorModule.js
• VendorService.js
• VendorController.js

Copy and paste the below code in VendoeModule.js

var app = angular.module("VendApp", []);

Copy and Paste the below code in VendorService.js

app.service("Vendsvc", function ($http) {
    this.getvendbyid = function (vendid) {
        var response = $http({
            method: "post",
            url: "Home/GetVendorById",
            params: {
                _vendid: JSON.stringify(vendid)
            }
        });
        return response;
    }
  
    this.getallvend = function () {
        return $http.get("Home/showallsupplier");
    }
  
    this.vendupdate = function (_vend) {
        var response = $http({
            method: "post",
            url: "Home/UpdateVendor",
            data: JSON.stringify(_vend),
            dataType: "json"
        });
        return response;
    }
     this.vendinsert = function (_vend) {
        var response = $http({
            method: "post",
            url: "Home/InsertVendor",
            data: JSON.stringify(_vend),
            dataType: "json"
        });
        return response;
    }
  
    this.venddelete = function (vendid) {
        var response = $http({
            method: "post",
            url: "Home/DeleteVendor",
            params: {
                Vendid: JSON.stringify(vendid)
            }
        });
        return response;
    }
});

Copy and Paste the below code in VendorController.js

app.controller("VendControl", function ($scope, Vendsvc) {
   $scope.dvVendor = false;
       ShowAllVendors();
  
    function ShowAllVendors() {
      
       var getvendlist = Vendsvc.getallvend();
        getvendlist.then(function (vend) {
            $scope.vendall = vend.data;
         
        }, function () {
            alert('error');
        });
    }
    $scope.editvendor = function (vend) {
        var vendid = vend.Vendor_ID;
        var getvenddetail = Vendsvc.getvendbyid(vendid);
        getvenddetail.then(function (_vend) {
            $scope.vend = _vend.data;
            $scope.VendId = vend.Vendor_ID;
            $scope.VendName = vend.Vendor_Name;
            $scope.Address = vend.Address;
            $scope.City = vend.City;
            $scope.State = vend.State;
            $scope.Mobile = vend.Mobile;
            $scope.Class = vend.Class;
            $scope.Action = "Update";
            $scope.dvVendor = true;
          
        }, function () {
            alert('error');
        });
    }
    $scope.updatevendor = function () {
        var vend = {
        Vendor_Name: $scope.VendName,
        Address: $scope.Address,
        City: $scope.City,
        State: $scope.State,
       Mobile: $scope.Mobile,
        Class:$scope.Class
        };
      
        var vendAction = $scope.Action;
        if (vendAction == "Update") {
            vend.Vendor_ID = $scope.VendId;
            var getvenddetail = Vendsvc.vendupdate(vend);
            getvenddetail.then(function (msg) {
                ShowAllVendors();
                alert(msg.data);
                $scope.dvVendor = false;
            }, function () {
                alert('Error');
            });
        } else {
            var getvenddetail = Vendsvc.vendinsert(vend);
            getvenddetail.then(function (msg) {
                ShowAllVendors();
                alert(msg.data);
                $scope.dvVendor = false;
            }, function () {
                alert('Error');
            });
        }
    }
    $scope.AdddvVendor = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.dvVendor = true;
    }
    $scope.deleteVendor = function (vend) {
        var getvenddetail = Vendsvc.venddelete(vend.Vendor_ID);
        getvenddetail.then(function (msg) {
            alert(msg.data);
            ShowAllVendors();
        }, function () {
            alert('Error');
        });
    }
    function ClearFields() {
        $scope.vend = "";
        $scope.VendId = "";
        $scope.VendName = "";
        $scope.Address ="";
        $scope.State = "";
        $scope.Mobile = "";
        $scope.Class = "";
    }
    $scope.Cancel = function () {
        $scope.dvVendor = false;
    };
});

Next step is to create the UI view for consuming the above angular scripts and html layout for display and update, insert and delete operation.

Copy the below code and paste it in your home view.

@{
    ViewBag.Title = "Home Page";
}
<div ng-controller="VendControl">
    <div class="divList">
        <p><b><i>Book List</i></b></p>
        <table class="table table-hover">
            <tr>
                <td><b>VendorID</b></td>
                <td><b>Name</b></td>
                <td><b>Address</b></td>
                <td><b>City</b></td>
                <td><b>State</b></td>
                <td><b>Mobile</b></td>
                <td><b>Class</b></td>
                <td><b>Action</b></td>
               </tr>
            <tr ng-repeat="vend in vendall">
                <td>
                    {{vend.Vendor_ID}}
                </td>
                <td>
                    {{vend.Vendor_Name}}
                </td>
                <td>
                    {{vend.Address}}
                </td>
                <td>
                    {{vend.City}}
                </td>
                <td>
                    {{vend.State}}
                </td>
                <td>
                    {{vend.Mobile}}
                </td>
                <td>
                    {{vend.Class}}
                </td>
                <td>
                    <span ng-click="editvendor(vend)" class="btn btn-primary">Edit        </span>
                    <span ng-click="deleteVendor(vend)" class="btn btn-danger">Delete</span>
                </td>
            </tr>
        </table>
    </div>
    <span ng-click="AdddvVendor()" class="btn btn-default" >
        Add Book
    </span>
    <div ng-show="dvVendor">
        <p class="divHead"></p>
        <table class="table">
            <tr>
                <td><b><i>{{Action}} Book</i></b></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td><b>Id</b></td>
                <td>
                    <input type="text" disabled="disabled" ng-model="VendId" />
                </td>
                <td><b>Name</b></td>
                <td>
                    <input type="text" ng-model="VendName" />
                </td>
            </tr>         
            <tr>
                <td><b>Address</b></td>
                <td>
                    <input type="text" ng-model="Address" />
                </td>
                <td><b>City</b></td>
              
                <td>
                    <input type="text" ng-model="City" />
                </td>
                </tr>
            <tr>
                <td><b>State</b></td>
                <td>
                    <input type="text" ng-model="State" />
                </td>
                <td><b>Mobile</b></td>
                <td>
                    <input type="text" ng-model="Mobile" />
                </td>
                </tr>
            <tr>
                <td><b>Class</b></td>
                <td>
                    <input type="text" ng-model="Class" />
                </td>
            </tr>
            <tr>
              
                <td></td>
                <td >
                    <input type="button" class="btn btn-default" value="Save" ng-click="updatevendor()" />
                    <input type="button" class="btn btn-danger" value="Cancel" ng-click="Cancel()" />
                </td>
            </tr>
        </table>      
    </div>
</div>

Vendor data will be displayed in table format with Edit and Delete buttons. Add vendors button is available at the bottom of the grid.

When you click on the Add vendor button one more section will displayed at the bottom of the grid and display the textbox controller for the respective columns.

When you click on Delete button, particular row will be deleted.

When you click on Edit button, Edit section will be displayed and respective data will be fetched. You can modify the data and click on save , cancel button for cancel the transaction.

Asp.net development company experts have shared their experience about creating CURD model in asp.net MVC application using angular JS. For doubts and queries, you can connect with them by simply making comments below.

Conclusion:

In this post I have explained how we can achieve the MVC CURD operation through angular scripting. AngularJS provider gives the $http controllers as a service, which consume the Json data from server.

So that I have crated the MVC controllers for Json result services and Angular controllers for consume those services.

I hope this article will be useful and easy understandable.