我试图根据另一个组合框的选择填充一个组合框的值。我在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);
}
});
}
因此，根据您的特定方案。顶部组合框应控制第二个组合框中的选择项。在这种情况下，使用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，该函数从顶部的组合框中返回选定的值。
function GetFilterOption(){
return { id: $('#SalesOrganisation').val() }
}
然后，这将返回新结果集以供您绑定到组合框，并允许您从新收集的结果中选择值。
当前解决方案不起作用的原因是，您要带回选择列表，并将其绑定到值而不是基础数据源。
因此，如果您只想更改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
)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句