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

Question

我正在尝试根据对另一个组合框的选择来填充一个组合框的值。我在 MVC 5 应用程序中使用 kendo mvc 组合框。在我的例子中，我试图根据 SalesOrganisation 组合 box.In 的选择来填充 Sales Office 组合框，为此我需要调用 SalesOffice 组合的控制器方法并传递国家代码值。我已经写了一个 ajax 方法来处理销售组织下拉控件的更改事件。它调用控制器方法。我可以看到方法触发，但是当我对 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 控制器方法

    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

所以根据你的具体场景。顶部组合框应控制来自第二个组合框的 select 项。在这种情况下，使用组合框的 cascading 功能将是最简单的方法，并且还可以减少您拥有的代码量。

所以我们可以去掉顶部组合框的更改事件。

第二个我们稍微修改一下：

@(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 函数，它 return 是来自顶部组合框的 selected 值。

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

}

这将 return 返回新的结果集供您绑定到组合框，并允许您 select 来自新收集的结果的值。

您当前的解决方案不起作用的原因是您要返回 select 列表并将其绑定到值而不是基础数据源。

因此，如果您只想更改 javascript 代码，您可以这样做：

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

希望这能回答您的问题。如有任何问题，请告诉我，我会更新答案以反映任何更改。

编辑

通过聊天与 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

)

Answer 2

[{SalesOfficeID: 58, SalesOfficeCode: "XX", SalesOffice: ""},…]
0
:
{SalesOfficeID: 58, SalesOfficeCode: "XX", SalesOffice: ""}
1
:
{SalesOfficeID: 57, SalesOfficeCode: "8118", SalesOffice: "T&T"}
2
:
{SalesOfficeID: 56, SalesOfficeCode: "8117", SalesOffice: "International"}
3
:
{SalesOfficeID: 55, SalesOfficeCode: "8116", SalesOffice: "Central"}
4
:
{SalesOfficeID: 54, SalesOfficeCode: "8115", SalesOffice: "CS Coverage"}
5
:
{SalesOfficeID: 53, SalesOfficeCode: "8114", SalesOffice: "CS South"}
6
:
{SalesOfficeID: 52, SalesOfficeCode: "8113", SalesOffice: "CS Scotland"}
7
:
{SalesOfficeID: 51, SalesOfficeCode: "8112", SalesOffice: "CS North"}
8
:
{SalesOfficeID: 50, SalesOfficeCode: "8111", SalesOffice: "CS Major Accounts"}
9
:
{SalesOfficeID: 49, SalesOfficeCode: "8110", SalesOffice: "CS London"}
10
:
{SalesOfficeID: 48, SalesOfficeCode: "8109", SalesOffice: "IAM - PS"}
11
:
{SalesOfficeID: 47, SalesOfficeCode: "8108", SalesOffice: "IAM - I&C"}
12
:
{SalesOfficeID: 46, SalesOfficeCode: "8107", SalesOffice: "Edinburgh"}
13
:
{SalesOfficeID: 45, SalesOfficeCode: "8106", SalesOffice: "Manchester"}
14
:
{SalesOfficeID: 44, SalesOfficeCode: "8105", SalesOffice: "Blackfriars FM"}
15
:
{SalesOfficeID: 43, SalesOfficeCode: "8104", SalesOffice: "Blackfriars FMR"}
16
:
{SalesOfficeID: 42, SalesOfficeCode: "8103", SalesOffice: "Reading"}
17
:
{SalesOfficeID: 41, SalesOfficeCode: "8102", SalesOffice: "Hatfield BTSI"}
18
:
{SalesOfficeID: 40, SalesOfficeCode: "8101", SalesOffice: "Hatfield PS"}
Name

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

Populating kendo MVC combo box based on another kendo combobox

asp.net-mvc

jquery

kendo-ui

kendo-combobox