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? stackoverflow.com/questions/1255472/… — hardkoded
– hardkoded, Commented Nov 10, 2017 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
– Brendon, Commented Nov 10, 2017 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. — user3559349
– user3559349, Commented Nov 10, 2017 at 20:49

combatc2 · Accepted Answer · 2017-11-10 15:45:02Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related