LightBlog

Wednesday, 25 January 2017

Home / Unlabelled / AngularJs CRUD Operations Using WEBAPI

AngularJs CRUD Operations Using WEBAPI

by on
WebAPI Controller
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using AngularDemo1.Model;

namespace AngularDemo1.Controllers
{
    public class EmployeeController : ApiController
    {
        private EmployeeDBEntities db = new EmployeeDBEntities();
        WorkDBEntities db2 = new WorkDBEntities();
       

        // GET: api/Employee
        public IQueryable<Employee> GetEmployees()
        {
            return db.Employees;
        }

        // GET: api/Employee/5
        [ResponseType(typeof(Employee))]
        public IHttpActionResult GetEmployee(int id)
        {
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return NotFound();
            }

            return Ok(employee);
        }

        // PUT: api/Employee/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutEmployee(Employee employee)
        {
            int Id = employee.Id;
           
            int id = employee.Id;
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != employee.Id)
            {
                return BadRequest();
            }

            db.Entry(employee).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!EmployeeExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/Employee
        [ResponseType(typeof(Employee))]
        public IHttpActionResult PostEmployee(Employee employee)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Employees.Add(employee);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = employee.Id }, employee);
        }


        // POST: api/Employee
        [ResponseType(typeof(UserTbl))]
        public IHttpActionResult PostUser(UserTbl User)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db2.UserTbls.Add(User);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi2", new { id = User.Id }, User);
        }


        // DELETE: api/Employee/5
        [ResponseType(typeof(Employee))]
        public IHttpActionResult DeleteEmployee(int id)
        {
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return NotFound();
            }

            db.Employees.Remove(employee);
            db.SaveChanges();

            return Ok(employee);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool EmployeeExists(int id)
        {
            return db.Employees.Count(e => e.Id == id) > 0;
        }
    }
}






Javascript Code For CRUD Operation
.controller("EmployeeCtrl", ['$scope', 'empService', '$http', function ($scope, empService, $http,) {

   
   
    EmpList();
    $scope.Employee = {
        Id: "100",
        Name: "",
        Gender: "",
        Salary: ""
    }
   
    //Get EMployeee Data

    function EmpList() {
        return $http.get('/api/Employee/').then(function (response) { $scope.EmployeeData = response.data; });

    }

   
  
    //Delete Employee By Id

  
    $scope.empDelById = function (id) {

      

        $http.delete('/api/Employee/' + id).then(function (response) {
            $scope.colr = "#349d0a";
            $scope.Status = "Deleted SuccessFully";
            EmpList()

        }, function () {
            $scope.colr = "red";
            $scope.Status = "Failed To Delete Record ";
        });

    }
    //Get Employee Details By Id
    $scope.EmpDetails = { Id: "", Name: "", Gender: "", City: "" }
    $scope.empGetById = function (id) {

        $http.get('/api/Employee/' + id).then(function (response) {
            $scope.EmpDetails = response.data;
        });

    }



    //Update
    $scope.updateEmp = function (formdata) {


        confirm("Are You Sure You Want TO Update Employee Id :" + formdata.Id);

        $http.put('/api/Employee/', formdata).then(function () { alert("success full Upated"); EmpList(); }, function () { alert("Failed Update Record") });

    }





//Insert  Employee Using empService
    $scope.EmpInsert = function () {

        alert(Employee.Id);
        empService.insert($scope.Employee).then(function () {

            EmpList()
           
            $scope.Employee = {Id:100,Name: "", Gender: "", Salary: "" };

            alert("Success");
           
        }, function () { alert("Failed"); })
    }






Employee Insert Service


//Serves For Insert Data in Datbase  Using WebAPI   Code Strats Here----------------------------------
.factory("empService", function ($http) {
    empService = {};
    empService.insert = function (formdata) {
        return $http.post('/api/Employee/', formdata)
    }
    return empService;


})




HTML  Code
<br /><br/><br /><br />

<div id="AccordDiv">

   
    <div class="EmpInsertDiv">
        <h1>EMployee INSERT</h1>
      
            <table>
                <tr>
                    <td><label class="label1" for="Id">Enter Id</label></td>
                    <td><input type="text" disabled ng-model="Employee.Id" class="EmpForm" /></td>
                   
                </tr>
                <tr>
                    <td><label class="label1" for="Name">Enter Name</label></td>
                    <td>
                        <input type="text" name="txtEname" ng-model="Employee.Name" class="EmpForm" required/>
                       
                    </td>

                </tr>
                <tr>
                    <td><label class="label1" for="Gender">Enter Gender</label></td>
                    <td>
                        <select ng-model="Employee.Gender" required style="height:30px;width:173px;border:none;border-radius:0px">
                            <optgroup label="Gender">
                                <option selected disabled>Select Gender</option>
                                <option value="Male">Male</option>
                                <option value="FeMale">FeMale</option>
                            </optgroup>
                            <optgroup label="Other Gender">

                                <option value="Other">Two In One</option>

                            </optgroup>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td><label class="label1" for="Salary">Enter Salary</label></td>
                    <td><input type="number" min="4" maxlength="6" ng-model="Employee.Salary" class="EmpForm" required /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" ng-click="EmpInsert()" value="Insert Record" /></td>

                </tr>
            </table>
       
    </div>

    <div class="empListtbl">
        <h1>Disply Only lIMITED Records  Using Filters</h1>
        <table border="1" style="border:2px solid black;width:500px;height:auto">
            <thead>
                <tr>
                    <th>Employee Id</th>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                    <th>Index</th>
                </tr>
            </thead>
            <tr ng-repeat="item in EmployeeData|limitTo:5">
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Gender}}</td>
                <td>{{item.Salary}}</td>
               
                <td>{{$index}}</td>
               
            </tr>
        </table>
       
    </div>
    <br /><br />
    <hr />
    <h1>UPDATE DELETE</h1>

    <br /><br /><br /><br />
    <div class="empListtbl">
      
         <h1>Employee Table</h1>
        <table border="1" style="border:2px solid black;width:500px;height:auto">
            <tr ng-repeat="item in EmployeeData">
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Gender}}</td>
                <td>{{item.Salary}}</td>
               
                <td>
                    <input type="button" value="Edit" ng-click="empGetById(item.Id)" />|
                    <input type="button" value="Delete" ng-click="empDelById(item.Id)" />
                </td>

               
            </tr>
        </table>
        <br />
        <span style="color:{{colr}};"><i>{{Status}}</i></span>
    </div>



    <div class="divEMpUpdate">
        <h1>Upadate Employee</h1>
        <span style="border:1px solid black">{{EmpDetails.Id}}</span>
        <input type="text" ng-model="EmpDetails.Name">
        <input type="text" ng-model="EmpDetails.Gender">
        <input type="text" ng-model="EmpDetails.Salary">
        <input type="button" value="Update" ng-click="updateEmp(EmpDetails)" />
    </div>
</div>


Author Image

About Akula Srinivas
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates.

You May Also Like:
By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
LightBlog