如何将Kendo下拉列表绑定到模型(强类型视图)

4

我希望以级联的方式将两个kendo下拉列表绑定到强类型视图(@model)上。这个模型是一个List<Enterprise>:

class Enterprise
{
    string EnterpriseId {get; set;}  //Bind this to first dropdown
    List<FinYear> FinancialYears {get; set;}
}


class FinYear
{
    string FinancialYear {get; set;} //Bind this to second dropdown
    string EnterpriseId [get; set;}
}        

如何正确地将数据从List<FinYear>导入下拉列表中?
2个回答

5
解决方案:我使用了javascript和html的组合。

HTML

// first dropdown
@(Html.Kendo.DropDownList()
.Name("entDDL")
.DataTextField("EnterpriseId")
.DataValueField("EnterpriseId")
.BindTo(Model)
.Events(e => e.Select("on_select")))

<input id="fDDL"> // second dropdown

Javascript

<script>
//on document ready
$(document).ready(function (){
    var finYearDDL = $("#fDDL").kendoDropDownList({}).data("kendoDropDownList");});

function on_select(e) {
    var dataItem = this.dataItem(e.item.index());
    dataItem = JSON.parse(JSON.stringify(dataItem.FinancialYears));
    var source = new kendo.data.DataSource({data : dataItem});

    // finyear dropdown
    var bind = $("#fDDL").kendoDropDownList({
        dataSource : source,
        datatextField : "FinancialYear",
        dataValueField : "FinancialYear",
        optionLabel : "Select..."});
}

这似乎创建了entDDL对象和一个名为fDDL的输入。我没有看到fDDL上的数据绑定如何从entDDL中提取数据,也没有看到finYearDDL的使用位置。 - Taersious

1

当您将强类型模型传递给视图时,如果您将kendo控件命名为要绑定的属性名称相同,则它将在视图加载时自动将存储的值绑定到控件。

@model TestProject.Models.TestModel

@(Html.Kendo().ComboBox()
.Name("Model property you want to bind")
.Text(Model.TestPropertyText) //Display text of stored value in field
.Placeholder("Place holder text")
//The DataText and DataValue fields bind your listItem's text and values
.DataTextField("TestPropertyText")
.DataValueField("TestPropertyId")
.AutoBind(false)
//Now I used a datasource from a server side controller action but 
//you should be able to do this also by the .BindTo(Model) as well
.DataSource(d => 
{ 
   d.Read(r => r.Action("GetTestModel_Read","TestController"));
}))

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接