handle multiselect list box values in asp.net core form submit with multiple records

Question

In ASP.NET CORE 2.0 , I am creating an Ajax form. Multiple employee can be updated in this form. There is an employee number and a multi-select list box to select reimbursement for an employee.
Problem is how to handle Reimbursement values because multiple items can be selected from list box. Form will be submitted as key-value pair.In the case of Reimbursement, Key is Reimbursement and values will be multiple. Therefore, how can it be checked what reimbursement was selected for which 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>

Controller

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

Model

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

Your model is wrong. If you are wanting to select multiple reimbursements for each employee, you need a model with properties `string EmployeeID and `string[] Reimbursement` and pass a collection of that model — , May 01 '18 at 08:34
But there will be multiple employee in Model.MultipleEmployeeModels — M.Sharma, May 01 '18 at 08:39
Yes I know - which is why I said to pass a collection of that model. — , May 01 '18 at 08:40
That means you are saying to change EmployeeModel. Is this correct? if yes then that looks wrong because on form there will be multiple employee with different employee ID. When form is submitted it goes to controller action as an array in key-value pair. — M.Sharma, May 01 '18 at 08:47
Yes - it will contain `string EmployeeID` (not `string[]`) and the model in your view will be `@List` and you use a `for` loop to generate the form controls (not a `foreach` as explained in [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943)) — , May 01 '18 at 08:49
But that is not my requirement. Problem is when I submit the form how to store the result in a model in action method. sorry, if I could not explain problem. Please check my action method. — M.Sharma, May 01 '18 at 09:01
What do you mean _But that is not my requirement_? What is your requirement? — , May 01 '18 at 09:06
Problem is when I submit the form how to store the result in a model in action method. Please check my updated code. — M.Sharma, May 01 '18 at 09:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170134/discussion-between-stephen-muecke-and-m-sharma). — , May 01 '18 at 09:08
Passing array in a form is often a litle tricky. Perhaps you need to form your markup code a litle better. You should take a look at this, it might help --> https://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx — gardarvalur, May 01 '18 at 22:06
@StephenMuecke your suggestion show me a way to solve my problem. If you post your comment as an answer, I will accept that. I updated my question with correct EmployeeModel. — M.Sharma, May 02 '18 at 05:42

score 1 · Accepted Answer · 2018-05-04T02:15:38.293

Since you have a relationship between Employee and Reimbursement, you need to change you model(s) to reflect that relationship (all you have is 2 independent collections). You need the following view models

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

and in the GET method you pass and instance of EmployeeCollectionVM to the view, which will be

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

which will post back to

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

handle multiselect list box values in asp.net core form submit with multiple records

1 Answers1