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

时间:2016-08-27 07:35:54

标签: c# json ajax asp.net-mvc-5

您好我有一个名为Employee的字段。这是Dropdown。我想使用ajax将数据从db绑定到dropdown。 我尝试了我的水平最好,但它没有正确绑定下拉列表。然后还有一个疑问是必须使用任何通用插件使用ajax ??

将数据绑定到下拉列表

我的模型代码(VisitorsViewModel)

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

我的控制器代码

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

});

2 个答案:

答案 0 :(得分:0)

将一组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

答案 1 :(得分:-1)

您应该能够轻松修改以下内容以使用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。

相关问题