forum

home / developersection / forums / angular js with mvc insert,update, delete

Ask Question

Angular js with MVC Insert,Update, Delete

Anonymous User 3931 19-Feb-2016
I want to use Angularjs  in  MVC for Insert,Update, Delete .How to use Angularjs  with database please help me. 
angular js jquery  bootstrap  angular js 
Updated on 19-Feb-2016
Anonymous User

Other

I am a content writter !

Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

19-Feb-2016
Hi Ankit,
Here , we are  choosing  Database Model shown is below:

CREATE TABLE Employee
(
Id int Not Null primary key,
name nvarchar(50),
email nvarchar(50),
mobile_no nvarchar(50)
)
Home Controller:

using System;
using System.Linq;
using System.Web.Mvc;
namespace ForumMVC.Controllers
{
    public class HomeController : Controller
    {     
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult getAll()
        {
            using (Entities dataContext = new Entities())
            {
                var employeeList = dataContext.Employee.ToList();
                return Json(employeeList, JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult getEmployeeByNo(string EmpNo)
        {
            using (Entities dataContext = new Entities())
            {
                int no = Convert.ToInt32(EmpNo);
                var employeeList = dataContext.Employee.Find(no);
                return Json(employeeList, JsonRequestBehavior.AllowGet);
            }
        }
        public string UpdateEmployee(Employee Emp)
        {
            if (Emp != null)
            {
                using (Entities dataContext = new Entities())
                {
                    int no = Convert.ToInt32(Emp.Id);
                    var employeeList = dataContext.Employee.Where
                    (x => x.Id ==
no).FirstOrDefault();
                    employeeList.name =
Emp.name;
                    employeeList.mobile_no =
Emp.mobile_no;
                    employeeList.email =
Emp.email;
                    dataContext.SaveChanges();
                    return "Employee Updated";
                }
            }
            else
            {
                return "Invalid
Employee";
            }
        }
        public string AddEmployee(Employee Emp)
        {
            if (Emp != null)
            {
                using (Entities dataContext = new Entities())
                {
                   
dataContext.Employee.Add(Emp);
                    dataContext.SaveChanges();
                    return "Employee
Updated";
                }
            }
            else
            {
                return "Invalid
Employee";
            }
        }
        public string DeleteEmployee(Employee Emp)
        {
            if (Emp != null)
            {
                using (Entities dataContext = new Entities())
                {
                    int no = Convert.ToInt32(Emp.Id);
                    var employeeList =
dataContext.Employee.Where
                    (x => x.Id == no).FirstOrDefault();
                    dataContext.Employee.Remove(employeeList);
                    dataContext.SaveChanges();
                    return "Employee Deleted";
                }
            }
            else
            {
                return "Invalid
Employee";
            }
        }
    }
}

 

View: Index.cshtml
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/Model.js"></script>
    <script src="~/Scripts/service.js"></script>
    <script src="~/Scripts/controller.js"></script>
    <style>
        .modal-dialog {
    width: 600px;
    margin: 15% auto !important;
}
    </style>
</head>
<body>
    <div class="container">
        <div ng-controller="myCntrl">
            <div class="panel
panel-default">
                <div class="panel-heading">
                    <div class="panel-title"><h3> Employee Details Page</h3></div>
                    <div style="float: right; font-size: 80%; position:inherit; top: auto">
                       <input type="button" class="btnAdd btn
btn-success" 
                       value=" New One" id="NewDiv"/></div>
                    <div style="float: right; font-size: 80%; position: relative; top: -29px">
                         <input type="button" class="btnAdd btn
btn-success" 
                     value=" Add Employee" ng-click="AddEmployeeDiv()" /></div>
                      
                </div>
                <div style="padding-top: 30px" class="panel-body">
 
                    <div class="divList">
                        <p class="divHead">Employee
List</p>
                        <table cellpadding="12" class="table table-bordered
table-hover">
                            <tr>
                                <td><b>ID</b></td>
                                <td><b>Name</b></td>
                                <td><b>Email</b></td>
                                <td><b>Age</b></td>
                                <td><b>Actions</b></td>
                            </tr>
                            <tr ng-repeat="employee in employees">
                                <td>{{employee.Id}}
                                </td>
                                <td>{{employee.name}}
                                </td>
                                <td>{{employee.email}}
                                </td>
                                <td>{{employee.mobile_no}}
                                </td>
                                <td>   
                  <span ng-click="editEmployee(employee)" style="cursor: pointer;color:#0746D4;" 
                    class="btnAdd btn btn-default btn-xs">Edit</span>
               <span ng-click="deleteEmployee(employee)" style="cursor: pointer;color:#0746D4;"   class="btnRed btn btn-default btn-xs">Delete</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                        <div class="container">
                        <div class="col-md-12">
                            <div ng-show="divEmployee">
                                <p class="divHead">{{Action}} Employee</p>
                                <table >
                                    <tr>
                                        <td style=" padding-right:5px;"><b>Id</b></td>
                                        <td style=" padding-right:5px;">
                                        <input type="text" class="form-control"             ng-model="employeeId" />
                                        </td>
                                         <td style=" padding-right:5px;"><b>Name</b></td>
                                        <td style=" padding-right:5px;">
                                            <input type="text" class="form-control" ng-model="employeeName" />
                                        </td>
                                         <td style=" padding-right:5px;"><b>Email</b></td>
                                        <td style=" padding-right:5px;">
                                            <input type="text" class="form-control" ng-model="employeeEmail" />
                                        </td>
                                         <td style=" padding-right:5px;"><b>Mobile No</b></td>
                                        <td style=" padding-right:5px;">
                                            <input type="text" class="form-control" ng-model="employeemobile_no" />
                                        </td>
                                    </tr>    
                                  
                                    <tr>
                                        <td colspan="8" style="padding-top: 20px; text-align:right;">
                                             <input type="button" class="btnAdd btn
btn-default" value="Cancel" ng-click="Close()" />
                                            <input type="button" class="btnAdd btn
btn-primary" value="Save" ng-click="AddUpdateEmployee()" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>               
                </div>
            </div>
        </div>
    </div> 
    <div class="modal fade" id="alertmodal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
       <div class="modal-content">
              <div class="modal-header" style="background-color: #ccc;">
                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                     <h3 class="modal-title" id="lineModalLabel">Alert</h3>
              </div>
              <div class="modal-body" id="alertcontent">
              </div>
              <div class="modal-footer" style="padding:0px;">
                     <div class="btn-group btn-group-justified" role="group" aria-label="group
button">
                           <div class="btn-group" role="group">
                                  <button type="button" id="OK" class="btn btn-default " ng-click="OK()" style="border-radius: 0px 0px 0px 0px;border: 0px;" data-dismiss="modal"  role="button">OK</button>
                           </div>                     
                     </div>
              </div>
       </div>
  </div>
</div>  
</body> 
</html>

 
Model.js
var app = angular.module("myApp", []);

Service.js:

app.service("myService", function ($http) {
    //get
All Eployee
    this.getEmployees = function () {
        debugger;
        return $http.get("Home/GetAll");
    };
    // get
Employee By Id
    this.getEmployee = function (employeeID) {
        var response = $http({
            method: "post",
            url: "Home/getEmployeeByNo",
            params: {
                id: JSON.stringify(employeeID)
            }
        });
        return response;
    }
    //
Update Employee
    this.updateEmp = function (employee) {
        var response = $http({
            method: "post",
            url: "Home/UpdateEmployee",
            data: JSON.stringify(employee),
            dataType: "json"
        });
        return response;
    }
    // Add
Employee
    this.AddEmp = function (employee) {
        var response = $http({
            method: "post",
            url: "Home/AddEmployee",
            data: JSON.stringify(employee),
            dataType: "json"
        });
        return response;
    } 
    //Delete
Employee
    this.DeleteEmp = function (employee) {
        var response = $http({
            method: "post",
            url: "Home/DeleteEmployee",
            dataType: "json",
            data: JSON.stringify(employee),
        });
        return response;
    }
});

Controller.js:

app.controller("myCntrl", function ($scope, myService)
{
    $scope.divEmployee = false;
    GetAllEmployee();
    //To Get
All Records 
    function GetAllEmployee() {
        debugger;
        var getData = myService.getEmployees();
        debugger;
        getData.then(function (emp) {
            $scope.employees = emp.data;
        }, function () {
            $('#alertcontent').html('Error in getting
record');
            $('#alertmodal').modal("show");         
        });
    } 
    $scope.editEmployee = function (employee) {
        debugger;
        var getData =
myService.getEmployee(employee.Id);
        getData.then(function (emp) {
            $scope.employee = emp.data;
            $scope.employeeId = employee.Id;
            $scope.employeeName =
employee.name;
            $scope.employeeEmail =
employee.email;
            $scope.employeemobile_no =
employee.mobile_no;
            $scope.Action = "Update";
            $scope.divEmployee = true;
        },
        function () {
            $('#alertcontent').html('Error in getting
record');
            $('#alertmodal').modal("show");          
        });
    }
    $scope.AddUpdateEmployee = function () {
        debugger;
        var Employee = {
            Name: $scope.employeeName,
            Email: $scope.employeeEmail,
            mobile_no: $scope.employeemobile_no,
            Id: $scope.employeeId
        };
        var getAction = $scope.Action;
 
        if (getAction == "Update") {
            Employee.Id = $scope.employeeId;
            var getData = myService.updateEmp(Employee);
            getData.then(function (msg) {
                GetAllEmployee();
                $('#alertcontent').html(msg.data);
                $('#alertmodal').modal("show");
                
                $scope.divEmployee = false;
            }, function () {
                $('#alertcontent').html('Error in updating record');
                $('#alertmodal').modal("show");
               
            });
        } else {
            var getData = myService.AddEmp(Employee);
            getData.then(function (msg) {
                GetAllEmployee();
                $('#alertcontent').html(msg.data);
                $('#alertmodal').modal("show");              
                $scope.divEmployee = false;
            }, function () {
                $('#alertcontent').html('Error in adding
record');
                $('#alertmodal').modal("show");           
            });
        }
    }
    $scope.AddEmployeeDiv = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.divEmployee = true;
    } 
    $scope.deleteEmployee = function (employee) {
        debugger;
        var getData = myService.DeleteEmp(employee);
        getData.then(function (msg) {
            GetAllEmployee();
            $('#alertcontent').html('Employee Deleted');
            $('#alertmodal').modal("show");
           
        }, function () {          
            $('#alertcontent').html('Error in Deleting
Record');
            $('#alertmodal').modal("show");
        });
    } 
    $scope.Close = function () {
        ClearFields();
        $scope.divEmployee = false;
    }
    function ClearFields() {
        $scope.employeeId = "";
        $scope.employeeName = "";
        $scope.employeeEmail = "";
        $scope.employeemobile_no = "";
    }
});

Output:
Angular js with MVC Insert,Update, Delete
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy