Jquery – Integrating jquery with AJAX using MVC for ddl/html.dropdownlist


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 don't have code as what I was trying really wasn't 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!


This is kind of what I was trying to achieve.Dirst the

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



              <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", "*") %>

Then home controller action:

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

        return Json(accounts);

Best Solution

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


with the following jQuery script

$(document).ready(function() {
    $("#dropdownid").change(function() {
            "/Home/Type/" + $("#dropdownid :selected").val(),
            function(data) {
                $.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.