使用 MVC for ddl/html.dropdownlist 将 jquery 与 AJAX 集成

Question

情况： 相关页面上的用户从下拉列表中选择一个类别，然后在旁边的第二个下拉列表中动态填充该类别的所有用户。

正在使用 LinqtoSQL 检索所有数据，我想知道这是否可以完成 a) 在强类型视图中使用 html.dropdownlist？ b) 使用 jquery 来触发所选索引更改的 ajax 请求，而不是“填充”按钮触发器？

抱歉，我没有代码，因为我正在尝试的东西根本不起作用。我在如何在概念上和程序上做到这一点时遇到了麻烦！

非常感谢任何指向示例等的链接！

提前致谢！

编辑：

这正是我想要达到的目标。Dirst the 浏览页面：

       <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

只是在这里大声编码，但您可能想要执行以下操作

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。

Answer 2

我会使用 jquery 和 selectboxes 插件。它有一个很好的界面，可以通过返回 json 的 ajax 调用来进行级联下拉菜单。代码看起来像：

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