MVC下拉列表根据另一个下拉列表的值进行绑定

时间:2011-05-26 14:23:30

标签: asp.net-mvc cascadingdropdown

我正在尝试编写一个有两个下拉列表的MVC网页。第二个列表的内容取决于第一个列表中选择的内容。

使用内置的MVC函数似乎没有明确的方法来实现这一点,所以我将不得不自己动手。但是我不清楚获得我需要的所有功能的最佳方式......这与“webforms”相同:)

我以类似于this

的方式创建了下拉列表

但是我不知道如何开发这个,以便如果第一个列表中第一个绑定时有一个“selected”元素,这将流经到页面加载时自动绑定第二个列表。

编辑: 为了清楚起见,我有能力将过滤后的列表绑定到第二个下拉列表。但是,如果我的模型包含第一个下拉列表的选择,则选择设置正确,但第二个下拉列表不会填充。

(我是否必须声明我对MVC很新,而Javascript对我来说就像是一些外来语言?)

EDIT2: 我已经考虑过这个了。 很明显,我受到了开发webforms的时间的影响,我还没有“得到”MVC。 我认为我的模型中确实有一些我应该捕获的东西(即如果我已经有了设置两个下拉列表的信息,那么我应该以某种方式在控制器中捕获它并构建预先设置的下拉列表。而不是尝试构建一个“ondatabound”类型的方法并让视图调用(这是我最初的意图)...现在我需要去研究如何做到这一点:)

3 个答案:

答案 0 :(得分:2)

This是我发现的更好的实现之一。这个问题也已经讨论过here

答案 1 :(得分:1)

您的任务包含3个子任务:

  1. 你应该通过使用选定的值来改变第一个ddl的选择,获取第二个ddl的项目列表
  2. 您应该处理由控制器获取第二个ddl的项目列表的操作,并返回具有第二个ddl的已定义内容的视图
  3. 您应该通过获取已处理操作的结果来更新第二个ddl的内容
  4. <script type="text/javascript">

        $(function(){
            $("form #ddl_1").change(function(){
                $.get({ // get request
                       url: "@Url.Action("MyController", "GetList"})" + "/" + $(this).val,
                       success: function(data){ // updating
                           $("form #ddl_2").html(data);
                       }
            })
        });
    

    </script>

    “GetList”操作应该使用参数“id”如果你使用默认路由表(或者你需要在带有自定义的路由表上创建特殊记录)并返回部分视图(没有母版页)和ddl2的选项列表,像这样:

    <option value="1">First</option>
    <option selected value="2">Second</option>
    <option value="3">Third</option>
    

答案 2 :(得分:0)

请参阅此blog post,了解如何在asp.net mvc中创建具有可下载源代码的级联下拉列表。