4

私は現在、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>
4

1 に答える 1

2

コードにはいくつかの構成上の問題があります。実用的な例に集中するために、コードを少し簡略化しました。

モデルクラス：

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

</ p>

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,object>(){ {"Name", "Smith"}, {"Phone", "1-333-444-5555"}, {"Address", "Allen Way"}, {"Zip", 23456}}
    };

    return Json(columns, JsonRequestBehavior.AllowGet);
}
于 2012-06-25T18:10:48.100 に答える