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

MobileListView not call controller action

2 Answers 66 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
TISAL
Top achievements
Rank 1
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="{&quot;type&quot;:(function(){if(kendo.data.transports[&#39;aspnetmvc-ajax&#39;]){return &#39;aspnetmvc-ajax&#39;;} else{throw new Error(&#39;The kendo.aspnetmvc.min.js script is not included.&#39;);}})(),&quot;transport&quot;:{&quot;read&quot;:{&quot;url&quot;:&quot;/Home/Read&quot;},&quot;prefix&quot;:&quot;&quot;},&quot;serverPaging&quot;:true,&quot;serverSorting&quot;:true,&quot;serverFiltering&quot;:true,&quot;serverGrouping&quot;:true,&quot;serverAggregates&quot;:true,&quot;group&quot;:[{&quot;field&quot;:&quot;Letter&quot;,&quot;dir&quot;:&quot;asc&quot;}],&quot;filter&quot;:[],&quot;schema&quot;:{&quot;data&quot;:&quot;Data&quot;,&quot;total&quot;:&quot;Total&quot;,&quot;errors&quot;:&quot;Errors&quot;,&quot;model&quot;:{}}}" 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>

<!-- Visual Studio Browser Link -->
<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>
<!-- End Browser Link -->
</body>
</html>







2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 25 Nov 2014, 10:33 AM
Hello,

An error will be thrown because a template with the specified Template Id is not included on the page:
<script type="text/kendo" id="template">
    #:Name #
</script>
Also, note that the used Kendo version requires jQuery 1.9.1 or later.

Regards,
Daniel
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
TISAL
Top achievements
Rank 1
answered on 25 Nov 2014, 12:35 PM
Thanks a lot! It's works.
Tags
ListView (Mobile)
Asked by
TISAL
Top achievements
Rank 1
Answers by
Daniel
Telerik team
TISAL
Top achievements
Rank 1
Share this question
or