Question

 public ActionResult ProductDrop()
    {
        var list = new List<DropDownListItem>();
        list.Add(new DropDownListItem { Text = "Short", Value = ((byte)Products.Short) });

    }

Html Part

 @Html.DropDownListFor(x => x.ProductType, new SelectList(Enumerable.Empty<SelectListItem>()))

Jquery Part

$.getJSON('@Url.Action("ProductDrop", "Home")', function (result)

当您看到尝试使用JSON从控制器加载DropDownList但缺少某些内容时。我怎样才能让物品下拉？

Answer 1

首先，您需要更新控制器操作以返回json：

public ActionResult ProductDrop()
{
    var list = new List<DropDownListItem>();
    list.Add(new DropDownListItem { 
        Text = "Short", 
        Value = ((byte)Products.Short) 
    });

    return Json(list, JsonRequestBehavior.AllowGet));
}

然后，您需要在jquery代码中创建回调，该回调将遍历$.getJSON调用的结果，并将选项附加到select元素。像这样：

$.getJSON('@Url.Action("ProductDrop", "Home")', function (result) { 
    var dropdown = $('#ProductType');        
    $.each(result, function() {
        dropdown.append(
            $("<option></option>").text(this.Text).val(this.Value)
        );
    });
});

Answer 2

使用ASP.NET MVC时，我建议将逻辑分开。这是一个有效的例子：

型号：

public class ItemsModel
{
    private readonly List<DropDownListItem> _items;

    public List<DropDownListItem> Items
    { get { return _items; } }

    public ItemsModel()
    { 
        this._items = new List<DropDownListItem>();
    }

    public void addItem(string text, byte value)
    {
        this._items.Add(new DropDownListItem { Text = text, Value = value });
    }
}

public class DropDownListItem
{
    public string Text { get; set; }
    public byte Value { get; set; }
}

控制器操作：

    public ActionResult Index()
    {
        return View();
    }


    [HttpGET]
    public ActionResult ProductDrop()
    {
        ItemsModel model = new ItemsModel();
        model.addItem("Short", 0x24);
        model.addItem("Long", 0x32);
        return PartialView("ProductDrop", model);
    }

两种观点：

指数：

@{
ViewBag.Title = "Index";
 }

 <h2>Index</h2>

 @section scripts
 {
   <script>
      $(document).ready(function() {
        $.ajax({
           url: "@Url.Action("ProductDrop")",
           type: "GET",
           datatype: "text",
           traditional: true,
           async: true,
           cache: false
        }).done(function(result) {
           $(".ddlist").html(result);
        });
      });

   </script>
}

<div class="ddlist"></div>

和PartialView：

@model MvcApplication1.Models.ItemsModel

@Html.DropDownListFor(m=>m.Items, new SelectList(Model.Items, "Value", "Text"))

如果您使用不带JQuery的代码

，则可以避免部分查看

P.S。抱歉，我没有考虑您想要返回JSON。如果使用JSON，请查看https://stackoverflow.com/a/5246804/4121714 但我不明白你为什么要用JSON帮助（也许我错了）。

使用JSON填充MVC DropDownListFor

2 个答案: