无法在 MVC 中使用 Ajax 填充 DropDownList

本文关键字：Ajax 填充 DropDownList MVC | 更新日期: 2023-09-27 18:32:25

一切似乎都正常，但值显示为空。我有 2 个下拉列表，当我选择第一个时，我得到了索引并使用 ajax 填充其他下拉列表。但问题是我没有结果。在 Ajax 中的循环不起作用。我检查了Firefox的Web工具，结果似乎为空，但是在C#代码中，列表包含项目。

所以这是我的阿贾克斯

        $.ajax({
            url: "@Url.Action("ElectionList", "Home")",
            type: "GET",
            dataType: "json",
            data: { electionTypeId: selectedId },
        success: function (data) {

            if (data != null) {
   //HERE IS WORKING
                alert("OK");
                electionCombo.html('');
                $.each(data, function (index,item) {
     //here is not working !!! 
                    alert("hobaaa: " + index);  
                    alert("data: " + item.Text);
                    //    alert(option.ID + "  " + option.politicName);
                    //  electionCombo.append($('<option></option>').val(option.Value).html(option.Text));
                });
            }

这是我的 C# 代码

  [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult ElectionList(int electionTypeId)
    {

        var service = new EvoteServicesProviderClient();

        try
        {
        var electtionType = service.getAllElectionTypes().FirstOrDefault(e => e.ID == electionTypeId);
           var  res =
                service.searchElectionByType(electtionType.electionTypeName)
                    .ToList()
                    .Where(e => e.startDate >= DateTime.Now)
                    .Select(e => new SelectListItem
                    {
                        Value = e.ID.ToString(),
                        Text = e.politicName
                    });

            var list = new SelectList(res, "Value", "Text");
            return Json(list, JsonRequestBehavior.AllowGet);
         //   return Json(new { success = true, result = list },
           //      JsonRequestBehavior.AllowGet); 
        }
        catch{}
        return Json(new { success = false, message = "An error occured" }, JsonRequestBehavior.AllowGet);

    }

这是 HTML 端

@using (Html.BeginForm("ElectionList", "Home", FormMethod.Post, new {@class = "form-horizontal", id = "electionlistform"}))
{
    @Html.LabelFor(m => m.SelectedElectionId, new {@class = "col-md-2 control-label"})
    @Html.DropDownListFor(m => m.SelectedElectionId, Model.ElectionList, new {@class = "form-control", id = "electionList"})
    @Html.ValidationMessageFor(m => m.SelectedElectionId)
}

正如我所写，列表不是空的（在行动结果选举列表）

我错过了什么？

无法在 MVC 中使用 Ajax 填充 DropDownList

试试这个：

$.each(data, function () {
 //here is not working !!! 
                alert("hobaaa: " + this.Value);  
                alert("data: " + this.Text);
 });

可以直接访问该属性，因为它是 json。

更新

只需返回列表服务器端：

var  res =
            service.searchElectionByType(electtionType.electionTypeName)
                .ToList()
                .Where(e => e.startDate >= DateTime.Now)
                .Select(e => new SelectListItem
                {
                    Value = e.ID.ToString(),
                    Text = e.politicName
                });

                return Json(res, JsonRequestBehavior.AllowGet);

当我需要填写下拉列表时，我所做的与您相同，但我使用的是 for 循环而不是每个循环（也许它是一样的，但对我来说它正在工作）。顺便说一下，在您的 ajax 代码示例中，您不会关闭 ajax 函数。希望在您的真实代码中没关系。 

   $.ajax({
            url: "@Url.Action("ElectionList", "Home")",
            type: "GET",
            dataType: "json",
            data: { electionTypeId: selectedId },
        success: function (data) {

            if (data != null) {
   //HERE IS WORKING
                alert("OK");
                electionCombo.html('');
                for (i in data) {
                    var result = data[i];
                    //  electionCombo.append($('<option></option>').val(result.Value).html(result.Text));
                }
            }
   });

顺便说一句，如果它仍然不起作用，您可以尝试使用所需选项的ViewModel 

public class ViewModelExample
{
    public Int32 ValueOption { get; set; }
    public String TextOption { get; set; }
}

并在您的列表中使用它而不是选择列表。使用视图模型，我使用 json 获取值没有问题。

相关文章：