Nsryjdtyk

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

    }

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 .