使用json方法和js绑定数据

Question

我正在尝试将数据检索到下拉列表， 使用 json， 该程序可以运行，但下拉列表显示一个白名单，通过检查，数据在那里但不显示

控制器：

    public IActionResult GetClient()
    {
        var clientList = (from client in _context.Clients
                          select new SelectListItem()
                          {
                              Text = client.Nom,
                              Value = client.Id.ToString(),
                          }).ToList();

        clientList.Insert(0, new SelectListItem()
        {
            Text = "----Select----",
            Value = string.Empty
        });

        return Json(clientList);
    }

脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Clients/GetClient",
            success: function (data) {
                $.each(data, function () {
                    $("#ClientId").append($("<option></option>").val(this['Value']).html(this['Text']));

                });

            }
        });
    });
</script>

文件代码 Html：

                </div>
                <div class="alert-danger" asp-validation-summary="ModelOnly"></div>
                <label asp-for="ClientId"></label>
                <select asp-for="ClientId"
                        class="form-control"
                        asp-items="@(new SelectList(Enumerable.Empty<SelectListItem>(),"Value", "Text"))">
                </select>
            </div>

            <div>

谢谢你的帮助

Answer 1

下拉列表显示白名单，通过检查，数据是有的，但不显示

问题很明显。如果您检查 HTML，就会看到。 value 和 text 为小写，但您在代码中使用了大写的 val(this['Value']).html(this['Text']))。 您可能知道，默认情况下，JSON 对象键是小写的。

笔记：只需替换下面的 sn-p 即可完全解决您的问题。

解决方案：

  $("#ClientId").append($("<option></option>").val(this['value']).html(this['text']));

输出：