2

次のように、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);
    }

コントローラーのアクションは、ドロップダウンリストの DataValueField() プロパティで指定した値である 1 つのパラメーターのみを受け取ります。

ただし、3番目のドロップダウンリストでは、その中のアイテムが、前のドロップダウンリストだけでなく、最初の2つのドロップダウンリストの両方に依存するようにします。

アクションから、1 番目と 2 番目のドロップダウンリストの両方の選択された値を取得するにはどうすればよいですか?

4

1 に答える 1

4

3 番目の DDL がそのデータを要求したときに、最初の DDL の値を 2 番目の DDL の値とともに送信するには、この値をRead要求のData関数に追加するだけです。

例えば

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

また、アクション メソッドのシグネチャを変更して、もう 1 つの引数を持つようにします。

public JsonResult GetCascadeOrders(string categories,string products)
于 2012-11-29T21:25:05.967 に答える