kendo tabstrip重新加载dropdownlistfor onchange函数

时间:2014-11-21 02:41:49

标签: c# jquery asp.net-mvc kendo-asp.net-mvc

我的项目中有一个视图,它有一个kendo下拉列表

@(Html.Kendo().DropDownListFor(m => m.database_pk)
        .BindTo(Model.databases)
        .Name("database_pk").OptionLabel("Select one...")
        .DataValueField("Value")
        .DataTextField("Text")
        .HtmlAttributes(new { @id = "database_pk", onchange = "changeDatabase()" })
    )

和一个剑道标签

@(Html.Kendo().TabStrip()
                .Name("menu")
                .Items(items =>
                    {
                        items.Add().Text("Database Info").LoadContentFrom("DatabaseInfo", "Home", new { database_pk = Model.database_pk }).Selected(true); 
                        items.Add().Text("Tables").LoadContentFrom("TableInfo", "Table", new { database_pk = Model.database_pk }).Selected(true);
                        items.Add().Text("Entities").LoadContentFrom("EntityInfo", "Entity", new { database_pk = Model.database_pk }).Selected(true);
                    })
                .Events(events =>
                    {
                        events.Select("selectMenuTabs");
                    })
    )

如果在下拉列表中触发onchange事件,我需要使用我的标签来“重新加载”所选标签

onchange的功能是

function changeDatabase() {
    var selected_pk = $('#database_pk').val();
    reloadTabstrip();
}

和重新加载功能

function reloadTabstrip() {
    var tabStrip = $("#menu").data("kendoTabStrip");
    tabStrip.reload($(".item", tabStrip.element)[0]);
}

reloadTabstrip功能不起作用,我很难在网上找到任何指示我正确方向的东西。

1 个答案:

答案 0 :(得分:0)

使用以下jquery脚本

解决了问题
function reloadTabstripItem() {
    var selected_pk = $('#database_pk').val();
    var index = $("#menu").data("kendoTabStrip").select().index();
    switch (index) {
        case 0:
            actionurl = "/Home/DatabaseInfo";
            break;
        case 1:
            actionurl = "/Table/TableInfo";
            break;
        case 2:
            actionurl = "/Entity/EntityInfo";
            break;
    }
    $.ajax({
        url: "/Home/DatabaseInfo",
        type: 'GET',
        data: { database_pk: selected_pk }
    }).done(function (html) {
        $($("#menu").data("kendoTabStrip").contentElement(0)).html(html);
    });
}