404 When Using DataSourceRequest

[Richard Weeks]

Following examples, I have a ListView I am trying to populate depending upon the selected values of two ComboBoxes. I got the ComboBoxes populated via DataSource fine but the ListView is giving me problems. Here is some illustrative code:

@(Html.Kendo().ListView<BusinessObject>()

      .Name("Equipment")

      .TagName("div")

      .ClientTemplateId("template")

      .DataSource(source => source.Read(read =>

          read.Action("ControllerAction", "Controller")

              .Data("additionalData")))

      .Pageable())

 

<script>

function additionalData() {

    return {

        first: $("#First").val(),

        second: $("#Second").val()

    };

}

</script>

 

public JsonResult ControllerAction(

    [DataSourceRequest]DataSourceRequest request,

    int first,

    int second)

{

    var sites = ServiceManager.SomeService

        .GetBusinessObjects(first, second)

        .ToDataSourceResult(request);

 

    var json = this.Json(sites, JsonRequestBehavior.AllowGet);

 

    return json;

}

I get a 404 (not found) for "Controller/ControllerAction". What am I doing wrong?

Is my whole approach valid?

The examples often show different ways of accomplishing the same thing, which is very confusing.

Thank you,
Richard

[Nikolay Rusev]

Hello Richard,

I am not sure what the problem is with your code, but if you return `sites` directly from the action method all should work.

For more details on how bind the ListView widget you can see point 4 in the article: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/listview/binding

Also make sure that you have both controller named "Controller" in "Controllers"  folder and "ControllerAction" action method for that controller.

Regards,
Nikolay Rusev
the Telerik team

[Richard Weeks]

Thanks for the info. I have the controller action being called now but the parameters are not being passed. I now have:

// First Combo

 

@(Html.Kendo().ComboBox()

    .Name("First")

    .DataTextField("Title")

    .DataValueField("Id")

    .DataSource(source => source.Read(read => read

        .Action("FirstAction", "Controller")))

    .SelectedIndex(0)

)

 

// Second Combo

 

@(Html.Kendo().ComboBox()

    .Name("Second")

    .DataTextField("Title")

    .DataValueField("Id")

    .DataSource(source => source.Read(read => read

        .Action("SecondAction", "Controller")))

    .SelectedIndex(0)

)

 

// ListView

 

@model IEnumerable<MyList>

 

@(Html.Kendo().ListView<MyList>()

      .Name("MyList")

      .TagName("div")

      .ClientTemplateId("template")

      .DataSource(source => source.Read(read => read

          .Action("GetMyList", "Controller")

          .Data("additionalData"))

          .ServerOperation(false))

          .Pageable())

 

// additionalData

 

<script>

function additionalData()

{

    return {

        first: $("#First").val(),

        second: $("#Second").val()

    };

}

</script>

 

// Relevant Controller

 

public JsonResult GetMyList(

    [DataSourceRequest]DataSourceRequest request,

    string first,

    string second)

{

    var results = ServiceManager.Service

        .GetMyListData(first, second)

        .ToDataSourceResult(request);

 

    var json = this.Json(results, JsonRequestBehavior.AllowGet);

 

    return json;

}

Any idea why the parameters in the action are null?

Richard

[Nikolay Rusev]

Hello Richard,

If you break into the action method for read in your controller or inspect the `Network` tab of the browser console you will notice the listview widget does not perform ajax calls on paging. This is due to the fact that you have forbidden the server operations in the DataSource configuration by setting: .ServerOperation(false))


Regards,
Nikolay Rusev
the Telerik team

[Richard Weeks]

Ah, well spotted. I'd left that in from copying from another demo.

But I seem to be going round in circles. It's probably my server-side bias but frankly, I do not enjoy working with Kendo. When something is not working, debugging client stuff is an absolute joke. Not your fault but I know I'll be sticking with server-side VS.

Anyway, I adapt the code and now the comboboxes stop populating. I can see the Json coming back fine in Fiddler but nothing in the combobox (nothing happens when I click either dropdown).

Try:

@using MvcApplication3.Models

 

@(Html.Kendo().ComboBox()

    .Name("First")

    .DataValueField("Id")

    .DataTextField("Name")

    .DataSource(source => source.Read(read => read.Action("GetFirst", "Home")))

    .SelectedIndex(0)

 

@(Html.Kendo().ComboBox()

    .Name("Second")

    .DataValueField("Id")

    .DataTextField("Name")

    .DataSource(source => source.Read(read => read.Action("GetSecond", "Home")))

    .SelectedIndex(0)

 

@(Html.Kendo().ListView<BusinessObject>()

      .Name("BusinessObjectList")

      .TagName("div")

      .ClientTemplateId("template")

      .DataSource(source => source.Read(read => read.Action("GetBusinessObjects", "Home").Data("AdditionalData")))

      .Pageable())     

 

<script type="text/x-kendo-template" id="template">

    <p>Name: #=Name#</p>

</script>

 

<script>

function AdditionalData()

{

    return {

        First: $("#First").val(),

        site: $("#Second").val()

    };

}

</script>

 

public class HomeController : Controller

{

    private readonly IList<First> first;

 

    private readonly IList<Second> second;

 

    private readonly IList<BusinessObject> businessObject;

 

    public HomeController()

    {

        this.businessObject = new List<BusinessObject>

        {

            new BusinessObject { Id = 1, Name = "First", FirstId = 1, SecondId = 1 },

            new BusinessObject { Id = 2, Name = "Second", FirstId = 2, SecondId = 2 }

        };

 

        this.first = new List<First>

        {

            new First { Id = 1, Name = "First 1" },

            new First { Id = 2, Name = "First 2" }

        };

 

        this.second = new List<Second>

        {

            new Second { Id = 1, Name = "Second 1" },

            new Second { Id = 2, Name = "Second 2" }

        };

    }

 

    public ActionResult Index()

    {

        return this.View();

    }

 

    public JsonResult GetFirst([DataSourceRequest]DataSourceRequest request)

    {

        return this.Json(this.first.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

    }

 

    public JsonResult GetSecond([DataSourceRequest]DataSourceRequest request)

    {

        return this.Json(this.second.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

    }

 

    public JsonResult GetBusinessObjects(

        [DataSourceRequest]DataSourceRequest request,

        string first,

        string second)

    {

        int? firstId = null;

 

        int? secondId = null;

 

        if (!string.IsNullOrEmpty(first))

        {

            firstId = int.Parse(first);

        }

 

        if (!string.IsNullOrEmpty(second))

        {

            secondId = int.Parse(second);

        }

 

        var results = (from c in this.businessObject

                       let cid = firstId ?? c.FirstId

                       let sid = secondId ?? c.SecondId

                       where c.FirstId == cid && c.SecondId == sid

                       select c)

                       .ToDataSourceResult(request);

 

        return results == null

            ? null

            : this.Json(results, JsonRequestBehavior.AllowGet);

    }

}

I renamed all the actual classes, so apologies if that broke the code. It all works just the client refuses to display the combobox contents.

/sigh :)

Richard

[Nikolay Rusev]

Hello Richard,

The reason for not being able to bind the ComboBox widgets because you are using ToDataSourceResult extension method to process the data. This however will require to set ComboBox DataSource schema to look for data in the "Data" property from the returned JSON. For more details on how configure ComboBox you can visit this article: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/combobox/overview

For your convenience I've prepared sample app similar to what you've posted here.

Regards,
Nikolay Rusev
the Telerik team