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

Posted 2023-05-07

【中文标题】KendoUI 级联下拉列表，需要来自 2 个下拉列表的值。

【英文标题】：KendoUI cascading dropdownlists, need value from 2 dropdownlists.

【发布时间】：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() 属性中指定的任何值。

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

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

【参考方案1】：

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

例如

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

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

public JsonResult GetCascadeOrders(string categories,string products)