KendoUI 级联下拉列表，需要来自 2 个下拉列表的值。答案

【问题标题】：KendoUI cascading dropdownlists, need value from 2 dropdownlists.KendoUI 级联下拉列表，需要来自 2 个下拉列表的值。
【发布时间】：2012-11-17 05:41:21
【问题描述】：

我有 3 个级联下拉列表，如下所示：

<p>
    <label for="categories">Catergories:</label>
    @(Html.Kendo().DropDownList()
          .Name("categories")
          .OptionLabel("Select category...")
          .DataTextField("CategoryName")
          .DataValueField("CategoryId")
          .DataSource(source => {
               source.Read(read => {
                   read.Action("GetCascadeCategories", "ComboBox");
               });
          })
    )
</p>
<p>
    <label for="products">Products:</label>
    @(Html.Kendo().DropDownList()
          .Name("products")
          .OptionLabel("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "ComboBox")
                      .Data("filterProducts");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categories")
    )
    <script>
        function filterProducts() {
            return {
                categories: $("#categories").val()
            };
        }
    </script>
</p>
<p>
    <label for="orders">Orders:</label>
    @(Html.Kendo().DropDownList()
          .Name("orders")
          .OptionLabel("Select order...")
          .DataTextField("ShipCity")
          .DataValueField("OrderID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeOrders", "ComboBox")
                      .Data("filterOrders");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("products")
    )
    <script>
        function filterOrders() {
            return {
                products: $("#filterOrders").val()
            };
        }
    </script>
</p>

这是控制器的样子：

    public JsonResult GetCascadeCategories()
    {
        var northwind = new NorthwindDataContext();

        return Json(northwind.Categories.Select(c => new { CategoryId = c.CategoryID, CategoryName = c.CategoryName }), JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetCascadeProducts(string categories)
    {
        var northwind = new NorthwindDataContext();
        var products = northwind.Products.AsQueryable();

        if (!string.IsNullOrEmpty(categories))
        {
            products = products.Where(p => p.CategoryID.ToString() == categories);
        }

        return Json(products.Select(p => new { ProductID = p.ProductID, ProductName = p.ProductName}), JsonRequestBehavior.AllowGet);
    }

控制器中的 Action 只接受 1 个参数，即您在下拉列表的 DataValueField() 属性中指定的任何值。

但是，对于我的第三个下拉列表，我希望其中的项目依赖于前两个下拉列表，而不仅仅是前一个。

如何从我的操作中同时获取第一个和第二个下拉列表的选定值？

【问题讨论】：

标签： c# asp.net-mvc kendo-ui html.dropdownlistfor cascadingdropdown

【解决方案1】：

要在第三个 DDL 请求其数据时将第一个 DDL 的值与第二个 DDL 的值一起发送，您只需将此值添加到 Read 的 Data 函数 请求。

例如

<script>
    function filterOrders() {
        return {
            categories: $("#categories").val(),
            products: $("#filterOrders").val()
        };
    }
</script>

同时将动作方法签名更改为多一个参数

public JsonResult GetCascadeOrders(string categories,string products)

【讨论】：