locked
Update function not working in webApi and Angularjs RRS feed

  • Question

  • User1839056048 posted

    Hi,

    I want to update a record using WebApi and angularJs

    following is my html

    <div ng-app="myApp">
        <div ng-controller="myCtrl" ng-init="GetAllData()">
            <p>List Of Employees</p>
            <table class="table table-bordered table-hover">
                <thead class="thed-dark"> <tr><th scope="col">ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Actions</th></tr></thead>
                <tr ng-repeat="Emp in employees">
                    <td>{{Emp.Id}}</td>
                    <td>{{Emp.FirstName}}</td>
                    <td>{{Emp.LastName}}</td>
                    <td>{{Emp.Company}}</td>
                    <td>
                        <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
                       
                    </td>
                </tr>
            </table>
            <table>
                <tr><td><label class="col-md-4 control-label">FirstName:</label></td><td><input type="text" class="form-control"  placeholder="FirstName" ng-model="FirstName"></td></tr>
                <tr><td><label class="col-md-4 control-label">LaststName:</label></td><td><input type="text" class="form-control"  placeholder="FirstName" ng-model="LastName"></td></tr>
                <tr><td><label class="col-md-4 control-label">Company:</label></td><td><input type="text" class="form-control" id="inputEmail" placeholder="Company" ng-model="Company"></td></tr>
                <tr><td><input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="UpdateData(Emp)" /></td></tr>
            </table>
    </div>
    </div>

    code for displaying in table

      $scope.GetAllData = function () {
                $http.get('/api/employee').then(function (response) {
                    $scope.employees = response.data
                }, function (status) {
                    alert(status);
                });
            }

    when I click on the update button of any row ,the details will be displays in textboxes

    code for displaying in text box

     $scope.UpdateEmp = function (Emp) {
              
                
               // $scope.employees[index].FirstName = "rajkumar";
                
                $scope.FirstName = Emp.FirstName;
                $scope.LastName = Emp.LastName;
                $scope.Company = Emp.Company;
                
            }

    and finally code for updating

    $scope.UpdateData = function (Emp) {
                
                
                $http.put('/api/Employee',Emp).then(function () {
    
                    alert("success");
                })
    
            }

    web api code for updating

      public IHttpActionResult PutEmployee(int id, Employee employee)
            {
                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);
            }

    problem is when I press update button ,it is not firing

    How to solve this

    Regards

    Baiju

    Friday, August 3, 2018 7:52 AM

Answers

  • User61956409 posted

    Hi klbaiju,

    Based on your code, we can find that the first <table> would be dynamically generated based on `Employees` collection, function UpdateEmp(Emp) is attached to button that is table child element, so you can pass and get `Emp` object inside function UpdateEmp().

    But your second <table> is not generated by items in `Employees` collection, so you could not get `Emp` object in function UpdateData().

    To solve the problem, you could refer to the following code snippet to modify your code.

    <table class="table table-bordered table-hover">
        <thead class="thed-dark"> <tr><th scope="col">ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Actions</th></tr></thead>
        <tr ng-repeat="Emp in employees">
            <td>{{Emp.Id}}</td>
            <td>{{Emp.FirstName}}</td>
            <td>{{Emp.LastName}}</td>
            <td>{{Emp.Company}}</td>
            <td>
                <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
            </td>
        </tr>
    </table>
    <br />
    <table>
        <tr><td><label class="col-md-4 control-label">FirstName:</label></td><td><input type="text" class="form-control" placeholder="FirstName" ng-model="selecteduser.FirstName"></td></tr>
        <tr><td><label class="col-md-4 control-label">LaststName:</label></td><td><input type="text" class="form-control" placeholder="FirstName" ng-model="selecteduser.LastName"></td></tr>
        <tr><td><label class="col-md-4 control-label">Company:</label></td><td><input type="text" class="form-control" id="inputEmail" placeholder="Company" ng-model="selecteduser.Company"></td></tr>
        <tr><td><input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="UpdateData(selecteduser)" /></td></tr>
    </table>
    

    In controller:

    app.controller('myCtrl', function ($scope) {
    
        $scope.employees = [{ "Id": "e001", "FirstName": "Fei", "LastName": "Han", "Company": "xxx" },
            { "Id": "e002", "FirstName": "xxx", "LastName": "xxx", "Company": "xxx" }];
    
        $scope.selecteduser = {};
        $scope.selecteduser.FirstName = "";
        $scope.selecteduser.LastName = "";
        $scope.selecteduser.Company = "";
    
        $scope.UpdateEmp = function (Emp) {
    
    
            // $scope.employees[index].FirstName = "rajkumar";
    
            $scope.selecteduser.FirstName = Emp.FirstName;
            $scope.selecteduser.LastName = Emp.LastName;
            $scope.selecteduser.Company = Emp.Company;
    
        }
    
        $scope.UpdateData = function (Emp) {
            console.log(Emp);
            //your code logic
        }
    });
    

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 6, 2018 10:09 AM

All replies

  • User61956409 posted

    Hi klbaiju,

    Based on your code, we can find that the first <table> would be dynamically generated based on `Employees` collection, function UpdateEmp(Emp) is attached to button that is table child element, so you can pass and get `Emp` object inside function UpdateEmp().

    But your second <table> is not generated by items in `Employees` collection, so you could not get `Emp` object in function UpdateData().

    To solve the problem, you could refer to the following code snippet to modify your code.

    <table class="table table-bordered table-hover">
        <thead class="thed-dark"> <tr><th scope="col">ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Actions</th></tr></thead>
        <tr ng-repeat="Emp in employees">
            <td>{{Emp.Id}}</td>
            <td>{{Emp.FirstName}}</td>
            <td>{{Emp.LastName}}</td>
            <td>{{Emp.Company}}</td>
            <td>
                <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
            </td>
        </tr>
    </table>
    <br />
    <table>
        <tr><td><label class="col-md-4 control-label">FirstName:</label></td><td><input type="text" class="form-control" placeholder="FirstName" ng-model="selecteduser.FirstName"></td></tr>
        <tr><td><label class="col-md-4 control-label">LaststName:</label></td><td><input type="text" class="form-control" placeholder="FirstName" ng-model="selecteduser.LastName"></td></tr>
        <tr><td><label class="col-md-4 control-label">Company:</label></td><td><input type="text" class="form-control" id="inputEmail" placeholder="Company" ng-model="selecteduser.Company"></td></tr>
        <tr><td><input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="UpdateData(selecteduser)" /></td></tr>
    </table>
    

    In controller:

    app.controller('myCtrl', function ($scope) {
    
        $scope.employees = [{ "Id": "e001", "FirstName": "Fei", "LastName": "Han", "Company": "xxx" },
            { "Id": "e002", "FirstName": "xxx", "LastName": "xxx", "Company": "xxx" }];
    
        $scope.selecteduser = {};
        $scope.selecteduser.FirstName = "";
        $scope.selecteduser.LastName = "";
        $scope.selecteduser.Company = "";
    
        $scope.UpdateEmp = function (Emp) {
    
    
            // $scope.employees[index].FirstName = "rajkumar";
    
            $scope.selecteduser.FirstName = Emp.FirstName;
            $scope.selecteduser.LastName = Emp.LastName;
            $scope.selecteduser.Company = Emp.Company;
    
        }
    
        $scope.UpdateData = function (Emp) {
            console.log(Emp);
            //your code logic
        }
    });
    

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 6, 2018 10:09 AM
  • User1839056048 posted

    Hi

    Fei Han

    your code is fine and working.

    I have modified the code for updating the row after successsful updation.

    instead of calling the GetAllData function , I have updated the row using below code

    var index1
     $scope.UpdateEmp = function (Emp,index) {
    
                index1 = index;
                // $scope.employees[index].FirstName = "rajkumar";
                $scope.selecteduser.Id = Emp.Id;
                $scope.selecteduser.FirstName = Emp.FirstName;
                $scope.selecteduser.LastName = Emp.LastName;
                $scope.selecteduser.Company = Emp.Company;
    
            }

    for updating to database and row updation

     $scope.UpdateData = function (Emp) {
               
                $http.put('/api/Employee', Emp).then(function () {
                    $scope.employees[index1].FirstName = Emp.FirstName;
                    $scope.employees[index1].LastName = Emp.LastName
                    $scope.employees[index1].Company = Emp.Company;
                   
                })
            }

    html

    <table class="table table-bordered table-hover">
                <thead class="thed-dark"> <tr><th scope="col">ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Actions</th></tr></thead>
                <tr ng-repeat="Emp in employees">
                    <td>{{Emp.Id}}</td>
                    <td>{{Emp.FirstName}}</td>
                    <td>{{Emp.LastName}}</td>
                    <td>{{Emp.Company}}</td>
                    <td>
                        <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp,$index)" />
                       
                    </td>
                </tr>
            </table>
           

    the above code passing the index of each row

    and following code updates the row instead of calling GetAllData function

     $scope.employees[index1].FirstName = Emp.FirstName; $scope.employees[index1].LastName = Emp.LastName $scope.employees[index1].Company = Emp.Company;

    I want to know whether it is right method or not

    Regards
    Baiju
    Tuesday, August 7, 2018 5:42 AM