ASP.NET MVC Html.DropDownList populated by Ajax call to controller?

I wanted to create an editor template for a field type that is represented as a dropdownlist. In the definition of the editor template I would like to populate the DropDownList using a call to an action on the controller returning the results as JSON - Any ideas how to do this?

E.g something like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TheFieldType>" %>
<%= Html.DropDownList(.....


In the editor template provide an empty dropdown:

<%= Html.DropDownListFor(
    x => x.PropertyToHoldSelectedValue, 
    "-- Loading Values --",
    new { id = "foo" }) 

Then setup a controller action that will return the values:

public class FooController: Controller
    public ActionResult Index()
        return Json(new[] {
            new { Id = 1, Value = "value 1" },
            new { Id = 2, Value = "value 2" },
            new { Id = 3, Value = "value 3" },
        }, JsonRequestBehavior.AllowGet);

And then populate the values using AJAX:

$(function() {
    $.getJSON('/foo/index', function(result) {
        var ddl = $('#foo');
        $(result).each(function() {
                .attr('value', this.Id)

I know this post is a few years old but I found it and so might you. I use the following solution and it works very well. Strong typed without the need to write a single line of Javascript.

You can download it via Visual Studio as a NuGet package.

Need Your Help

Multi line string with arguments. How to declare?


Let's say I have an extremely long string with arguments that I want to create.

Visual Studio Immediate window: how to see more than the first 100 items

visual-studio debugging immediate-window

I am trying to see the properties of an object with over 300 properties in the Immediate Window of Visual Studio 2005. Only the first 100 items are displayed, followed by this caption: