forum

Home / DeveloperSection / Forums / Angular js with MVC Insert,Update, Delete

Ask Question

Angular js with MVC Insert,Update, Delete

Anonymous User 3510 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

Anonymous User

Follow
I am a content writter !

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
{
    publicclassHomeController : Controller
    {              publicActionResult Index()
        {
            return View();
        }
        publicJsonResult getAll()
        {
            using (Entities dataContext = newEntities())
            {
                var employeeList = dataContext.Employee.ToList();
                return Json(employeeList, JsonRequestBehavior.AllowGet);
            }
        }
        publicJsonResult getEmployeeByNo(string EmpNo)
        {
            using (Entities dataContext = newEntities())
            {
                int no = Convert.ToInt32(EmpNo);
                var employeeList = dataContext.Employee.Find(no);
                return Json(employeeList, JsonRequestBehavior.AllowGet);
            }
        }
        publicstring UpdateEmployee(Employee Emp)
        {
            if (Emp != null)
            {
                using (Entities dataContext = newEntities())
                {
                    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";
            }
        }
        publicstring AddEmployee(Employee Emp)
        {
            if (Emp != null)
            {
                using (Entities dataContext = newEntities())
                {
                    dataContext.Employee.Add(Emp);
                    dataContext.SaveChanges();
                    return"Employee Updated";
                }
            }
            else
            {
                return"Invalid Employee";
            }
        }
        publicstring DeleteEmployee(Employee Emp)
        {
            if (Emp != null)
            {
                using (Entities dataContext = newEntities())
                {
                    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
<!DOCTYPEhtml>
<htmlng-app="myApp">
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>Index</title>
    <scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script>
    <linkhref="~/Content/bootstrap.css"rel="stylesheet"/>
    <scriptsrc="~/Scripts/bootstrap.min.js"></script>
    <scriptsrc="~/Scripts/angular.js"></script>
    <scriptsrc="~/Scripts/Model.js"></script>
    <scriptsrc="~/Scripts/service.js"></script>
    <scriptsrc="~/Scripts/controller.js"></script>
    <style>
        .modal-dialog {
    width: 600px;
    margin: 15%auto!important;
}
    </style>
</head>
<body>
    <divclass="container">
        <divng-controller="myCntrl">
            <divclass="panel panel-default">
                <divclass="panel-heading">
                    <divclass="panel-title"><h3> Employee Details Page</h3></div>
                    <divstyle="float: right; font-size: 80%; position:inherit; top: auto">
                       <inputtype="button"class="btnAdd btn btn-success"
                       value=" New One"id="NewDiv"/></div>
                    <divstyle="float: right; font-size: 80%; position: relative; top: -29px">
                         <inputtype="button"class="btnAdd btn btn-success"
                     value=" Add Employee"ng-click="AddEmployeeDiv()"/></div>
                      
                </div>
                <divstyle="padding-top: 30px"class="panel-body">
 
                    <divclass="divList">
                        <pclass="divHead">Employee List</p>
                        <tablecellpadding="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>
                            <trng-repeat="employee in employees">
                                <td>{{employee.Id}}
                                </td>
                                <td>{{employee.name}}
                                </td>
                                <td>{{employee.email}}
                                </td>
                                <td>{{employee.mobile_no}}
                                </td>
                                <td>   
                  <spanng-click="editEmployee(employee)"style="cursor: pointer;color:#0746D4;"
                    class="btnAdd btn btn-default btn-xs">Edit</span>
               <spanng-click="deleteEmployee(employee)"style="cursor: pointer;color:#0746D4;"   class="btnRed btn btn-default btn-xs">Delete</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                        <divclass="container">
                        <divclass="col-md-12">
                            <divng-show="divEmployee">
                                <pclass="divHead">{{Action}} Employee</p>
                                <table>
                                    <tr>
                                        <tdstyle="padding-right:5px;"><b>Id</b></td>
                                        <tdstyle="padding-right:5px;">
                                        <inputtype="text"class="form-control"             ng-model="employeeId"/>
                                        </td>
                                         <tdstyle="padding-right:5px;"><b>Name</b></td>
                                        <tdstyle="padding-right:5px;">
                                            <inputtype="text"class="form-control"ng-model="employeeName"/>
                                        </td>
                                         <tdstyle="padding-right:5px;"><b>Email</b></td>
                                        <tdstyle="padding-right:5px;">
                                            <inputtype="text"class="form-control"ng-model="employeeEmail"/>
                                        </td>
                                         <tdstyle="padding-right:5px;"><b>Mobile No</b></td>
                                        <tdstyle="padding-right:5px;">
                                            <inputtype="text"class="form-control"ng-model="employeemobile_no"/>
                                        </td>
                                    </tr>    
                                  
                                    <tr>
                                        <tdcolspan="8"style="padding-top: 20px; text-align:right;">
                                             <inputtype="button"class="btnAdd btn btn-default"value="Cancel"ng-click="Close()"/>
                                            <inputtype="button"class="btnAdd btn btn-primary"value="Save"ng-click="AddUpdateEmployee()"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>               
                </div>
            </div>
        </div>
    </div> 
    <divclass="modal fade"id="alertmodal"tabindex="-1"role="dialog"aria-labelledby="modalLabel"aria-hidden="true">
  <divclass="modal-dialog">
       <divclass="modal-content">
              <divclass="modal-header"style="background-color: #ccc;">
                     <buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">×</span><spanclass="sr-only">Close</span></button>
                     <h3class="modal-title"id="lineModalLabel">Alert</h3>
              </div>
              <divclass="modal-body"id="alertcontent">
              </div>
              <divclass="modal-footer"style="padding:0px;">
                     <divclass="btn-group btn-group-justified"role="group"aria-label="group button">
                           <divclass="btn-group"role="group">
                                  <buttontype="button"id="OK"class="btn btn-default "ng-click="OK()"style="border-radius: 0px0px0px0px;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:
answer 415871902012539

Liked By