無法將簡單的字符串列表綁定到ListView

Question

我目前正試圖找出KendoUI。我正在使用版本2012.1.322。

我有一個簡單的字符串數組List<string>通過AJAX調用返回給web方法中的用戶。

["name","phone","address","zip"]

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

其他一些試驗和失敗 下面是我嘗試的一些模板創意以及返回的結果。顯然，他們都沒有給我我想要的字符串輸出。

• 我試圖改變模板是template: "<li>${}</li>"和渲染，當我得到<li>undefined</li>
• 我試圖改變tempalte是template: "<li>$.val()</li>"和渲染，當我得到<li>$.val()</li>
• 我試圖改變tempalte是template: "<li>${}.selector</li>"當呈現我得到<li>undefined.selector</li>

Answer 1

你的代碼有幾個配置問題。我已經簡化了代碼，專注於一個工作示例。

模型類：

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：

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

- 編輯 -

下面是會返回一個JSON字符串沒有具體Contact對象的控制器。

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