ASP .NET Core MVC - Post List data from HTML select control into MVC Controller

Question

I am working on a form for my site of which users can input their account names and then they submit the list of account names.

Below is my HTML of which is inside a form (Please ignore any smelly code, I will sort it).

<div class="form-group">
        <label asp-for="Accounts" class="control-label site-font">Accounts<b style="color: red">*</b></label>
        <select id="account-list" name="accounts[]" multiple="multiple" class="form-control" asp-for="Accounts"></select>
        <div style="margin-top: 1%"></div>

        <input type="text" id="account-name" placeholder="Enter your Account Name" class="form-control" asp-for="Accounts" />
        <div style="margin-top: 1%"></div>
        <select id="platform-list" class="form-control">
            <option>Xbox</option>
            <option>PS4</option>
            <option>PC</option>
        </select>
        <div style="margin-top: 1%"></div>
        <select id="software-list" class="form-control">
            <option>Microsoft Account</option>
            <option>Playstation Network</option>
            <option>Uplay</option>
            <option>Steam</option>
            <option>Discord</option>
            <option>None of the above</option>
        </select>
        <div style="margin-top: 1%"></div>
        <input type="checkbox" id="main-account"/> Main Account
        <div style="margin-top: 1%"></div>
        <input type="button" class="submit-button" value="Add Account" id="add" />
        <span id="account-error" asp-validation-for="Accounts" class="text-danger"></span>
    </div>

My issue is that whenever I click submit I get an Invalid Cast Exception.

My Controller takes a type of Member of which the Accounts property is a list of string.

Below is what the user will see when they have added a few of their accounts, and each row will be an item within the list.

I have used JavaScript to get this working, but I don't think that this will have any effect on the issue, so I haven't included it in the question but if you want to see it then let me know.

If I have missed anything, or the question is unclear then please let me know and I will try to get back to it as soon as possible.

Did you take a look at this? https://stackoverflow.com/questions/1255472/how-does-a-multiple-select-list-work-with-model-binding-in-asp-net-mvc — hardkoded, Nov 10 '17 at 14:52
I just scanned this quickly so correct me if I am wrong but this seems to be if I want to send data from the controller to the view and then send it back? Instead what i am doing is actually creating the list in the view and sending it to the controller. — Brendon, Nov 10 '17 at 14:56
Start by showing your model and the GET method that generated the view. The view you have generated could not possibly bind correctly. — , Nov 10 '17 at 20:49

score 0 · Answer 1 · answered Nov 10 '17 at 15:45

The reason you're getting the error is because the form is posted with something as follows:

"accounts[]" = "SelectedOption1"

"accounts[]" = "SelectedOption2"

"accounts[]" = "SelectedOption3"

....

I think that the easiest way to get around this would be to make the "Accounts" property an array/list of strings. If you are unable to do that you could use JS to store the selected values in a comma-delimited string and post that field to the accounts property instead of the control:

 <select id="account-list" multiple="multiple" class="form-control" asp-for="Accounts">
     <option>Test</option>
     <option>Test 1</option>
     <option>Test 2</option>
     <option>Test 3</option>
 </select>

<input type="hidden" id="accountInternal" name="accounts[]" value="" />

$("form").submit(function () {
    $("#accountInternal").val($("#account-list").val().toString());
    return true;
});

ASP .NET Core MVC - Post List data from HTML select control into MVC Controller

1 Answers1