C# AngularJS控制器在post操作后未调用MVC控制器

我是一个Angularjs初学者，在代码中的某个地方被卡住了。我正在处理一个CRUD操作示例，当我更新视图上的值时，它会在数据库中成功更新，但除非重新加载页面，否则更新的值不会立即出现

代码如下：

查看-

    <h2>Customer Details</h2>
<div ng-app="myApp">
    <div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
        <p class="divHead">List of Customers</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td>
                    <b>ID</b>
                </td>
                <td>
                    <b>Name</b>
                </td>
                <td>
                    <b>City</b>
                </td>
                <td>
                    <b>Contact</b>
                </td>
                <td>
                    <b>EmailID</b>
                </td>
                <td>
                    <b>Actions</b>
                </td>
            </tr>
            <tr ng-repeat="Emp in employees">
                <td>
                    {{Emp.CustomerID}}
                </td>
                <td>
                    {{Emp.Name}}
                </td>
                <td>
                    {{Emp.Address}}
                </td>
                <td>
                    {{Emp.Mobileno}}
                </td>
                <td>
                    {{Emp.EmailID}}
                </td>
                @*<td>
                    {{Emp.Mobileno}}
                </td>*@
                <td>
                    <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
                    <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
                </td>
            </tr>
        </table>
        <div class="form-horizontal" role="form">
            <div class="container">
                <div class="row">
                    <h2>
                        <span id="spn">Add New Customer</span>
                    </h2>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Name:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputEmail" placeholder="Name" ng-model="EmpName" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">City:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputPassword" placeholder="City" ng-model="EmpCity">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Contact:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputLabel3" placeholder="Contact" ng-model="Contact">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Email ID:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputLabel3" placeholder="Email ID" ng-model="Email">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="InsertData()" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @Html.Hidden("CustomerID")
</div>

---

若要在更新成功时更新表中的数据，需要从表中获取对象，然后在方法中更新对象

例如：

JS

app.controller('myCtrl', myCtrl)
myCtrl.$inject = ['$scope','$http'];
function myCtrl($scope, $http){
    var vm = this;
    vm.employee = {
         id:'',
         name:'',
         age:''
    }
    vm.employees = [];
    vm.update = update;
    vm.preupdate = preupdate;

    function init(){
        for(var i = 0; i < 10; i ++){
            vm.employees.push({id:i, name:'employee '+i, age: i});
        }
    }
    init();


    function preupdate(emp){
        vm.employee.id = emp.id;
        vm.employee.name = emp.name;
        vm.employee.age = emp.age;
    }

    function update(){


         $http({
             method:'POST',
             data: JSON.stringify(vm.employee),
             url: 'urlFromControllerMVC',
             headers:{
               'Content-Type': 'application/json'
             }
         }).then(success);

        function success(response){
            var obj = vm.employees.filter(x => x.id == emp.id);  //Get your object from your array
            obj.name = vm.employee.name;
            obj.age = vm.employee.age;
            vm.employee = {
                   id:'',
                   name:'',
                   age:''
            }
//after this your view is update
        }
    }

    //If you use function add just push your return object from controller MVC in your array of employees. 
}

app.controller（'myCtrl'，myCtrl）
myCtrl.$inject=['$scope'，'$http']；
函数myCtrl（$scope$http）{
var vm=这个；
vm.employee={
id:“”，
名称：“”，
年龄：''
}
vm.employees=[]；
vm.update=更新；
vm.preupdate=preupdate；
函数init（）{
对于（变量i=0；i<10；i++）{
push（{id:i，姓名：'employee'+i，年龄：i}）；
}
}
init（）；
功能预更新（emp）{
vm.employee.id=emp.id；
vm.employee.name=emp.name；
vm.employee.age=emp.age；
}
函数更新（）{
$http({
方法：'POST'，
数据：JSON.stringify（vm.employee），
url:'urlFromControllerMVC'，
标题：{
“内容类型”：“应用程序/json”
}
}).然后（成功）；
功能成功（响应）{
var obj=vm.employees.filter（x=>x.id==emp.id）；//从数组中获取对象
obj.name=vm.employee.name；
obj.age=vm.employee.age；
vm.employee={
id:“”，
名称：“”，
年龄：''
}
//在此之后，您的视图将更新
}
}
//如果使用函数add，只需从员工数组中的controllermvc推送返回对象。
}

HTML

<div ng-controller="myCtrl as vm">

    <form novalidate ng-submit="vm.update()">  //or ng-click in your button
        //form for update your data
   </form>        

    <table>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td></td>
        <tr>
        <tr ng-repeat="emp in vm.employees">
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.age}}</td>
            <td><button ng-click="vm.preupdate(emp)">Update</button></td>  //
        </tr>
    </table>
</div>

//或者点击你的按钮
//用于更新数据的表单
身份证件
名称
年龄
{{emp.id}
{{emp.name}
{{emp.age}
更新//

当crud操作完成时..应重新初始化对象

[HttpPost]
        public JsonResult addProduct(ProductModels input)
        {

            Db.Products.Add(input);
            Db.SaveChanges();
            var products = Db.Products.ToList();
            return Json(products, JsonRequestBehavior.AllowGet);
        }

然后像这样获取控制器函数中的产品数据

$scope.addProduct = function(input)
    {
        console.log(input);     
        $.ajax({
            type: "POST",
            url: "/Angular/addProduct",
            dataType: "json",
            processData: false,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                ProductCode: input.ProductCode,
                Productname: input.Productname,
                Price: input.Price
            }),
            success: function (resp) {
                console.log(resp);
                $scope.$apply(function () {
                    $scope.products = resp;
                    $scope.product = null;
                });
            }
        });
    }

我希望它能起作用。。

我解决了这个问题，只需在 角码-

---

不打电话？你怎么知道的？单击按钮时是否有js错误？我已在MVC控制器操作-Get_AllEmployee（）上放置了一个断点，以便知道何时调用它；更新记录后未命中Get_AllEmployee（）的断点@mohamed ahmeduse

.success（）

而不是

。then（）

不利于在数据库中添加产品时刷新所有数据。只需将新项目推送到阵列上，您的视图就会更新。如果服务器返回错误，请在承诺中使用.catch（），或者在httpInterceptor中使用ResponseError。。。

[HttpPost]
        public JsonResult addProduct(ProductModels input)
        {

            Db.Products.Add(input);
            Db.SaveChanges();
            var products = Db.Products.ToList();
            return Json(products, JsonRequestBehavior.AllowGet);
        }

$scope.addProduct = function(input)
    {
        console.log(input);     
        $.ajax({
            type: "POST",
            url: "/Angular/addProduct",
            dataType: "json",
            processData: false,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                ProductCode: input.ProductCode,
                Productname: input.Productname,
                Price: input.Price
            }),
            success: function (resp) {
                console.log(resp);
                $scope.$apply(function () {
                    $scope.products = resp;
                    $scope.product = null;
                });
            }
        });
    }

$scope.GetAllData = function () {
        debugger;
        $http({
            method: "post",
            url: "http://localhost:12345/Employee/Get_AllEmployee"
        }).then(function (response) {
            $scope.employees = response.data;
            //angular.extend($scope.employees, response.data);
            //$scope.$apply();
        }, function () {
            alert("Error Occured!");
        })
    };