c# – 无法将简单的字符串列表数组绑定到ListView

我目前正在试图找出KendoUI.我使用的是2012.1.322版.

我有一个简单的字符串数组List< string>通过AJAX调用以web方式返回给用户.

[ “名称”,“手机”,“地址”,“邮政编码”]

当ListView绑定列表为空时,我只能得到

< 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 };
    }

其他一些试验并失败
以下是我尝试的一些模板创意以及返回的结果.显然他们都没有给我我想要的字符串输出.

>我尝试将模板更改为模板：“< li> ${}< / li>”当我得到< li> undefined< / li>
>我尝试将tempalte更改为模板：“< li> $.val()< / li>”当我得到< li> $.val()< / li>
>我尝试将tempalte更改为模板：“< 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"))",//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的控制器：

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);
}

– 编辑 –

这是一个控制器,它将返回没有具体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,"Smith"},"1-333-444-5555"},"Allen Way"},23456}}
    };

    return Json(columns,JsonRequestBehavior.AllowGet);
}