如何使用 angular js 在 asp.net 核心 mvc 中使用下拉列表保存和编辑数据

Question

I am using AngularJs in small part of my asp.net core MVC project i am using two dropdownlist and a textbox using textbox i am able to save and edit data but with dropdownlist i am not able to reset dropdownlist after posting the data also i am not able to edit the record with dropdowns.

Here is my code

<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>

Here is my controller code

[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);
}

Here is my angular code to post and edit data

        $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
        };

in edit mode i want to hide the data in the row besides which i have edit button and show textbox and dropdown with value which that particular id have just like we normally have in edit mode and then want to click on update to update the record also in add mode when i click on add button the record get added and shown in the grid successfully but my dropdownlists are not getting reset.

So this is the whole problem i am facing and i am not getting the solution for that, can anybody suggest me the solution to how i can successfully get dropdownlist working in add and edit mode using angular js.

Answer 1

There are two mistakes existed in your controller.

    [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);
}