KendoUi学习之旅 DropDownList的使用

<link href="@Url.Content("~/Content/kendo/2016.1.406/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2016.1.406/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Style/login.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/angular.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/kendo.culture.zh-CN.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="@Url.Content("~/Scripts/js/Shared/Index.js")"></script>
<script src="@Url.Content("~/Scripts/js/Shared/Common.js")"></script>
<script src="@Url.Content("~/Scripts/js/Shared/Main.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.serializejson.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/kendo.messages.zh-CN.min.js")"></script>
<script src="@Url.Content("~/Scripts/underscore-min.js")"></script>
<script src="@Url.Content("~/Scripts/js/timeOut.js")"></script>

Model

public class Model
{
public int ID { get; set; }
public string Item { get; set; }
public string Price { get; set; }
}

HomeController

public ActionResult GetCategoryList()
{
Model[] ml = new Model[]
{
new Model (){ID = 1, Item = "付款条件" ,Price="10"},
new Model (){ID = 2, Item = "出差区域" ,Price="10"},
new Model (){ID = 3, Item = "税率" ,Price="10"},
new Model (){ID = 4, Item = "信用等级" ,Price="10"},
};
return Json(ml, JsonRequestBehavior.AllowGet);
}

View

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="search-panel" id="qqqq">
<input data-role="dropdownlist"
data-auto-bind="true"
data-text-field="Item"
data-value-field="ID"
data-filter="contains"
data-bind="source: baseDataCategoryList" />
</div>
<script>
var viewModel = kendo.observable({
baseDataCategoryList: new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GetCategoryList'
}
}
})
});
kendo.bind($("#qqqq"), viewModel);
</script>
</body>

原文地址:https://www.cnblogs.com/jiangcm/p/7456542.html