How can I bind multi select list items that have been dynamically added using the .net core framework?

35
October 17, 2019, at 09:20 AM

I am using .net core 2.2 Razor Pages to build my current project. I want to be able to have 2 multi-select lists in which I pass values from one list to the other and vice versa. I am able to load the left side list with the values required using binding. I also have the buttons to transfer X amount of selected items to the right side list. This is done using jquery. However when I submit my form and get the OnPostAsync The values from the list on the right side are lost and the ones on the left side are as if they where never removed.

I understand that to dynamically add controls that bind to a property you require adding all the necessary attributes. I have compared the generated html from the left list (generated by .net core) to the right side list (generated by me using jquery) and they are identical so I don't see what attributes might be missing...

Below is a sample of the code I am working with.

```html
<table width="100%">
<tr>
    <td rowspan="2" class="role-fromto">
        <select asp-for="RolesLeft" asp-items="@(new SelectList(Model.RolesLeft, "Id", "Name"))" class="form-control" multiple>
        </select>
    </td>
    <td class="centered">
        <a id="role-add" class="button-pointer">>></a>
    </td>
    <td rowspan="2" class="role-fromto">
        <select asp-for="RolesRight" asp-items="@Model.RolesRight" class="form-control" multiple>
        </select>
    </td>
</tr>
<tr>
    <td class="centered">
        <a id="role-remove" class="button-pointer"><<</a>
    </td>
</tr>
</table>
```

(Please note there is a submit button as well which performs the OnPostAsync)

The properties that are binding are in my C# code. The left side roles are a list of Role objects while on the right side I made a list of SelectListItem which I will later convert in the OnPostAsync method. The left side list is populated in the OnGetAsync method during loading (I am not putting this code here because it works and I want to avoid confusion of bloat code):

```C#
[BindProperty]
public List<Role> RolesLeft { get; set; }
[BindProperty]
public List<SelectListItem> RolesRight { get; set; } = new List<SelectListItem>();
```

Finally the javascript that runs when I select the >> link to move over the selected items to the right side executes the following code:

```JavaScript
$(document).ready(function () {
    $("#role-add").on("click", function () {
        moveRoles("RolesLeft", "RolesRight");
    });
    $("#role-remove").on("click", function () {
        moveRoles("RolesRight", "RolesLeft");
    });
    function moveRoles(from, to) {
        var items = $("#" + from + " option:selected").map(function () {
            return $(this);
        }).get();
        for (i = 0; i < items.length; i++) {
            $("#" + from + " option[value='" + items[i].val() + "']").remove();
            $("#" + to).append($('<option />', {
                value: items[i].val(),
                text: items[i].text()
            }));
        }
    }
});
```

I'm not sure if I missed anything but if so please let me know and I will update the post to provide more information. How can I get this working properly? I have been able to dynamically generate other types of controls and get it to bind but this one I have not had any success.

READ ALSO
resize svg wrapped in div that is wrapped in div

resize svg wrapped in div that is wrapped in div

I'm having a problem coverting inline SVG to be wrapped in divsI was using nested SVGs before and now I'm told I have to use nested divs with inline SVG

6
responsive grid of different sized images with real world proportions and scale

responsive grid of different sized images with real world proportions and scale

I have a laravel site that loads product images into a grid-container--fit row through a @foreach loopThe images are all sorts of different sizes, some are portrait and some are landscape

15
How to include jar files with java file and compile in command prompt

How to include jar files with java file and compile in command prompt

I have 3 jar files and ajava file that depends on these jar files

57
How can I put multiple checkbox results in a WHERE clause in SQL?

How can I put multiple checkbox results in a WHERE clause in SQL?

I need to write a WHERE clause against a varied number of categories in my databaseHow would I best approach this?

59