CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-core-mvcasp.net-core-2.1
whiskytangofoxtrot
whiskytangofoxtrot

Reputation: 987

How do I post back all selected items in a multi-select list so it is included in my view model?

I have an ASP.Net Core 2.1 MVC website I am working on.

In one of my views, I have set up two multi select lists to allow the client to assign users to a site by providing a list of all unassigned users in the left hand list and a list of assigned users on the right hand list, using Esua Silva's example for html/javascript/scss. This is working just fine.

For the post back, I realized that I need to select all of the items in the new "Assigned Users" list at submit so I am using javascript to set all of the options in the "Assigned Users list to true when the user clicks the update (submit) button.

However, I am not getting the list of users in my model so I can work with them in the controller on post back. The list of assigned users in the model always has a count of 0 when it is passed into the controllers POST method.

Here is my multi-select list HTML in the view.

<!-- User Assignment Tab -->
<div role="tabpanel" class="tab-pane" id="assignUsersTab" aria-labelledby="assign-users-tab">

    <div class="card-body ml3 mr3">

        <div class="row">


            <div class="col-5">
                <label>Users Assigned to Site</label>
                <select multiple="multiple" id="lstBox1" name="AssignedUserList" size="10"  asp-items="@(new SelectList(Model.AssignedUserList, "UserId", "Name"))" class="form-control">
                </select>
            </div>

            <div class="col-2 text-center subject-info-arrows pt-5">
                <input type="button" id="btnAllRight" value=">>" class="btn btn-default"/><br/>
                <input type="button" id="btnRight" value=">" class="btn btn-default"/><br/>
                <input type="button" id="btnLeft" value="<" class="btn btn-default"/><br/>
                <input type="button" id="btnAllLeft" value="<<" class="btn btn-default"/>
            </div>

            <div class="col-5">
                <label>Unassigned Company Users</label>
                <select multiple="multiple" id="lstBox2" size="10" name="UnassignedUserList" asp-items="@(new SelectList(Model.UnassignedUserList, "UserId", "Name"))" class="form-control"></select>
            </div>
            <div class="clearfix"></div>

        </div>


    </div>

</div>

Here is my view model.

public class EditSiteViewModel
{
    public int Id { get; set; }

    [Required]
    [StringLength(50, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 2)]
    [Display(Name = "Site Name")]
    public string SiteName { get; set; }

    [Required]
    [Display(Name = "Company ID")]
    public int CompanyId { get; set; }

    [Display(Name = "Company Name")]
    public string CompanyName { get; set; }

    [Display(Name = "App ID")]
    public string AppId { get; set; }

    [Display(Name = "App Key")]
    public string AppKey { get; set; }

    [Display(Name = "Admin Site")]
    public bool IsAdminSite { get; set; }

    [Display(Name = "Enabled")]
    public bool IsEnabled { get; set; }

    public string ReturnUrl { get; set; }

    public List<Company> CompanyList { get; set; }

    public List<UserSiteItem> UnassignedUserList { get; set; }

    public List<UserSiteItem> AssignedUserList { get; set; }

    public List<ApplicationUser> CompanyUsersList { get; set; }

}

Here is my jquery for the SelectAll operation when the user clicks the Update button

$('#site-form').on("submit", selectAll);

function selectAll() {
    $("#lstBox1").find("option").each(function() {
        $(this).attr('selected', true);
    });
    console.log(`SelectAll processed`);
}

I can see the console.log is getting hit when I F12 in Chrome.

Here is my POST edit method signature in my controller.

[HttpPost]
public async Task<IActionResult> Edit(EditSiteViewModel editSite, string cancel)

When I examine the properties of the EditSiteViewModel upon submit, I see that the AssignedUserList property has a count of 0. I can see the other properties in my view model so I know the form post stuff is working, just not for the multi-select list.

I assume that the issue is with how I am trying to associate the multi-select list with the viewmodel property. I have seen SO posts that say I need to put an [] after the text in the name. (i.e. name="AssignedUserList[]" in the

I have spent many hours looking for a solution with no luck. Any help wou.d be greatly appreciated.

Upvotes: 1

Views: 1121

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239430

The posted value of a select, will always be primitive types (string, int, etc.). Accordingly, the posted value of a select multiple will simply be an enumerable of primitive types. As such, you cannot bind directly to something like List<UserSiteItem>. Instead, you need to bind to a property of type List<string> or List<int> (depending on whether you've customized identity's user PK), since in this case, it will be a list of user ids being posted back.

Upvotes: 2

Related Questions