This is a migrated thread and some comments may be shown as answers.

MobileListView not call controller action

2 Answers 84 Views

ListView (Mobile)

This is a migrated thread and some comments may be shown as answers.

TISAL asked on 21 Nov 2014, 02:31 PM

Hi, I am trying to implement a Mobile example using Kendo UI ASP.NET MVC using Visual Studio 2013 Express for Web.
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/mobilelistview/overview

I've done this:
- Reference to kendo dll: C:\MovilLab\Kendo2014.2.1008\Kendo.Mvc.dll (v 2014.2.1008.340)
- Add in the web.config of the view in Namespace tag: <add namespace="Kendo.Mvc.UI" />

Index.chtml

@using MovilLab;
@using MovilLab.Controllers;

<!DOCTYPE html>
<html>
<head>
<title></title>
@Html.Partial("~/Views/Comunes/HeaderCssJs.cshtml")
</head>
<body>
@(Html.Kendo().MobileView()
.Name("grouped")
.Title("ListView")
.Content(obj =>
Html.Kendo().MobileListView()
.Name("grouped-listview")
.TemplateId("template") //configure the item template
.FixedHeaders(true)

.DataSource(dataSource => dataSource
.Read(read => read.Action("Read", "Home"))
.Group(group => group.Add("Letter", typeof(string)))
)
)
)

@(Html.Kendo().MobileApplication()
.ServerNavigation(true)
)

</body>
</html>

HeaderCssJs.cshtml (is a PartialView)

<link href="~/Content/kendo/2014.2.1008/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/kendo.aspnetmvc.min.js"></script>

HomeController.cs (I have 2 actions):

public ActionResult Index()
{
return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
var products = new[] {
new { Name = "Sashimi salad", Letter = "S" },
new { Name = "Chirashi sushi", Letter = "C" },
new { Name = "Seaweed salad", Letter = "S" },
new { Name = "Edamame", Letter = "E" },
new { Name = "Miso soup", Letter = "M" },
new { Name = "Maguro", Letter = "M" },
new { Name = "Shake", Letter = "S" },
new { Name = "Shiromi", Letter = "S" },
new { Name = "Tekka maki", Letter = "T" },
new { Name = "Hosomaki Mix", Letter = "H" },
new { Name = "California rolls", Letter = "C" },
new { Name = "Seattle rolls", Letter = "S" },
new { Name = "Spicy Tuna rolls", Letter = "S" },
new { Name = "Ebi rolls", Letter = "E" },
new { Name = "Chicken Teriyaki", Letter = "C" },
new { Name = "Salmon Teriyaki", Letter = "S" },
new { Name = "Gohan", Letter = "G" },
new { Name = "Tori Katsu", Letter = "T" },
new { Name = "Yaki Udon", Letter = "Y" }
};

//return the data as JSON
return Json(products.ToDataSourceResult(request));
}

I compile and run, but my problem is that the Browser appear in blank! And I put a BreakPoint in Read Action in HomeController and not enter there!
When I check using F12 in Chrome Response Tab appear an error in data-source attribute. Any help??:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/kendo/2014.2.1008/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.default.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/angular.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/kendo.all.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/kendo.aspnetmvc.min.js"></script>

</head>
<body>
<div data-reload="false" data-role="view" data-stretch="false" data-title="ListView" data-use-native-scrolling="false" data-zoom="false" id="grouped"><div data-role="content"><ul data-fixed-headers="true" data-role="listview" data-source="{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Home/Read"},"prefix":""},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"group":[{"field":"Letter","dir":"asc"}],"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{}}}" data-template="template" id="grouped-listview"></ul></div></div>

<script>
jQuery(function(){ new kendo.mobile.Application(jQuery(document.body), {"hideAddressBar":true,"updateDocumentTitle":true,"serverNavigation":true}); });
</script>


<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"50645a161c474181843daf7db7ac40ef"}
</script>
<script type="text/javascript" src="http://localhost:49837/5a71b082460e41bebf77ca5ae81229a0/browserLink" async="async"></script>

</body>
</html>

2 Answers, 1 is accepted

Accepted