not able to fetch and post data with angular js using asp.net core mvc

Question

I want to use AngularJs functionality in a view where i want to fetch records and add records i am using following code but i am not getting expected result.

    <div ng-app="MyApp" ng-controller="MyController">
        <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
            <tr>
                <th style="width:100px">Customer Id</th>
                <th style="width:150px">Name</th>
                <th style="width:150px">Country</th>
                <th style="width:100px"></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><span>{{m.CustomerId}}</span></td>
                    <td>
                        <span ng-hide="m.EditMode">{{m.Name}}</span>
                        <input type="text" ng-model="m.Name" ng-show="m.EditMode" />
                    </td>
                    <td>
                        <span ng-hide="m.EditMode">{{m.Country}}</span>
                        <input type="text" ng-model="m.Country" ng-show="m.EditMode" />
                    </td>
                    <td>
                        @*<a class="Edit" href="javascript:;" ng-hide="m.EditMode" ng-click="Edit($index)">Edit</a>
                        <a class="Update" href="javascript:;" ng-show="m.EditMode" ng-click="Update($index)">Update</a>
                        <a class="Cancel" href="javascript:;" ng-show="m.EditMode" ng-click="Cancel($index)">Cancel</a>
                        <a href="javascript:;" ng-hide="m.EditMode" ng-click="Delete(m.CustomerId)">Delete</a>*@
                    </td>
                </tr>
            </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 150px">
                    Name<br />
                    <input type="text" ng-model="Name" style="width:140px" />
                </td>
                <td style="width: 150px">
                    Country:<br />
                    <input type="text" ng-model="Country" style="width:140px" />
                </td>
                <td style="width: 200px">
                    <br />
                    <input type="button" value="Add" ng-click="Add()" />
                </td>
            </tr>
        </table>
    </div>
    
    
    
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            //Getting records from database.
            var post = $http({
                method: "GET",
                url: "/Customer/GetCustomers",
                dataType: 'json',
                headers: { "Content-Type": "application/json" }
            });
            post.success(function (data, status) {
                //The received response is saved in Customers array.
                $scope.Customers = data;
            });
    
            //Adding new record to database.
            $scope.Add = function () {
                if (typeof ($scope.Name) == "undefined" || typeof ($scope.Country) == "undefined") {
                    return;
                }
                var post = $http({
                    method: "POST",
                    url: "/Customer/InsertCustomer",
                    data: "{name: '" + $scope.Name + "', country: '" + $scope.Country + "'}",,
                    dataType: 'json',
                    headers: { "Content-Type": "application/json" }
                });
                post.success(function (data, status) {
                    //The newly inserted record is inserted into the Customers array.
                    $scope.Customers.push(data)
                });
                $scope.Name = "";
                $scope.Country = "";
            };
        });
    </script>

Here is my controller code in first method i am getting all records in debugging mode i am getting all customers and in saving method i am not getting inserted text data.

    public JsonResult GetCustomers()
    {       
        var Customers = db.Query<Customer>("Select * from Customer");
        return Json(Customers);
    }

    [HttpPost]
    public JsonResult InsertCustomer(string name, string country)
    {
        Customer customer = new Customer();
        customer.Name = name;
        customer.Country = country;
        db.Save(customer);
        return Json(customer);
    }

I am neither getting any records nor able to insert any records.Can anybody help me with whats going wrong

Michael Wang · Accepted Answer · 2020-07-31 09:27:18Z

1

Update

No records display well with data?

Change m.CustomerId to m.customerid
Change m.Name to m.name
Change m.Country to m.country

     ...
     <tbody>
        <tr ng-repeat="m in Customers">
            <td><span>{{m.customerid}}</span></td>
            <td>
                <span ng-hide="m.EditMode">{{m.name}}</span>
                <input type="text" ng-model="m.name" ng-show="m.EditMode" />
            </td>
            <td>
                <span ng-hide="m.EditMode">{{m.country}}</span>
                <input type="text" ng-model="m.country" ng-show="m.EditMode" />
            </td>
            <td>
                @*<a class="Edit" href="javascript:;" ng-hide="m.EditMode" ng-click="Edit($index)">Edit</a>
                    <a class="Update" href="javascript:;" ng-show="m.EditMode" ng-click="Update($index)">Update</a>
                    <a class="Cancel" href="javascript:;" ng-show="m.EditMode" ng-click="Cancel($index)">Cancel</a>
                    <a href="javascript:;" ng-hide="m.EditMode" ng-click="Delete(m.CustomerId)">Delete</a>*@
            </td>
        </tr>
    </tbody>
     ...

$http post data to controller failed?

You need to serialized as an array by using $.param(). And change Content-Type of headers to application/x-www-form-urlencoded.

            var post = $http({
                method: "POST",
                url: "/Customer/InsertCustomer",
                data: $.param({ name: $scope.Name, country: $scope.Country }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

            });

Screenshots of Test

After my test, the main problem is that angular's $http fails to pass the value correctly, you need to change the data to params.

Screenshots of test

edited Jul 31, 2020 at 9:27

answered Jul 31, 2020 at 6:48

Michael Wang

4,0381 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

shreyas35 Over a year ago

but i am not able to fetch the records also i am only getting empty rows without data

Michael Wang Over a year ago

Have u import <script src="cdn.staticfile.org/angular.js/1.4.6/…>?

Michael Wang Over a year ago

Have your Js excuted and send the request successfully?

shreyas35 Over a year ago

i am getting records in browser tools correctly but in view it accumalating the space in table as black rows no text is shown

shreyas35 Over a year ago

no i have not imported this <script src="cdn.staticfile.org/angular.js/1.4.6/…>

|

Collectives™ on Stack Overflow

not able to fetch and post data with angular js using asp.net core mvc

1 Answer 1

Update

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related