0

Telerik コントロールを使用して MVC ソリューションを実装していますが、Telerik ComboBox のリストを更新する際に問題が発生します。実際には、別の ComboBox で選択された値が変更されるたびに、ComboBox の使用可能な値のリストを更新する必要があります。以下はシナリオです。

  • Main ComboBox には文字列値のリストがあり、イベントを追加しました。
  • 詳細 ComboBox には、Main ComboBox から選択されたものに応じた値のリストがあります。
  • Main ComboBox のイベントが発生すると、javascript は Controller のアクションを呼び出します。
  • コントローラーは、List02 (ComboBox02 にバインドされたデータソース) のコンテンツを更新します。

実際にはすべて正しく実行されますが、Detail ComboBox は更新されません。何が間違っているか、または見逃されていますか?

助けてくれてありがとう

メインコンボボックス:

<%=Html.Kendo().DropDownListFor(ourModel => ourModel.ModelPK)
    .HtmlAttributes(new { @class="textboxDetails" })
    .Name("combo01")
    .BindTo((IEnumerable<ModelObject>)ViewData["List01"])
    .DataTextField("descriptionText")
    .DataValueField("valueID")
    .Value(ourModel.ModelPK.ToString())
    .Events(e =>
                {
                    e.Select("onSelect");
                })
%>

詳細コンボボックス:

<%=Html.Kendo().DropDownListFor(ourModel => ourModel.secPK)
    .HtmlAttributes(new { @class="textboxDetails" })
    .Name("combo02")
    .BindTo((IEnumerable<ModelObject>)ViewData["List02"])
    .DataTextField("descriptionText")
    .DataValueField("valueID")
    .Value(ourModel.Model02PK.ToString())
%>

aspx ページの Javascript:

function onSelect(e) {
    var dataItem = this.dataItem(e.item);
    var itemPK = dataItem.valueID;

    $.ajax({
        type: 'POST',
        url: '/controller01/action01',
        data: "{'sentPK':'" + sentPK + "'}",
        contentType: 'application/json; charset=utf-8',

        success: function (result) {

        },
        error: function (err, result) {
            alert("Error" + err.responseText);
        }

    });

}

コントローラーのアクション:

[AcceptVerbs(HttpVerbs.Post)]
public void action01(model01 editModel, int sentPK)
{
    //View data loads correctly
}
4

1 に答える 1

0

ViewData を使用して 2 番目のコンボボックスを更新しても、次のシナリオでは機能しないと思います。

.BindTo((IEnumerable)ViewData["List01"])

ページが初めてレンダリングされるとき、ViewData オブジェクトに格納された値を使用してコンボボックスが埋められますが、onSelect で行うことは、サーバーへの AJAX 呼び出しを行うことだけです。サーバーは ViewData オブジェクトを更新しますが、コンボ ボックスには初期データが既に読み込まれているため、新しいデータで更新されません。

最初のコンボ ボックスの選択変更イベントで 2 番目のコンボ ボックスを更新する必要があります。オプション1：

onSelect()あなたの成功に次の行を追加してください：

var combobox = $("#combo02").data("kendoComboBox");
combobox.dataSource.data(result);

オプション 2:

2 番目のコンボボックスのデータソースをサーバーにバインドします。

    @(Html.Kendo().ComboBox()
          .Name("products")
          .HtmlAttributes(new { style = "width:300px" })
          .Placeholder("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .Filter(FilterType.Contains)
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "ComboBox")
                      .Data("filterProducts");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categories")
    )

実際の例については、このリンクを参照してください。

于 2015-06-24T08:56:49.873 に答える