Update record using Web API and AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I want to update a row in html table using webApi and angular js

I have created a table employee and add to the application using entity frame work's Databasefirst method

this is code for 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 displays in html table,display row in textboxes and code for updating

<script src="~/Scripts/angular.min.js"></script>
<script >
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope, $http) {
        //displays in html table
        $scope.GetAllData = function () {
            $http.get('/api/employee').then(function (response) {
                $scope.employees = response.data
            }, function (status) {
                alert(status);
            });
        }
//
        //Displaying values in textboxes
        $scope.UpdateEmp = function (Emp) {
          
            
           // $scope.employees[index].FirstName = "rajkumar";
            
            $scope.FirstName = Emp.FirstName;
            $scope.LastName = Emp.LastName;
            $scope.Company = Emp.Company;
            
        }
        //updating the data to database
        $scope.UpdateData = function (Emp) {
           
            Emp.FirstName = $scope.FirstName;
            Emp.LastName = $scope.LastName;
            Emp.Company = $scope.Company;
            alert(Emp.FirstName);
            $http.put('/api/Employee',Emp).then(function () {

                alert("success");
            })

        }

//
    });
</script>

problem is code for updating is not working

how to solve this

regards

Baiju

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi klbaiju,

Refering the below article i have created the example.

AngularJS Web API CRUD - Select Insert Edit Update and Delete using Web API and AngularJS in ASP.Net MVC

Check this example. Now please take its reference and correct your code.

Web Api Controller

public class AjaxAPIController : ApiController
{
    [Route("api/AjaxAPI/GetCustomers")]
    //[HttpGet]
    public List<Customer> GetCustomers()
    {
        CustomersEntities entities = new CustomersEntities();
        return entities.Customers.ToList();
    }

    [Route("api/AjaxAPI/UpdateCustomer")]
    [HttpPut]
    public bool UpdateCustomer(Customer customer)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            Customer updatedCustomer = (from c in entities.Customers
                                        where c.CustomerId == customer.CustomerId
                                        select c).FirstOrDefault();
            updatedCustomer.Name = customer.Name;
            updatedCustomer.Country = customer.Country;
            entities.SaveChanges();
        }

        return true;
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <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>Name</th><th>Country</th><th>Actions</th></tr></thead>
                <tr ng-repeat="Emp in employees">
                    <td>{{Emp.CustomerId}}</td>
                    <td>{{Emp.Name}}</td>
                    <td>{{Emp.Country}}</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">Name:</label></td><td><input type="text" class="form-control" placeholder="Nem" ng-model="Name"><input type="hidden" name="Id" ng-model="CustomerId" /></td></tr>
                <tr><td><label class="col-md-4 control-label">Country:</label></td><td><input type="text" class="form-control" placeholder="Country" ng-model="Country"></td></tr>
                <tr><td><input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="UpdateData()" /></td></tr>
            </table>
        </div>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {
            $scope.GetAllData = GetCustomers();
            $scope.UpdateEmp = function (Emp) {
                $scope.Name = Emp.Name;
                $scope.Country = Emp.Country;
                $scope.CustomerId = Emp.CustomerId;

            }
            $scope.UpdateData = function () {
                var customer = $scope.employees[0];
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                customer.CustomerId = $scope.CustomerId;
                $http.put('api/AjaxAPI/UpdateCustomer', customer).then(function () {
                    GetCustomers();
                })
            }
            function GetCustomers() {
                $http.get('api/AjaxAPI/GetCustomers').then(function (response) {
                    $scope.employees = response.data
                }, function (status) {
                    alert(status);
                });
            }
        });       
    </script>
</body>
</html>

Screenshot