Интеграция jquery с AJAX с использованием MVC для ddl / html.dropdownlist

Question

Ситуация: Пользователь на рассматриваемой странице выбирает категорию из раскрывающегося списка, который затем динамически заполняет всех пользователей этой категории во втором раскрывающемся рядом с ней.

Все данные извлекаются с использованием LinqtoSQL, и мне было интересно, можно ли это сделать а) Использование html.dropdownlist в строго типизированном представлении? б) Использование jquery для запуска ajax-запроса при выбранном изменении индекса вместо триггера кнопки «заполнить»?

Извините, у меня нет кода, потому что то, что я пробовал, на самом деле не работало вообще. У меня проблемы с тем, как сделать это концептуально и программно!

Буду признателен за любые ссылки на примеры и т. Д.

Заранее спасибо!

EDIT:

Это своего рода то, чего я пытался достичь. 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>

Тогда действие контроллера дома:

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

        return Json(accounts);
    }

Answer 1

Я бы использовал jquery и плагин selectboxes . У этого есть хороший интерфейс, чтобы делать каскадные выпадающие списки с помощью вызова ajax, который возвращает json. Код будет выглядеть примерно так:

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

Answer 2

просто закодировать здесь громко, но вы можете сделать что-то вроде следующего

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

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

со следующим скриптом jQuery

$(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>");
                });
            }
        );
    });
});

это все из головы и может быть некоторые синтаксические ошибки, однако, вы можете получить jist.