Missing documentation on how to properly setup a new mobile application using asp.net wrappers

5 posts, 1 answers
  1. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 30 Jul 2013 Link to this post

    Hi,

    First off; it's absolutelty GREAT that you've released server wrappers for use with mobile! Up until now, I've made my own "homerolled" asp.net mobile application using javascript and different views with mvc. (Quite the hassle!)

    Now, I've finally decided to port it over to your new server wrappers, and that's where I need some help!
    I see from your demos that you include a
    @{   
        Layout = "~/Areas/razor/Views/Shared/_MobileLayout.cshtml";
    }
    in all of your examples. What does this layout contain? For me, the examples doesn't really do me much good if I do not know how to setup my layout properly. The reason for my asking is that I have two shared layouts; one for logged in users and one for users that has not logged in yet.

    My "_AnonynmousUserLayout.cshtml" (razor) looks like this:
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <link href="~/Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet"/>
            <link href="~/Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet"/>
            <link href="~/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"/ rel="stylesheet">
             
            <script src="~/Scripts/kendo/2013.2.716/jquery.min.js"></script>
            <script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
        </head>
        <body>
            @RenderBody()
        </body>
    </html>
    And the @RenderBody() will render the Login page, that at the moment looks like this (until I get the wrappers to work):
    @(Html.Kendo().MobileView()
            .Name("loginView")
            .Title("Stimline Mobile")
            .Content(
                @<text>
                        <h2>New login form goes here</h2>
                     </text>
               )
          )
    When I open the page, nothing is displayed, but if I view the page source (in browser), all the markup including the text is there and produced by the wrappers.
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <link href="/Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet"/>
            <link href="/Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet"/>
            <link href="/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"/ rel="stylesheet">
             
            <script src="/Scripts/kendo/2013.2.716/jquery.min.js"></script>
            <script src="/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
        </head>
        <body>
             
     
     
            <div data-reload="false" data-role="view" data-stretch="false" data-title="Stimline Mobile" data-use-native-scrolling="false" data-zoom="false" id="loginView"><div data-role="content">
                <h2>New login form goes here</h2>    
            </div></div>
     
     
     
        </body>
    </html>
    A little help would be appreciated :)

    Also, do you have a template for creating a new asp.net mvc mobile project available? Couldn't seem to find one :)
  2. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 31 Jul 2013 Link to this post

    Hello Nicklas,

    Thank you for the kind words.

    Actually you can find code for the server layouts in the archive that is distributed with the release: 
    kendoui.aspnetmvc.2013.2.716.commercial.zip\wrappers\aspnetmvc\Examples\Areas\razor\Views\Shared\_MobileLayout.cshtml.


    What this page contains is the initialization of the mobile application which will initialize all other mobile widgets.
    <!DOCTYPE html>
    <html>
    <head>
        <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
     
        @RenderSection("HeadContent", false)  
    </head>
    <body>
     
    <!-- some other markup -->
     
    @RenderBody()
     
    <!-- some other markup -->
     
    @(Html.Kendo().MobileApplication()
            .ServerNavigation(true)
            .Layout("examples")
            .Name(isMobileDevice ? null : "example")
        )
    </body>
    </html>


    There are few articles showing how to setup a mobile wrappers: Using Kendo With ASP.NET MVC

    Regarding you question about VS Template project - unfortunately we don't have one currently.

    Please let us know if you need additional assistance or if you find something confusing.

    Regards,
    Nikolay Rusev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 15 Sep 2014 Link to this post

    Hi,
    I'm new with Telerik for mobile and face the same problem. I did follow the steps above, but I do not know what my mobile layout should be. I use the server wrappers for the MVC UI. Is there some how-to topic somewhere on this forum which handles the MVC UI Mobile use? Strange thing is that if I create a project from scratch (Telerik MVC project, choose Mobile) there are no mobile layout pages added?

    Ideally, I would like to combine one mvc project to both server regular web pages and mobile pages. Is that possible with Telerik? Thanks in advance for your feedback.
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 17 Sep 2014 Link to this post

    Hello Ruud,

    Unfortunately we don't have project templates for mobile application yet. 

    For your convenience I'm  attaching quick example demonstrating how to setup mobile application by using MVC wrappers.

    Regards,
    Nikolay Rusev
    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.

     
  6. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 17 Sep 2014 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,
    Great, exactly what I was looking for, thanks!!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready