Kendo Mobile and ASP.Net MVC 4

2 posts, 0 answers
  1. Anas
    Anas avatar
    3 posts
    Member since:
    Aug 2012

    Posted 06 Mar 2013 Link to this post

    Hi,

    I have some basic doubts related to kendo mobile in ASP.Net MVC 4. I know the way of rendering the master page in kendo mobile and MVC are different. 

    Here is my sample code. Is this a correct way?


    _Layout.Mobile.cshtml

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - My ASP.NET MVC Application</title>        
            <meta name="viewport" content="width=device-width" />

            <link href="~/Content/kendo.mobile.all.min.css" rel="stylesheet" />

            <script src="~/Scripts/jquery-1.7.1.js"></script>
            <script src="~/Scripts/kendo.all.min.js"></script>
           
                <script type="text/javascript">

                    $(document).ready(function () {

                        var app = new kendo.mobile.Application(document.body,
                        {
                            transition: 'slide'
                        });                    

                    });

                </script>

        </head>
        <body>
          
        <div data-role="view" data-layout="default">
        @RenderBody()
        </div>

                
       <section data-role="layout" data-id="default">
        <header data-role="header">
            <div data-role="navbar">My App</div>
        </header>

        <!--View content will render here-->
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="home" href="~/Home/Index">Home</a>
                <a data-icon="about" href="~/Home/About">About</a>
            </div>
        </footer>
    </section>
          
        </body>
    </html>


    Index.Mobile.cshtml

    @{
        ViewBag.Title = "Home Page";
         // This is done for avoiding re-rendering of the master page.. But still  Request.IsAjaxRequest() always false
         Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml"       //It will take mobile layout based on the request
     }
        Mobile Version System
        <br />
         Refresh Time : @(DateTime.Now.ToString())

    @{
        ViewBag.Title = "About";
    }


    About.Mobile.cshtml


    @{
        ViewBag.Title = "Home Page";
         // This is done for avoiding re-rendering of the master page.. But still  Request.IsAjaxRequest() always false
         Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml"       //It will take mobile layout based on the request
     }

    About in Mobile 


    Issues : -

    I didn't found much information related to Kendo UI mobile and MVC 4 implementation
    Is this the correct way of implementation of Kendo mobile in MVC 4. Is there anything needs to be changed in Layout page (_Layout.Mobile.cshtml)?


  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Mar 2013 Link to this post

    Hello Anas,

    Kendo UI Mobile would not navigate to URLs which, when bookmarked or linked to directly, will hit the remote view without passing through the initial view first. Thus being said, you don't need layouts at all - as the remote view request will always be performed via ajax, by the mobile application. 

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top