AJAX dataSource not working

5 posts, 1 answers
  1. Mythox
    Mythox avatar
    6 posts
    Member since:
    Nov 2007

    Posted 06 Sep 2012 Link to this post

    This is my code in c#:
    public JsonResult SearchRolResults()
            {
                var rol = new Rol { Name = "RolAjax", Domain = "WAF", Id = 123456789 };
                return this.Json(rol);
            }

    My code in JS adn HTML:

    <ul id="add_window_listview"></ul>

    $("#add_window_listview").kendoListView({
            dataSource: {
                transport: {
                    read: {
                        url: "/Person/SearchRolResults",
                        type: "GET",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8'
                    }
                }
            },
            template: "<li>${Name} (${Domain})</li>"
        });

    The C# ActionMethod is called but the listview not populate !!
    How i can debug this scenario??
    How i can view the dataSource in debug mode?? (I use chrome now)

    Thanks.
  2. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 06 Sep 2012 Link to this post

    Not sure, but maybe you have the issue about not having the get method allowed for json.
    You can look at it with a debugger like firebug, or the native one in chrome, etc. looking at the network traffic.

    return Json(yourdata, JsonRequestBehavior.AllowGet);
  3. Kendo UI is VS 2017 Ready
  4. Mythox
    Mythox avatar
    6 posts
    Member since:
    Nov 2007

    Posted 07 Sep 2012 Link to this post

    Hello Nohinn:

    Thanks for you replie, you are in correct. 

    I modify the c# action method to:
    public JsonResult SearchRolResults()
    {
         var rol = new Rol { Name = "RolAjax", Domain = "WAF", Id = 123456789 };
         return this.Json(rol, JsonRequestBehavior.AllowGet);
    }

    But for now, not working yet.

    I attach a screenshot of chrome showing the network trafic tab. All apear ok, but treeview not populate. In the "Response" tab i get this text:
    {"Name":"RolAjax","Domain":"WAF","Id":123456789}

     ¿Where i can obtain more debug info?

    I modified my JS too:

    $("#add_window_listview").kendoListView({
            dataSource: {
                transport: {
                    read: {
                        url: "/Person/SearchRolResults",
                        type: "GET",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8'
                    }
                }
            },
            //dataSource: {
            //    data: [
            //        { Name: "Rol1", Domain: "WAF", Id: "123456" },
            //        { Name: "Rol2", Domain: "Telefónica", Id: "1234356" }
            //    ]
            //},
            template: "<li>${Name} (${Domain})</li>",
            change: function () {
                alert("CHANGE")
            },
            dataBound: function () {
                alert("BOUND")
            }
        });

    With declarative dataSource the treeView is populated as well.
    When page load the event dataBound is raised correctly.

    ¿Any idea?

    Thanks.
  5. Answer
    Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 07 Sep 2012 Link to this post

    Your js code should look like this:
    $("#add_window_listview").kendoListView({
            dataSource: {
                transport: {
                    read: {
                        url: "/Person/SearchRolResults",
                        type: "GET",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8'
                    }
                }
            },
            template: kendo.template("<li>${Name} (${Domain})</li>"),
            change: function () {
                alert("CHANGE")
            },
            dataBound: function () {
                alert("BOUND")
            }
        });

    And in your server method you should return a list of rols, though it only has one item. Don't send the class object, send a list of objects.
    public JsonResult SearchRolResults()
    {
         var list = new List<Rol>();
         var rol = new Rol { Name = "RolAjax", Domain = "WAF", Id = 123456789 };
         list.Add(rol);
         return this.Json(list, JsonRequestBehavior.AllowGet);
    }
  6. Mythox
    Mythox avatar
    6 posts
    Member since:
    Nov 2007

    Posted 07 Sep 2012 Link to this post

    Thanks a lot, now is working ...

    :P
Back to Top
Kendo UI is VS 2017 Ready