Why is my action not getting called in ASP.NET MVC 4 web application?

Question

I am trying to use Telerik Kendo ListView with my ASP.NET MVC 4 web application but I am having trouble getting it populated. I followed Telerik's Kendo ListView Controller and View examples but DataSource of the ListViewBuilder is not getting populated. The following is the relevant code I am using in FooView :

@model IEnumerable<FooViewModel>
<script type="text/x-kendo-tmpl" id="template">
    <div class="Foo">        
        <h3>#:FooName#</h3>            
    </div>
</script>

<div class="FooList">
@(Html.Kendo().ListView<FooViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")    
    .DataSource(dataSource => 
    {
        dataSource.Read(read => read.Action("Foo_Read","Foo").Type(HttpVerbs.Get));
        dataSource.PageSize(15);        
    })
    .Pageable()
)
</div>

I expect Foo_Read to get executed in the FooController but it does not. I suspect this is the reason why the Kendo ListView is not getting populated. So, could someone tell me why my Foo_Read action is not getting executed in FooController ? Thanks.

EDIT

I'm including the relevant Controller code but I simplified it just to see if I could get Visual Studio to break inside of Foo_Read but it does not hit my breakpoint.

The relevant FooController.cs code:

public class FooController : Controller
{
  private Entities db = new Entities();

  public ActionResult Foo_Read([DataSourceRequest] DataSourceRequest request)
  {
    return Json(request, JsonRequestBehavior.AllowGet);
  }
}

Answer 1

It seems your action is incomplete. Shouldn't it be something along the lines of:

public ActionResult Foo_Read([DataSourceRequest] DataSourceRequest request)
  {
    return return Json(db.ToDataSourceResult(request));
  }

Well after your comment to my question and seeing your own question, something clicked on my head.

In your solution your're mixing concepts. If you define a datasource to a read controller action, and shouldn't be needing to use the BindTo method. Your solution is probably binding to the ViewData data instead of the Read action returned data. That's why, if I now understand correctly, I think you should be using "AutoBind(true)", like so:

@model IEnumerable<FooViewModel>
<script type="text/x-kendo-tmpl" id="template">
    <div class="Foo">        
        <h3>#:FooName#</h3>            
    </div>
</script>

<div class="FooList">
@(Html.Kendo().ListView<FooViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template").AutoBind(true)    
    .DataSource(dataSource => 
    {
        dataSource.Read(read => read.Action("Foo_Read","Foo").Type(HttpVerbs.Get));
        dataSource.PageSize(15);        
    })
    .Pageable()
)
</div>

You might also want to check here and see if it helps you.

Answer 2

I figured it out. It should be the following:

@model IEnumerable<FooViewModel>
<script type="text/x-kendo-tmpl" id="template">
    <div class="Foo">        
        <h3>#:FooName#</h3>            
    </div>
</script>

<div class="FooList">
@(Html.Kendo().ListView<FooViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")    
    .DataSource(dataSource => 
    {
        dataSource.Read(read => read.Action("Foo_Read","Foo").Type(HttpVerbs.Get));
        dataSource.PageSize(15);        
    })
    .BindTo((IEnumerable<FooViewModel>)ViewData["listView"])
    .Pageable()
)
</div>

Notice the .BindTo((IEnumerable<FooViewModel>)ViewData["listView"]) I added. Apparently that makes a difference. Not exactly sure why, though. Telerik's examples did not have that line.

Answer 3

With the latest version of kendo you can set .AutoBind(true) then the read event ist executed the first time your listview is loaded.

Alternatively it is possible to call the read method from javascript:

$(document).ready(function () {
    var listView = $("#lstview").data("kendoListView");
    listView.dataSource.read();
});