integrating jquery with AJAX using MVC for ddl/html.dropdownlist

Question

Hi guys,

the situation: a user on the page in question selects a category from a dropdown which then dynamically populates all the users of that category in a second dropdown beside it.

all the data is being retrieved using LinqtoSQL and i was wondering if this can be done a) using html.dropdownlist in a strongly typed view? b) using jquery to trigger the ajax request on selected index change instead of a 'populate' button trigger?

sorry i dont have code as what i was trying really wasnt working at all. I am having trouble with how to do it conceptually and programatically!

will appreciate any links to examples etc greatly!

thanks in advance!

EDIT:

this is kind of what i was trying to achieve.. first the ViewPage:

       <script type="text/javascript">
        $(document).ready
            function TypeSearch() {
                $.getJSON("/Home/Type", null, function(data) {
                    //dont know what to do here

                });

            }
        </script>

        <p>
              <label for="userType">userType:</label>
            <%= Html.DropDownList("userType") %>
            <%= Html.ValidationMessage("userType", "*") %>
          <input  type="submit" runat="server" onclick="TypeSearch()" />

            <label for="accountNumber">accountNumber:</label>
            <%= Html.DropDownList("accountNumber") %>
            <%= Html.ValidationMessage("accountNumber", "*") %>
        </p>

Then home controller action:

    public ActionResult Type()
    {
        string accountType = dropdownvalue;
        List<Account> accounts = userRep.GetAccountsByType(accountType).ToList();

        return Json(accounts);
    }

Answer 1

just coding outloud here but you might want to do something like the following

public void Type(string accountType)
{
    List<Account> accounts = userRep.GetAccountsByType(accountType).ToList();

    Json(accounts).ExecuteResults(this.ControllerContext);
}

with the following jQuery script

$(document).ready(function() {
    $("#dropdownid").change(function() {
        $.getJSON(
            "/Home/Type/" + $("#dropdownid :selected").val(),
            "[]",
            function(data) {
                $("#seconddropdownid").empty();
                $.each(data, function() {
                    $("#seconddropdownid").append("<option>" + this.Property + "</option>");
                });
            }
        );
    });
});

this is all off the top of my head and might be some syntax errors, however, you can get the jist.

Answer 2

I would use jquery and the selectboxes plugin. It has a nice interface to do cascading dropdowns with an ajax call that returns json. Code would look something like:

$(document).ready(function() {
    function TypeSearch() {
        // remove any existing options
        $("#idOfSelect").removeOption(/./);
        var opts = { accountType : $("#idOfParent").val() };
        $("#idOfSelect").ajaxAddOption("/Home/Type", opts, false);
    }
});