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

时间:2017-04-05 11:07:21

标签: jquery asp.net-mvc kendo-ui kendo-combobox

我试图根据另一个组合框的选择填充一个组合框的值。我在MVC 5应用程序中使用kendo mvc组合​​框。在我的情况下,我试图根据SalesOrganisation组合框的选择填充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);
            }
        });
    }

2 个答案:

答案 0 :(得分:0)

因此根据您的具体情况而定。顶部组合框应控制第二个组合框中的选择项。在这种情况下,使用组合框的SELECT regexp_replace( ( SELECT row_to_json(row) FROM ( SELECT id AS bookid, author, cover FROM books INNER JOIN ( SELECT id, title, edition, teaser FROM books ) cover(id, title, edition, teaser) USING (id) ) row )::text, '"id":\d+,', '') 功能将是最简单的方法,也可以减少您拥有的代码量。

所以顶级组合框我们可以摆脱变化事件。

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

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 ) 的javascript函数,它返回顶部组合框中的选定值。

GetFilterOption

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

您当前的解决方案无法正常工作的原因是您将恢复选择列表并将其绑定到值而不是基础数据源。

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

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

}

希望能回答你的问题。任何问题都让我知道,我会更新答案以反映任何变化。

修改

经过多次试验和汤姆通过聊天错误后我们得到了解决方案来添加.Filtering(&#34;包含&#34;)

然后在组合框中使用

然后.ServerFiltering(true),最后得到:

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

答案 1 :(得分:0)

[{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