在POST上使用JQuery创建双精度下拉列表时，SelectList返回0。ASP.Net CORE 2.1

Question

I have created two dropdownlists, of which one acts as a filter for the other. So, with dropdown Customer a customer is selected and only a limited set of ClientUsers is presented in in the dropdown ClientUser . I use a Jquery function to make this happen.

The selection works excellent, but when I POST the form the ClientUser is set to 0, instead of the choice.

The View is as follows (simplified for readability purposes):

@model DropDownTester2.Models.CaseViewModel

 <form asp-action="Maak">
     <label asp-for="CaseTitle" class="control-label"></label>
     <input asp-for="CaseTitle" class="form-control" />

     <select id="customerId" asp-for="CustomerId" asp-items='@(new SelectList(ViewBag.customers, "CustomerId", "CompanyName"))'>
          <option>Select Customer Name</option>
      </select>

      <select id="clientUserId" asp-for="ClientUserId" asp-items='@(new SelectList(string.Empty, "ClientUserId", "LastName"))'>
      </select>

      <input type="submit" value="Maak" class="btn btn-default" />
 </form> 

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
        $("#customerId").change(function () {

            var url = '@Url.Content("~/")' + "Case/getClientUserById";

            var ddlsource = "#customerId";

            $.getJSON(url, { id: $(ddlsource).val() }, function (data) {
            //$.getJSON("@Url.Action("getClientUserById","Case")", { id: $(ddlsource).val() }, function (data) {
                var items = '';
                $("#clientUserId").empty();
                $.each(data, function (i, row) {
                    items += "<option value='" + row.value + "'>" + row.text + "</option>";
                });
                $("#clientUserId").html(items);

            })
        });
    });

    </script>
}

The CaseViewModel is:

public class CaseViewModel
{
    public int CaseId { get; set; }
    public string CaseTitle { get; set; }
    public int CustomerId { get; set; }
    public int ClientUserId { get; set; }

    public IEnumerable<Customer> CustomerList { get; set; }       
    public IEnumerable<ClientUser> ClientUserList {get; set;}

My Model for Case is:

public class Case
{
    public int CaseId { get; set; }
    public string CaseTitle { get; set; }
    public string CaseRoleDescription { get; set; }
    public int CustomerId { get; set; }
    public int ClientUserId { get; set; }

    public virtual Customer Customer { get; set; }        
    public virtual ICollection<ClientUser> ClientUsers { get; set; }

}

Finally my controllers are :

// GET: Case/Maak
    public IActionResult Maak()
    {
        ViewBag.customers = _context.Customer.ToList(); 
        return View();
    }

    public JsonResult getClientUserById(int id)
    {
        List<ClientUser> list = new List<ClientUser>();
        list = _context.ClientUser.Where(c => c.Customer.CustomerId == id).ToList();
        list.Insert(0, new ClientUser { ClientUserId = 0, LastName = "Please select a clientuser" });
        return Json(new SelectList(list, "ClientUserId", "LastName"));
    }


    // POST: Case/Maak
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Maak(CaseViewModel model)
    {
        if (ModelState.IsValid)
        {
            var newCase = new Case
            {
                CaseId = model.CaseId,
                CaseTitle = model.CaseTitle,
                CustomerId = model.CustomerId,
                ClientUserId = model.ClientUserId
            };

            _context.Add(newCase);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        ViewData["CustomerId"] = new SelectList(_context.Set<Customer>(), "CustomerId", "CustomerId", model.CustomerId);
        return View(model);
    }

Answer 1

I can't reproduce your issue :

The difference part of codes is that i create the Customer/ClientUser manually but that shouldn't be the issue cause :

    public class Customer {
       public int CustomerId { get; set; }

       public string CompanyName { get; set; }
    }

    public class ClientUser
    {
        public int ClientUserId { get; set; }

        public string LastName { get; set; }
    }

You may search the "ClientUserId " in your pages to confirm whether other function reset the value .

As a workaround, you can also :

1. Create a hidden filed in your page and bind to your model property , create the select change event javascript function to set the value based on the selection .
2. Use Jquery to get the selected opinion , use Ajax to call action function and pass the value as parameter .