如何将json数据绑定到Asp.MVC5中的下拉列表

本文关键字：MVC5 下拉列表 Asp json 数据绑定 | 更新日期: 2023-09-27 18:04:29

嗨，我有一个名为Employee的字段。它是Dropdown。我想绑定数据从数据库到下拉使用ajax。我尽了最大的努力，但它没有正确地与下拉框绑定。然后还有一个疑问是必须使用任何一般的插件绑定数据下拉列表使用ajax??

My Model Code(VisitorsViewModel) 

  public Nullable<System.Guid> EmployeeID { get; set; }

My Controller Code

  public JsonResult GetEmployee()
    {
        var objEmployeelist = (from e in db.Employees  select e).ToList();
        return Json(objEmployeelist,JsonRequestBehavior.AllowGet);
    }

我认为

  @Html.Label("Employee Name")
  @Html.DropDownListFor(model =>model.EmployeeID, new SelectList(string.Empty,"Value","Text"),"Select", new{@class="form-control"})
我Jquery 

$(function () {
    debugger
   $.ajax(
           '@Url.Action("GetEmployee", "NextFollowUp", new { Area = "Sales" })', {
           type: "GET",
           datatype: "Json",
           success: function (data) {
               debugger;
               $.each(data, function (index, value) {
                   $('#EmployeeID').append('<option value ="' + value.EmployeeID + '">' + value.DisplayName + '</option>');
               });
           }
      });

});

如何将json数据绑定到Asp.MVC5中的下拉列表

将Employees的集合添加到ViewModel或Viewbag中，然后将集合绑定到Dropdown。根据我们的讨论，您想要在ViewModel中添加一个集合，这就是:

视图模型

public class VisitorsViewModel
{
    public string EmployeeId
    {
        get;
        set;
    }
    public IEnumerable<Employee> Employees
    {
        get;
        set;
    }
}
//There might be other properties as well in this class
public class Employee
{
    public Guid? EmployeeId
    {
        get;
        set;
    }
    public string DisplayName
    {
        get;
        set;
    }
}

视图:

 @Html.DropDownListFor(model =>model.EmployeeId, new SelectList(Model.Employees,"EmployeeId","DisplayName"),"Select", new{@class="form-control"})

我在这里创建了一个提琴- https://dotnetfiddle.net/zC3UR6

您应该能够轻松地修改以下内容以使用Ajax而不是Razor。

请按你的口味修改。

 <select name="ddlX" id=""ddlX">
    @foreach (var item in model)
                        {
 <option value="@item.EmployeeID" selected="selected">@item.EmployeeName</option>
}
   </select>

然后在服务器端，你可以决定你要循环多少项。

 for (int i = cursor; i < endNumber; i++)
            {
                string ddlID = "ddlX";
                var selectedDDLitem = Request.Form[ddlX];
 }

这也适用于分页列表。

如果你喜欢，我可以做一些html和css的东西来展示如何使用一个div来放置返回的html。我不确定你是否在问如何填充div或如何正确地循环数据。

我这样回答的原因是因为它也适用于MVC6。

相关文章：