MobileListView not call controller action

3 posts, 1 answers
  1. RUBEN
    RUBEN avatar
    8 posts
    Member since:
    Dec 2013

    Posted 21 Nov 2014 Link to this post

    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. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 25 Nov 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. RUBEN
    RUBEN avatar
    8 posts
    Member since:
    Dec 2013

    Posted 25 Nov 2014 in reply to Daniel Link to this post

    Thanks a lot! It's works.
Back to Top