Question

我有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（）属性中指定的任何值。

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

如何从我的行动中同时获得第一个和第二个下拉列表的选定值？

Answer 1

要在第三个DDL请求其数据时发送第一个DDL的值以及第二个DDL的值，您只需将此值添加到读取的数据函数中请求。

e.g。

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

还要将操作方法签名更改为还有一个参数

public JsonResult GetCascadeOrders(string categories,string products)

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

1 个答案: