javascript - 在 POST 上使用 JQuery 创建双下拉 SelectList 时返回 0。ASP.Net CORE 2.1

问题描述

我创建了两个下拉列表，其中一个充当另一个的过滤器。因此，通过下拉列表Customer选择了一个客户，并且在下拉列表中只显示了一组有限的 ClientUsers ClientUser。我使用 Jquery 函数来实现这一点。

选择效果很好，但是当我发布表单时，ClientUser 设置为 0，而不是选择。

视图如下（为便于阅读而简化）：

@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>
}

是CaseViewModel：

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

我的模型Case是：

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

}

最后我的控制器是：

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

标签： javascriptjqueryasp.netasp.net-core

我无法重现您的问题：

代码的不同部分是我手动创建了 Customer/ClientUser 但这不应该是问题原因：

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

您可以在您的页面中搜索“ClientUserId”以确认其他功能是否重置了该值。

作为一种解决方法，您还可以：

在您的页面中创建一个隐藏字段并绑定到您的模型属性，创建选择更改事件 javascript 函数以根据选择设置值。
使用 Jquery 获取选中的意见，使用 Ajax 调用 action 函数并将值作为参数传递。

javascript - 在 POST 上使用 JQuery 创建双下拉 SelectList 时返回 0。ASP.Net CORE 2.1

问题描述

解决方案

推荐阅读