jquery - 基于另一个kendo组合框填充kendo MVC组合框

Question

我正在尝试根据对另一个组合框的选择来填充一个组合框的值。我在 MVC 5 应用程序中使用 kendo mvc 组合框。就我而言，我尝试根据 SalesOrganization 组合框的选择填充 Sales Office 组合框。为此，我需要调用 SalesOffice 组合的 Controller 方法并传递国家/地区代码值。我在销售组织的下拉控件的更改事件上编写了一个ajax方法。它调用 Controller 方法。我可以看到该方法触发，但是当我对 javascript 代码中的数据发出警报时，该值显示 [object] [object]。但是状态显示成功 不确定出了什么问题。如何填充销售办公室下拉列表

组合框

  <div class="form-group">
                @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-6">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.Company)
                            .Name("SalesOrganisation")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("Company")
                            .DataValueField("CountryCode")

                            .DataSource(dataSource => dataSource
                            .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))

                            )
                             .Events(e =>
                             {
                                 e.Change("onChange");
                             })
                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.SalesOffice, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-6">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.SalesOffice)
                            .Name("SalesOffice")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("SalesOffice")
                            .DataValueField("SalesOfficeID")

                            .DataSource(dataSource => dataSource
                            .Read(read => read.Action("RequestHeader_SalesOffice", "Request").Type(HttpVerbs.Post))
                            )
                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.SalesOffice, "", new { @class = "text-danger" })
                </div>
            </div>

SalesOffice Controller 方法

    public ActionResult RequestHeader_SalesOffice(string id)
            {
                var response = requestRepository.GetSalesOffice(id).AsQueryable().ProjectTo<SalesOfficeViewModel>();

                var jsonResult = Json(response, JsonRequestBehavior.AllowGet);
                jsonResult.MaxJsonLength = int.MaxValue;
                return jsonResult;
            }

Jquery

 function onChange() {

        alert($('#SalesOrganisation').val());

        var ServiceUrl = "/CC.GRP.MCRequest/Request/RequestHeader_SalesOffice?id=" + $('#SalesOrganisation').val();
        var content = '';
        $.support.cors = true;

        $.ajax({
            type: 'Post',
            url: ServiceUrl,
            async: true,
            cache: false,
            crossDomain: true,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            error: function (xhr, err) {
            },
            success: function (data, status) {
                $('#SalesOffice').val(data);
                alert(data);
                alert(status);
            }
        });
    }

Answer 1

所以根据您的具体情况。顶部组合框应控制第二个组合框中的选择项目。在这种情况下，使用组合框的级联功能将是最简单的方法，并且还可以减少代码量。

因此我们可以摆脱顶部组合框的更改事件。

第二个我们稍微改变一下:

@(Html.Kendo().ComboBoxFor(model => model.SalesOffice)
                            .Name("SalesOffice")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("SalesOffice")
                            .DataValueField("SalesOfficeID")

                            .DataSource(dataSource => dataSource
                                .Read(read =>
                                {
                                    read.Action("RequestHeader_SalesOffice", "Request")
                                        .Type(HttpVerbs.Post)
                                        .Data("GetFilterOption"); <-- This Bit
                                })
                                ).CascadeFrom("SalesOrganisation") //<--This Bit

)

然后我们添加名为 GetFilterOption 的 JavaScript 函数，该函数返回顶部组合框中选定的值。

function GetFilterOption(){
    return { id: $('#SalesOrganisation').val() }

}

然后，这将返回新的结果集，以便您绑定(bind)到组合框，并允许您从新收集的结果中选择值。

您当前的解决方案不起作用的原因是您要返回选择列表并将其绑定(bind)到值而不是底层数据源。

因此，如果您只想更改 javascript 代码，您可以执行以下操作:

success: function (data, status) {
              //  $('#SalesOffice').val(data); <-- FROM THIS TO
                $('#SalesOffice').data('kendoComboBox').setDataSource(data); 
                alert(data);
                alert(status);
            }

希望这能回答您的问题。如有任何问题请告诉我，我将更新答案以反射(reflect)任何更改。

编辑

通过聊天与 Tom 进行多次尝试和错误后，我们找到了添加 .Filtering("Contains") 的解决方案

然后在组合框中添加.ServerFiltering(true)，最终结果如下:

@(Html.Kendo().ComboBoxFor(model => model.SalesOffice)
                            .Name("SalesOffice")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("SalesOffice")
                            .DataValueField("SalesOfficeID")
                            .Filter("Contains")
                            .DataSource(dataSource => dataSource
                                .Read(read =>
                                {
                                    read.Action("RequestHeader_SalesOffice", "Request")
                                        .Type(HttpVerbs.Post)
                                        .Data("GetFilterOption"); <-- This Bit
                                })
                                 .ServerFiltering(true)
                                ).CascadeFrom("SalesOrganisation") //<--This Bit

)