在使用Ajax的ASP.NET MVC的Kendo UI中级联DropDownList?

时间:2012-09-09 03:25:50

标签: asp.net-mvc telerik telerik-mvc kendo-ui

有人可以使用ajax在ASP.NET MVC的Kendo UI中提供级联下拉列表的示例吗?我在谈论Helper方法(@Html.Kendo().DropDownList())我知道子下拉列表必须调用CascadeFrom("ParentDropDownListName")但是控制器操作是什么样的?当我尝试连接它们时,我将传递给子下拉列表操作方法的参数的null异常。我假设在幕后,剑道正在提取父选择的DataValueField并将其附加到控制器动作请求到子下拉列表,但似乎不会发生这种情况。

更新:我认为这必须与“过滤器”集合一起发送到我的控制器操作。我只是不知道如何在我的控制器操作中处理传入的过滤器集合/对象。

1 个答案:

答案 0 :(得分:6)

我想你已经阅读了使用cshtml代码源的Kendo UI网站上cascading dropdownlist的示例。

第二个下拉列表对应于产品,并按以下方式从类别级联:

    @(Html.Kendo().DropDownList()
      .Name("products")
      .OptionLabel("Select product...")
      .DataTextField("ProductName")
      .DataValueField("ProductID")
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetCascadeProducts", "ComboBox")
                  .Data("filterProducts")
                  .Type(HttpVerbs.Post); // This line serves to accept POST requests
          })
          .ServerFiltering(true);
      })
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("categories")

(请注意,我必须添加接受发布请求的行)

通过此示例,您将需要一个具有以下语法的控制器:

    [HttpPost]
    public JsonResult GetCascadeProducts(int category)
    {
        List<Product> Products = new List<Product>();

        Products.Add(new Product(1, 0, "Chai"));
        Products.Add(new Product(1, 1, "Chang"));
        Products.Add(new Product(1, 2, "Guarana Fantastica"));
        Products.Add(new Product(2, 0, "Aniseed Syrup"));
        Products.Add(new Product(2, 1, "Seasoning"));

        var ProductsInCategory = from p in Products where p.CategoryID == category select p;

        return Json(ProductsInCategory);
    }

我班级的模板如下:

    public class Product
    {
        public int CategoryID { get; set; }
        public int ProductID { get; set; }
        public string ProductName { get; set; }

        public Product(int category, int id, string name)
        {
            CategoryID = category;
            ProductID = id;
            ProductName = name;
        }
    }

如果你有正确的Javascript功能:

function filterProducts() {
    return {
        category: $("#categories").val()
    };
}

category 应该与controller方法中的参数名称相同) 通常,一切都应该正常工作!