How to get value from this Multi Select Dropdown using Razor MVC?

Question

I'm using Javascript Custom Form plugin and trying to get selected value directly in model after user post back Edit view.

This is the code of View.

<select asp-for="Details.CityIdCsv" class="form-control custom-select" placeholder="Select Area" id="assignCity" multiple
                                data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": true, "multipleCompactStyle": true}'>
    <option class="hideme">Select City</option>
    @if (city != null)
    {
        foreach (var list in city)
        {
            foreach (var item in ViewBag.cityList)
            {

                if (item.Id == list)
                {
                    <option value="@item.Id" selected> @item.Name </option>
                }
                else
                {
                    <option value="@item.Id"> @item.Name </option>
                }
            }
        }
    }
    else
    {
        foreach (var item in ViewBag.cityList)
        {
            <option value="@item.Id"> @item.Name </option>
        }
    }
</select>

Controller code is

public async Task<IActionResult> Edit(string id)
        {
            if (!ModelState.IsValid)
                JsonErrorResponse(ModelState);


            var APIRequest = new CityRetrieveRequest
            {
                StateId = null
            };
            var result = await DropdownHelpers.CityRetrive(APIRequest);
            if (result != null)
                ViewBag.cityList = result.Data;
            var response = await UserManagementHelpers.UserRetriveById(this.Crypto.Decrypt(id));
            if (response.StatusCode != 200)
                JsonErrorResponse(response.Message);
            return View("~/Views/GA/Edit.cshtml", response);
        }

This is POST Method

[HttpPost]
        [Route("edit-ga", Name = "Edit GA")]
        public async Task<IActionResult> Edit(UserUpdateRequest request)
        {
            dynamic UpdatedProfile = null;
            if (!ModelState.IsValid)
                JsonErrorResponse(ModelState);

            var APIRequest = new CityRetrieveRequest
            {
                StateId = null
            };
            var result = await DropdownHelpers.CityRetrive(APIRequest);
            var response = await UserManagementHelpers.UpdateUser(request.Details);
            if (response.StatusCode == 200)
            {
                UpdatedProfile = await UserManagementHelpers.UserRetriveById(request.Details.Id);
            }
            return View("~/Views/GA/Edit.cshtml", UpdatedProfile);
        } 

This is Edit page so that first get data and assign to dropdown and then after need to get selected value.

Thanks :)

Answer 1

You didn't provide model in your question so I've created one, installed the plugin and it works. That's posting back selected options.

My model:

public class UserUpdateRequest
{
    public Detail Details { get; set;}
}

public class Detail
{
    public string[] CityIdCsv { get; set; }
}

My controller:

[HttpPost]
public IActionResult Edit(UserUpdateRequest request)
{

}

Form post to server

Details.CityIdCsv: Milan

Details.CityIdCsv: Rome

In debug mode I see request object getting the values. Above post is bound to the model request.Details resulting in an array of strings with the cities.

May be you have other issues with routing or your model doesn't match the form post but you haven't included more information in your question to check that.