我目前正在尝试了解 KendoUI。我使用的是 2012.1.322 版本。
我有一个简单的字符串数组 List<string>
通过 AJAX 调用以 Web 方法返回给用户。
["name","phone","address","zip"]
当ListView绑定(bind)列表为空时,我只得到
<ul id="fileAlist" data-role="listview" class="k-widget k-listview"></ul>
.
我很确定这与我的模板错误有关。我必须设置什么而不是 ${Object}
让它像这样呈现:
<ul id="fileAlist" data-role="listview" class="k-widget k-listview">
<li>name</li>
<li>phone</li>
<li>address</li>
<li>zip</li>
</ul>
这是当前代码:
$(document).ready(function () {
$("#fileAlist").kendoListView({
template: "<li>${Object}</li>",
dataSource:
new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("GetColumnNames", new {File="A"})',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
}
}
})
});
});
C# 代码(如果您有兴趣)
[HttpGet]
public JsonResult GetColumnNames(string file)
{
if (file == "A")
{
var columns = new List<string>()
{
"name",
"phone",
"address",
"zip"
};
}
return new JsonResult { Data = columns, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
一些其他尝试和失败 以下是我尝试过的一些模板创意以及返回的结果。显然他们都没有给我想要的字符串输出。
- 我尝试将模板更改为
template: "<li>${}</li>"
渲染时我得到<li>undefined</li>
- 我尝试将模板更改为
template: "<li>$.val()</li>"
渲染时我得到<li>$.val()</li>
- 我尝试将模板更改为
template: "<li>${}.selector</li>"
渲染时我得到<li>undefined.selector</li>
最佳答案
您的代码中存在多个配置问题。我稍微简化了代码以专注于一个工作示例。
模型类:
public class Contact
{
public int ContactId { get; set; }
public string Name { get; set; }
public string Phone { get; set; }
public string Address { get; set; }
public string Zip { get; set; }
}
查看标记,您需要使用列表布局来获得所需的外观:
<ul>
<div id="contactList" style="width: 400px;"></div>
</ul>
注意模板标记的样子:
<script id="template" type="text/x-kendo-tmpl">
<li>${ Name} ${ Phone } ${ Address } ${ Zip }</li>
</script>
<script type="text/javascript" >
$(document).ready(function () {
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: "@(Url.Action("GetContacts", "Home"))",
dataType: "json", //switched to json instead of jsonp for this example
contentType: "application/json; charset=utf-8",
type: "GET"
}
}
});
$("#contactList").kendoListView({
dataSource: datasource,
template: kendo.template($("#template").html()) //Link the template to the list view control
});
});
返回 json 的 Controller :
public ActionResult GetContacts()
{
List<Contact> list = new List<Contact>();
Contact contact = new Contact() { ContactId = 0, Name = "Steve", Address = "Some Street", Phone = "1-345-345-3455", Zip = "334566" };
list.Add(contact);
contact = new Contact() { ContactId = 1, Name = "Jim", Address = "Another Street", Phone = "1-777-987-3889", Zip = "998754" };
list.Add(contact);
return Json(list, JsonRequestBehavior.AllowGet);
}
--编辑--
这是一个 Controller ,它将返回一个没有具体 Contact
对象的 json 字符串。
public ActionResult GetContacts()
{
var columns = new List<Dictionary<string, object>>() {
new Dictionary<string,object>(){ {"Name", "Rex"}, {"Phone", "1-123-123-2342"}, {"Address", "Westwood Drive"}, {"Zip", 928347}},
new Dictionary<string,object>(){ {"Name", "Smith"}, {"Phone", "1-333-444-5555"}, {"Address", "Allen Way"}, {"Zip", 23456}}
};
return Json(columns, JsonRequestBehavior.AllowGet);
}
关于c# - 无法将简单的字符串列表数组绑定(bind)到 ListView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11163446/