HiI want to update a row in html table using webApi and angular jsI have created a table employee and add to the application using entity frame works Databasefirst methodthis is code for html ltdiv ngapp34myApp34gt ltdiv ngcontroller34myCtrl34 nginit34GetAllData34gt ltpgtList Of Employeesltpgt lttable class34table tablebordered tablehover34gt ltthead class34theddark34gt lttrgtltth scope34c

Hi klbaijuRefering the below article i have created the exampleAngularJS Web API CRUD Select Insert Edit Update and Delete using Web API and AngularJS in ASPNet MVCCheck this example Now please take its reference and correct your codeWeb Api Controllerpublic class AjaxAPIController ApiController Route34apiAjaxAPIGetCustomers34 HttpGet public ListltCustomergt GetCustomers CustomersEntities entities new CustomersEntities return entitiesCustomersToList Route34apiAjaxAPIUpdateCustomer34 HttpPut public bool UpdateCustomerCustomer customer using CustomersEntities entities new CustomersEntities Customer updatedCustomer from c in entitiesCustomers where cCustomerId customerCustomerId select cFirstOrDefault updatedCustomerName customerName u

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

klbaiju

SOLVED CLOSED ACTIVE ANSWERED
User: klbaiju
Posted: on Aug 06, 2018 12:34 AM
Forum: AngularJS
Answer: 1
Views: 3828
Sample Code: Download

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

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Aug 06, 2018 06:11 AM
Report

Hi klbaiju,

Refering the below article i have created the example.

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

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

Company

Explore

Follow us

Contact Us