Question

我有三个下拉列表（lagfunc，Category，Language）。选择类别和语言后，可以选择产品。然后我需要从服务器加载产品下拉列表的数据：

所有下拉列表都将数据从服务器加载为JSON
产品下拉列表的数据由 CategoryId （int）+ 语言（字符串）

Answer 1

解决此问题需要：

带输入字段的MVC视图（Kendo使用javascript生成下拉列表）
用于KendoUI下拉逻辑和数据绑定的JavaScript
具有为下拉菜单提供JSON数据的操作的控制器
过滤数据的特殊类（产品下拉数据绑定需要过滤）

一步一步：

<强> 1。 MVC查看

Product

<强> 2。 MVC视图脚本

<input id="Category" required="required" name="Category" />
<input id="Language" required="required" name="Language" />
<input id="ProductId" required="required" name="ProductId" />

第3。控制器方法

<script>
    $(document)
        .ready(function () {
            var categories = $("#Category")
                .kendoDropDownList({
                    autoBind: false,
                    optionLabel: "Select category...",
                    dataTextField: "Name",
                    dataValueField: "Id",
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: "@Html.Raw(Url.Action("GetProductCategories", "OfflineLicenses"))"
                    }
                }
            }).data("kendoDropDownList");


            var languages = $("#Language")
                .kendoDropDownList({
                    autoBind:false,
                    optionLabel: "Select language...",
                    dataTextField: "Name",
                    dataValueField: "Id",
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: "@Html.Raw(Url.Action("GetProductLanguages", "OfflineLicenses"))"
                        }
                    }
                })
                .data("kendoDropDownList");

            var products = $("#ProductId")
                .kendoDropDownList({
                    autoBind: false,
                    enable: false,
                    optionLabel: "Select product...",
                    dataTextField: "Name",
                    dataValueField: "Sku",
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "@Url.Action("GetProducts", "OfflineLicenses")",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json; charset=utf-8"
                            },
                            parameterMap: function (options) {
                                return JSON.stringify(options);
                            }
                        }
                    }
                }).data("kendoDropDownList");

                languages.bind("cascade", cascade);
                categories.bind("cascade", cascade);

                function cascade() {
                    if(languages.value() && categories.value()) {
                        products.enable(true);
                        products.dataSource.filter([
                            { field: "Language", operator: "eq", value: languages.value() },
                            { field: "CategoryId", operator: "eq", value: parseInt(categories.value()) },
                        ]);
                    } else {
                        products.value("");
                        products.enable(false);
                    }
                }
        });
</script>

<强> 4。剑道过滤类

public ActionResult GetProductLanguages()
{
    return Json(Languages.Select(x => new { Id = x.Name, x.Name }).ToList(), JsonRequestBehavior.AllowGet);
}

public ActionResult GetProductCategories()
{
    return Json(Categories.Select(x => new { x.Id, x.Name }).ToList(), JsonRequestBehavior.AllowGet);
}

public ActionResult GetProducts([FromUri]FilterContainer filter = null)
{
// use filter by your own

return Json(Products.OrderBy(x => x.Name)
            .Select(x => new { Sku = x.Sku, x.Name }).ToList(), JsonRequestBehavior.AllowGet);
}

不要忘记检查您的属性名称（我在此示例中使用了一些特殊的属性名称）。

KendoUI下拉列表取决于服务器筛选的另一个下拉菜单

1 个答案: