Fill MVC DropDownListFor with JSON

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)

As you see trying to load DropDownList from controller with JSON but something is missing. How can I get items to dropdown ?

Peter · Answer 1 · 2015-05-22T13:29:27.700

2

First, you need to update your controller action to return json:

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

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

Then, you need to create the callback in your jquery code that will loop over the results of the $.getJSON call and append the options to your select element. Something like this:

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

edited May 22 '15 at 13:29

answered May 21 '15 at 17:45

Peter

12,541
3
34
39

One minor improvement - add `var dropdown = $('#ProductType');` before `$getJSON()` and use `dropdown.append(..);` so the element is cached (avoid searching the DOM each time) – May 22 '15 at 00:39
Good point, @Stephen. I've updated the code sample to incorporate your suggestion, moving the dropdown selection out of the loop. I'll leave it to the user to decide if this needs to be done outside the `$.getJSON` call - that is, if this bit of code is called more than once in its lifetime. – Peter May 22 '15 at 13:28

score 0 · Accepted Answer · edited May 23 '17 at 12:05

As using ASP.NET MVC I would suggest to separate the logic. This is working example:

Model:

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

Controller action:

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

And two views:

Index:

@{
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>

and PartialView:

@model MvcApplication1.Models.ItemsModel

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

You can avoid partial view if you use the code without JQuery

p.s. Sorry I didn't take to account that you want to return JSON. In case with JSON take a look to https://stackoverflow.com/a/5246804/4121714 But I don't see why you want to use helper with JSON (maybe I'm wrong).

Fill MVC DropDownListFor with JSON

2 Answers2