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

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

4 Answers 102 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nicklas
Top achievements
Rank 1
Nicklas asked on 30 Jul 2013, 11:24 AM
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 :)

4 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 31 Jul 2013, 07:16 AM
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!
0
Ruud
Top achievements
Rank 1
answered on 15 Sep 2014, 03:13 PM
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.
0
Nikolay Rusev
Telerik team
answered on 17 Sep 2014, 08:16 AM
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.

 
0
Ruud
Top achievements
Rank 1
answered on 17 Sep 2014, 04:11 PM
Hi Nikolay,
Great, exactly what I was looking for, thanks!!
Tags
General Discussions
Asked by
Nicklas
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Ruud
Top achievements
Rank 1
Share this question
or