时间戳

首页 > 解决方案 > 处理带有多条记录的asp.net核心表单中的多选列表框值提交

jquery - 处理带有多条记录的asp.net核心表单中的多选列表框值提交

问题描述

在 ASP.NET CORE 2.0 中，我正在创建一个 Ajax 表单。可以在此表单中更新多个员工。有一个员工编号和一个多选列表框来选择员工的报销。
问题是如何处理报销值，因为可以从列表框中选择多个项目。表单将以键值对的形式提交。在报销的情况下，Key为报销，值将是多个。因此，如何检查选择了哪些报销EmployeeID？

    @model myweb.NewWOModel

    <form id="frmWODetail" asp-action="EditMultipleEmployee" asp- controller="WOData" data-ajax="true" data-ajax-method="POST" data-ajax-success="onSuccess" data-ajax-failure="onFailed">
        @Html.AntiForgeryToken()
        <div class="row">
            <div class="col-sm-12">
            @foreach (var record in Model.MultipleEmployeeModels)
            {
                <div class="row">
                    <div class="col-sm-6">
                        <label>WorkOrder No.:</label>
                        <span>
                            @record.EmployeeNo
                        </span>
                    </div>
                    <div class="col-sm-6">
                        <input type="hidden"
                               name="EmployeeID"
                               value="@record.EmployeeID" />
                        </div>
                </div>

                <div class="row col-sm-12">
                    <select name="Reimbursement"
                            asp-for="@record.ReimbursementID"
                            asp-items="@(new SelectList(
                              Model.ReimbursementModels,
                              "ReimbursementID",
                              "ReimbursementName")
                            )" 
                            multiple>
                    </select>
                </div>
            }

            <div class="row">
                <div class="col-sm-12 text-right">
                    <input type="submit"
                           class="btn btn-success"
                           value="Save"/>          
                    <input type="button" 
                           class="btn btn-primary"
                           value="Close"
                           data- dismiss="modal" />
                </div>
            </div>
        </div>
    </form>


<script type="text/javascript">
    var onComplete = function () {

    };

    var onSuccess = function (context) {
        
    };

    var onFailed = function (context) {
        
    };

</script>

控制器

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<JsonResult> EditMultipleEmployee(EmployeeModel empModel)
{
    //CODE HERE HOW TO HANDLE LIST BOX VALUES FOR EACH EMP       
}

模型

public class EmployeeModel 
{
    public string[] Reimbursement{get; set;}
    public string[] EmployeeID{get; set;}
}

public class NewWOModel
{
    public List<MultipleEmployeeModels> MultipleEmployeeModels{get; set;}
    public List<ReimbursementModel> ReimbursementModels{get; set;}
}

public class MultipleEmployeeModels
{
    public string EmployeeNo{get; set;}
    public int EmployeeID{get; set;}
}

public class ReimbursementModel
{
    public int ReimbursementID{get; set;}
    public string ReimbursementName{get; set;}
}

标签： jqueryajaxasp.net-mvcasp.net-core-2.0

解决方案

由于您在 Employee 和 Reimbursement 之间存在关系，因此您需要更改模型以反映该关系（您所拥有的只是 2 个独立的集合）。您需要以下视图模型

public class EmployeeVM
{
    public int EmployeeID { get; set; }
    .... // other properties of Employee that you want in the view
    public int[] SelectedReimbursements { get; set; } // the selected reimbursements for an employee
}
public class EmployeeCollectionVM
{
    public List<EmployeeVM> Employees { get; set; }
    public IEnumerable<ReimbursementModel> ReimbursementOptions { get; set; }
}

并在 GET 方法中传递EmployeeCollectionVM给视图的实例，这将是

@model EmployeeCollectionVM
<form id="frmWODetail" asp-action="EditMultipleEmployee" ....... >
    ....
    @for(int i = 0; i < Model.Employees.Count; i++)
    {
        <input type="hidden" asp-for="Employees[i].EmployeeID />
        <select asp-for="Employees[i].SelectedReimbursements" asp-items="@(new SelectList(Model.ReimbursementOptions,"ReimbursementID","ReimbursementName"))" multiple></select>
    ....
</form>

这将发回

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<JsonResult> EditMultipleEmployee(EmployeeCollectionVM model)

推荐阅读