Jquery 用JSON填充MVC DropDownListFor

正如您看到的，尝试使用JSON从控制器加载DropDownList，但缺少一些内容。如何让项目下拉？

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

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

---

在使用ASP.NETMVC时，我建议将逻辑分开。 这是一个工作示例：

型号：

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

和两种观点：

索引：

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

如果使用不带JQuery的代码，可以避免局部查看

p、 很抱歉，我没有考虑到您想要返回JSON。 如果使用JSON，请查看

---

但我不明白为什么要将helper与JSON结合使用（也许我错了）。

一个小改进-add

var dropdown=$（'ProductType'）$getJSON（）

之前添加code>并使用

下拉菜单。追加（…）因此元素被缓存（避免每次搜索DOM）这是一个好的观点，@Stephen。我已经更新了代码示例以纳入您的建议，将下拉选择从循环中移出。我将让用户决定是否需要在
$.getJSON
调用之外执行此操作，也就是说，如果此代码位在其生命周期中被多次调用。
public ActionResult ProductDrop()
{
    var list = new List<DropDownListItem>();
    list.Add(new DropDownListItem { 
        Text = "Short", 
        Value = ((byte)Products.Short) 
    });

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

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

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>

@model MvcApplication1.Models.ItemsModel

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