Sunday, August 14, 2016

How to insert, update, delete and show the data using AngularJs in asp.net MVC

In this article I am going to explain how to insert, update, delete and show the data using AngularJs in asp.net MVC.

How to insert, update, delete and show the data using AngularJs in asp.net MVC



Description:
In this angularjs tutorial I am going to perform create, read, update and delete (CRUD) operations.

Implementation:

I have created a table Employee. I want to insert, edit and delete employee information like name, phone number, email id etc. and also going to display all employees in grid.

Model (Employee.cs):
  public partial class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Nullable<int> Phone { get; set; }
        public Nullable<int> Salary { get; set; }
        public string Department { get; set; }
        public string EmailId { get; set; }
    }


Add Controller
I have added empty controller to project. Now create a Json action for CRUD opration.

Compete code of Controller (Democontroller.cs):-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
    public class DemoController : Controller
    {
        //
        // GET: /Demo/
        DemoEntities1 db = new DemoEntities1();

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetEmployee()
        {
            var emp = db.Employees.ToList();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult InsertEmployee(Employee emp)
        {
            db.Employees.Add(emp);
            db.SaveChanges();
            string message = "Success";
            return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

        [HttpPost]
        public JsonResult UpdateEmployee(int id, string name, string department, int phone, int salary, string emailId)
        {
            var emp = db.Employees.Where(x => x.Id == id).FirstOrDefault();
            emp.Name = name;
            emp.Phone = phone;
            emp.Department = department;
            emp.Salary = salary;
            emp.EmailId = emailId;          
            db.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        [HttpDelete]
        public JsonResult DeleteEmployee(int id)
        {
            Employee emp = db.Employees.Find(id);
            db.Employees.Remove(emp);
            db.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        [HttpGet]
        public JsonResult getByid(int id)
        {
            Employee emp = db.Employees.Find(id);
            return Json(emp, JsonRequestBehavior.AllowGet);
        }    

    }
}



Add View
Add view for Index action.

Complete code of view (index.cshtml):
@{
    ViewBag.Title = "AngularJs Tutorial";
}
<style>

</style>
<h2>AngularJs Tutorial : CRUD operation</h2>
<div ng-app="mvcapp" ng-controller="DemoController">
    <form name="myform">
        <table class="table">
            <tr>
                <td>Name :</td>
                <td>
                    <input type="text" ng-model="empModel.Name" placeholder="Name" class='form-control' required />   
</td>
            </tr>
            <tr>
                <td>Phone :</td>
                <td>
                    <input type="text" ng-model="empModel.Phone" placeholder="Phone" class='form-control' required />
                </td>
            </tr>
            <tr>
                <td>Salary :</td>
                <td>
                    <input type="text" ng-model="empModel.Salary" placeholder="Salary" class='form-control' required />
                </td>
            </tr>
            <tr>
                <td>Department :</td>
                <td>
                    <input type="text" ng-model="empModel.Department" placeholder="Department" class='form-control' required />
                </td>
            </tr>
            <tr>
                <td>Email :</td>
                <td>
                    <input type="email" ng-model="empModel.EmailId" class='form-control' placeholder="Email" required />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="Save" id="btnsave" ng-disabled="isDisabledsave" ng-click="myform.$valid && saveCustomer()" />
                    <input type="button" value="Update" id="btnupdate" ng-disabled="isDisabledupdate" ng-click="myform.$valid && updateCustomer()" />
                </td>
            </tr>
        </table>
        </form>
        <table>
            <tr>
                <th>S.No</th>

                <th>
                    Name
                </th>
                <th>
                    Phone
                </th>
                <th>
                    Department
                </th>
                <th>
                    Salary
                </th>
                <th>
                    Email
                </th>
            </tr>
            <tr ng-repeat="empModel in employees">
                <td>{{empModel.Id}}</td>
                <td>{{empModel.Name }}</td>
                <td>{{empModel.Phone }}</td>
                <td>{{empModel.Department}}</td>
                <td>{{empModel.Salary }}</td>
                <td>{{empModel.EmailId ||'Email not available'}}</td>
                <td>
                    <a href="" ng-click="getCustomer(empModel)" title="Delete Record">Edit</a>  |
                    <a href="" ng-click="deleteemp(empModel)" title="Delete Record">
                        Delete
                    </a>
                </td>
            </tr>
        </table>

</div>

<style>
    input[type=button][disabled=disabled] {
        opacity: 0.65;
        cursor: not-allowed;
    }
    table tr th {
        padding: 10px 30px;
    }
    table tr td {
        padding: 10px 30px;
    }
</style>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
    var angular = angular.module('mvcapp', []);

    angular.controller('DemoController', function ($scope, $http) {
      
        GetAllData();
        $scope.isDisabledupdate = true;
        //Get All Employee
        function GetAllData() {
            $http.get('/Demo/GetEmployee').success(function (data) {
                $scope.employees = data;
            });
        };

        //Insert Employee
        $scope.saveCustomer = function () {
            debugger
            $http({
                method: 'POST',
                url: '/Demo/InsertEmployee',
                data: $scope.empModel
            }).success(function () {                              
                    GetAllData();                   
                    $scope.empModel =null;                  
                    alert("Employee Added Successfully!!!");
            }).error(function () {
                alert(data.errors);
            });
            GetAllData();
        };

        //Delete Employee
        $scope.deleteemp = function (empModel) {
            debugger
            varIsConf = confirm('Want to delete ' + empModel.Name + '. Are you sure?');
            if (varIsConf) {
                $http.delete('/Demo/DeleteEmployee/' + empModel.Id).success(function () {
                    $scope.errors = [];                  
                    GetAllData();
                    alert(empModel.Name + " Deleted Successfully!!!");
                }).error(function () {
                    alert(data.errors);
                });
            }
        };

        //Get Employee by id to edit
        $scope.getCustomer = function (empModel) {
            $http.get('/Demo/getByid/' + empModel.Id)
            .success(function (data, status, headers, config) {
                //debugger;
                $scope.empModel = data;
                GetAllData();
                $scope.isDisabledsave = true;
                $scope.isDisabledupdate = false;
            })
            .error(function () {
                alert(data.errors);
            });
        };

        //Update Employee
        $scope.updateCustomer = function () {
            debugger
            $http({
                method: 'POST',
                url: '/Demo/UpdateEmployee',
                data: $scope.empModel
            }).success(function () {
                GetAllData();
                $scope.isDisabledsave = false;
                $scope.isDisabledupdate = true;
                $scope.empModel = null;
                alert("Employee Updated Successfully!!!");
            }).error(function () {
                alert(data.errors);
            });
        };
      
    });
</script>


You have done it successfully. Now build and run the project. To test it makes some entries. Cheers!!!





10 comments:

  1. Hi, I am new to angularjs, I would like to know how do I create a DemoEntites1 as shown on the above? Thank you.

    ReplyDelete
    Replies
    1. i, I am new to angularjs, I would like to know how do I create a DemoEntites1 as shown on the above? Thank you.

      Delete
    2. i, I am new to angularjs, I would like to know how do I create a DemoEntites1 as shown on the above? Thank you. can u help me?

      Delete
  2. :52146/Country/DeleteCountry/2 Failed to load resource: the server responded with a status of 404 (Not Found)

    ReplyDelete
  3. Can you upload the demo programm anywhere? Would be nice because my application always says 404 and that .cshtml is forbidden

    ReplyDelete
  4. no success alert is working...,

    ReplyDelete
  5. i, I am new to angularjs, I would like to know how do I create a DemoEntites1 as shown on the above? Thank you. can you help me

    ReplyDelete