javascript - 如何使用 Angular js 在 asp.net core mvc 中使用下拉列表保存和编辑数据

Question

我在我的 asp.net 核心 MVC 项目的一小部分中使用 AngularJs 我正在使用两个下拉列表和一个使用文本框的文本框我能够保存和编辑数据但是使用下拉列表我无法在发布数据后重置下拉列表我也是无法使用下拉菜单编辑记录。

这是我的代码

<table ng-table="tblCustomers" class="table" cellpadding="0" cellspacing="0">
                <tr>
                    <th>Stakes</th>
                    <th>Supplier</th>
                    <th>Description</th>
                    <th></th>
                </tr>
                <tbody ng-repeat="m in ST">
                    <tr>
                        <td>
                            <span ng-hide="m.EditMode">{{m.stakeName}}</span>
                            <select ng-model="StakeId" value="{{ m.stakeId }}" ng-options="s.stakeName for s in StakeList track by s.stakeId" ng-show="m.EditMode" class="form-control">
                                <option value="">Select Stake</option>
                            </select>
                        </td>
                        <td>
                            <span ng-hide="m.EditMode">{{m.supplierName}}</span>
                            <select ng-model="SupplierId" value="{{ m.supplierId }}" ng-options="a.supplierName for a in SupplierList track by a.supplierId" ng-show="m.EditMode" class="form-control">
                                <option value="">Select Supplier</option>
                            </select>
                        </td>
                        <td>
                            <span ng-hide="m.EditMode">{{m.description}}</span>
                            <input type="text" ng-model="m.description" ng-show="m.EditMode" />
                        </td>
                        <td>
                            <a class="Edit" href="javascript:;" ng-hide="m.EditMode" ng-model="m.stakeTransId" 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>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td>
                            <select ng-model="StakeId" value="{{ m.stakeId }}" ng-options="s.stakeName for s in StakeList track by s.stakeId" ng-show="m.EditMode" class="form-control">
                                <option value="">Select Share</option>
                            </select>
                    </td>
                    <td>
                            <select ng-model="SupplierId" value="{{ m.supplierId }}" ng-options="a.supplierName for a in SupplierList track by a.supplierId" ng-show="m.EditMode" class="form-control">
                                <option value="">Select Agent</option>
                            </select>
                    </td>

                    <td width="150px">
                        <input ng-model="Description" placeholder="Description" class="form-control" />
                    </td>
                    <td>
                        <input type="button" value="Add" id="Save" ng-click="Savedata()" />
                    </td>
                </tr>
            </table>

这是我的控制器代码

[HttpPost]
    public JsonResult AddStakeTrans(int supplierId, int stakeId, string desc)
    {
        StakeTran stakeTrans = new StakeTran();
        shareTrans.SupplierId = supplierId;
        shareTrans.StakeId = stakeId;
        shareTrans.Description = desc;
        db.Insert(stakeTrans);
    
    //after posting data to get inserted record to display in table 
    StakeTransViewModel stakeTransViewModel = new StakeTransViewModel();
    stakeTransViewModel.SupplierName = db.ExecuteScalar<string>("Select SupplierName from Supplier where SupplierId = @0", supplierId);
    stakeTransViewModel.StakeName = db.ExecuteScalar<string>("Select StakeName from Stake where StakeId = @0", stakeId);
    stakeTransViewModel.Description = desc;
    
    //to get the dropdownlist 
    stakeTransViewModel.StakeList = db.Fetch<Stake>("Select StakeId,StakeName from Share").ToList();
    stakeTransViewModel.SupplierList = db.Fetch<Supplier>("Select SupplierId,SupplierId from Supplier").ToList();
    return Json(stakeTransViewModel);
}

这是我发布和编辑数据的角度代码

        $scope.StakeList = "";
        $scope.SupplierList = "";
        $scope.Savedata = function () {
            $http({
                method: "POST",
                url: "/StakeTrans/AddStakeTrans",
                data: $.param({
                    supplierId: $scope.SupplierId.supplierId,
                    stakeId: $scope.StakeId.stakeId,
                    desc: $scope.Description
                }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then(function (data) {
                $scope.ST.StakeName = data.data.StakeName;
                $scope.ST.SupplierName = data.data.SupplierName;
                $scope.StakeList = data.data.stakeList;
                $scope.SupplierList = data.data.supplierList;
                $scope.StakeId = data.data.stakeList;
                $scope.SupplierId = data.data.supplierList;
                $scope.ST.push(data.data);
                $scope.btntext = "Save";
            },function (error) {

            });
            $scope.StakeTransId = "";
            $scope.StakeId = "";
            $scope.StakeName = "";
            $scope.SupplierId = "";
            $scope.SupplierName = "";
            $scope.Description = "";

        };




        //This variable is used to store the original values.
        $scope.EditItem = {};

        //Editing an existing record.
        $scope.Edit = function (index) {

            $scope.ST[index].EditMode = true;

            $scope.EditItem.stakeId = $scope.ST[index].StakeId.stakeId;
            $scope.EditItem.supplierId = $scope.ST[index].SupplierId.supplierId;
            $scope.EditItem.description = $scope.ST[index].description;


//the update code
        };

在编辑模式下，我想隐藏行中的数据，除此之外我还有编辑按钮并显示文本框和下拉列表，其中包含该特定 ID 的值，就像我们通常在编辑模式下一样，然后想要单击更新以更新记录在添加模式下，当我单击添加按钮时，记录会成功添加并显示在网格中，但我的下拉列表没有重置。

所以这是我面临的全部问题，我没有得到解决方案，任何人都可以建议我如何使用 Angular js 成功让下拉列表在添加和编辑模式下工作的解决方案。

标签： javascriptc#angularjsasp.net-coreasp.net-core-mvc

Answer 1

您的控制器中存在两个错误。

    [HttpPost]
    public JsonResult AddStakeTrans(int supplierId, int stakeId, string desc)
    {
        StakeTran stakeTrans = new StakeTran();

        //ERROR1
        //shareTrans.SupplierId = supplierId;
        stakeTrans.SupplierId = supplierId;

        //shareTrans.StakeId = stakeId;
        stakeTrans.StakeId = stakeId;

        //shareTrans.Description = desc;
        stakeTrans.Description = desc;

        db.Insert(stakeTrans);
    
    //after posting data to get inserted record to display in table 
    StakeTransViewModel stakeTransViewModel = new StakeTransViewModel();
    stakeTransViewModel.SupplierName = db.ExecuteScalar<string>("Select SupplierName from Supplier where SupplierId = @0", supplierId);
    stakeTransViewModel.StakeName = db.ExecuteScalar<string>("Select StakeName from Stake where StakeId = @0", stakeId);
    stakeTransViewModel.Description = desc;
    
    //to get the dropdownlist 
    stakeTransViewModel.StakeList = db.Fetch<Stake>("Select StakeId,StakeName from Share").ToList();

    //ERROR 2
    //stakeTransViewModel.SupplierList = db.Fetch<Supplier>("Select SupplierId,SupplierId from Supplier").ToList();
    stakeTransViewModel.SupplierList = db.Fetch<Supplier>("Select SupplierId,SupplierName from Supplier").ToList();
     

    return Json(stakeTransViewModel);
}