I can't get the Kendo dropdownlistfor to update the selected value in the model

Question

I have a kendo dropdownlistfor

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

My model is

 public class DatabaseListModel
    {
        public int database_pk { get; set; }
        public List<SelectListItem> databases = new List<SelectListItem>();
    }

The main issue I have is my tabstrip LoadContentFrom properties reference the Model.database_pk value..the idea being that the content in the tabstrip would load depending on what the selected value of the dropdownlistfor is.. but no matter what I select the route value it posts is 0

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

anyone see what Im doing wrong..have ideas..I've been stuck on this for two days. Id be open to finding someway to force the tab to reload using an ajax call in jquery but I haven't been able to figure out how to reload the content from jquery either. Actually..doing it in jquery would be preferable..because I have other functions where id like to force a reload of the tabstip item

Answer 1

@(Html.Kendo().TabStrip() is razor code and generated on the server so

.LoadContentFrom("DatabaseInfo", "Home", new { database_pk = Model.database_pk })

evaluates to (assuming the initial value of database_pk is zero)

.LoadContentFrom("DatabaseInfo", "Home", new { database_pk = 0 })

It does not change just because you select something in the drop down list. You can use ajax to load html content returned from a partial view using

var url = '@Url.Action("DatabaseInfo", "Home")';
$('#database_pk').change(function() {
  var id = $(this).val();
  $(someSelector).load(url, {database_pk: id });
}

assuming you have a method

public ActionResult DatabaseInfo(int database_pk)

that returns a partial view

Note: you should remove the following from the drop down

.HtmlAttributes(new { @id = "database_pk", onchange = "changeDatabase()" })

Setting the id is pointless since it will already have that id by default, and you should avoid mixing html markup and javascript

Answer 2

Stephen provided me with some of the information I needed so I'm accepting his answer..But I'm also posting my own because its an incomplete solution and if some poor sod has the same problem with this I did I would want them to be able to resolve the issue without having to continue to search for more information.

I did have to do it in jquery and the answer is in fact to reload the Kendo Tabstrip contentElement as Stephen suggests(thanks for pointing me in the right direction).

I also needed a routine that would work both on the selection of a tabstrip item AND on the change of a dropdownlistfor selected value..

so I created a routine that would get the index of the selected tab and use that to get the contentElement...form there I just reset the contentElement.html value with the result of an ajax call.

function reloadTabstripItem() {
    var selected_pk = $('#database_pk').val();
    var index =  $("#menu").data("kendoTabStrip").select().index();
    var actionurl; 
    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);
    });
}