Edit this page

Hybrid Application HtmlHelper Overview

The hybrid Application HtmlHelper extension is a server-side wrapper for the hybrid Kendo UI Application widget.

It allows you to configure the hybrid Kendo UI Application from server-side code.

Getting Started

The Basics

The Hybrid UI Application for ASP.NET MVC provides the necessary tools for building native-looking web-based mobile applications. When initialized, the mobile Application modifies the behavior of the hybrid Kendo UI widgets, so that they navigate between the mobile views when the user taps them.

There are two ways of navigation:

  • Server navigation.
  • Ajax navigation.

Server Navigation

  1. Create a new ASP.NET MVC 4 application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. If you decide not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application.

  2. Open HomeController.cs and modify the Index action method.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add an action method for the detail view.

    Example
        public ActionResult Details()
        {
            return View();
        }
    
  4. Add the default Hybrid UI View for ASP.NET MVC. The mobile application expects that the immediate child of the application element is a MobileView.

    Example
    
            <% Html.Kendo().MobileView()
                    .Name("Index")
                    .Title("Index")
                    .Content(() =>
                    {
                        %>
                            View Content Template
                            <!--Add button that will `server navigate` the application-->
                            <%: Html.Kendo().MobileButton()
                                    .Text("Navigate to Details")
                                    .Url("Details", "Home")
                            %>
                        <%
                    })
                    .Render();
            %>
    
    
            @(Html.Kendo().MobileView()
                .Name("Index")
                .Title("Index")
                .Content(
                    @<text>
                        View Content Template
    
                        <!--Add button that will `server navigate` the application-->
                        @(Html.Kendo().MobileButton()
                            .Text("Navigate to Details")
                            .Url("Details", "Home")
                        )
    
                    </text>
                )
            )
    
  5. Create a new Details ASP.NET MVC View file under the /Views/Home/ folder.

    Example
    
            <%Html.Kendo().MobileView()
                .Title("Details")
                .Name("Details")
                .Content(() =>
                {
                    %>
                    View Details Template
                    <!--Add back button that will `server navigate` the application to `Index`-->
                    <%: Html.Kendo().MobileButton()
                            .Text("Go Back")
                            .Url("./")
                    %>
                    <%
                })
            %>
    
    
            @(Html.Kendo().MobileView()
                .Title("Details")
                .Name("Details")
                .Content(
                    @<text>
                    View Details Template
                    <!--Add back button that will `server navigate` the application to `Index`-->
                    @(Html.Kendo().MobileButton()
                        .Text("Go Back")
                        .Url("./")
                    )
                    </text>
                )
            )
    
  6. Initialize the Application inside the Master/Layout page and enable the server navigation.

    Example
    
            <%: Html.Kendo().MobileApplication()
                    .ServerNavigation(true)
            %>
    
    
                @(Html.Kendo().MobileApplication()
                    .ServerNavigation(true)
                )
    
  7. Build and run the Application.

Ajax Navigation

  1. Create a new ASP.NET MVC 4 application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. If you decide not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application.

  2. Open HomeController.cs and modify the Index action method.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add an action method for the detail view.

    Example
        public ActionResult Details()
        {
            return PartialView();
        }
    

    Important

    Notice that the view is returned as partial.

  4. Add the default Hybrid UI View for ASP.NET MVC. The mobile application expects that the immediate child of the application element is a MobileView.

    Example
    
            <% Html.Kendo().MobileView()
                    .Name("Index")
                    .Title("Index")
                    .Content(() =>
                    {
                        %>
                            View Content Template
                            <!--Add button that will `server navigate` the application-->
                            <%: Html.Kendo().MobileButton()
                                    .Text("Navigate to Details")
                                    .Url("Details", "Home")
                            %>
                        <%
                    })
                    .Render();
            %>
    
    
            @(Html.Kendo().MobileView()
                .Name("Index")
                .Title("Index")
                .Content(
                    @<text>
                        View Content Template
    
                        <!--Add button that will `server navigate` the application-->
                        @(Html.Kendo().MobileButton()
                            .Text("Navigate to Details")
                            .Url("Details", "Home")
                        )
    
                    </text>
                )
            )
    
  5. Create a new Details ASP.NET MVC View file under the /Views/Home/ folder.

    Example
    
            <%Html.Kendo().MobileView()
                .Title("Details")
                .Name("Details")
                .Content(() =>
                {
                    %>
                    View Details Template
                    <!--Add back button that will `server navigate` the application to `Index`-->
                    <%: Html.Kendo().MobileButton()
                            .Text("Go Back")
                            .Url("#:back")
                    %>
                    <%
                })
            %>
    
    
            @(Html.Kendo().MobileView()
                .Title("Details")
                .Name("Details")
                .Content(
                    @<text>
                    View Details Template
                    <!--Add back button that will `server navigate` the application to `Index`-->
                    @(Html.Kendo().MobileButton()
                        .Text("Go Back")
                        .Url("#:back")
                    )
                    </text>
                )
            )
    
  6. Initialize the mobile application inside the Master/Layout page.

    Example
    
            <%: Html.Kendo().MobileApplication()
                    .PushState(true)
                    .ServerNavigation(false)
            %>
    
    
            @(Html.Kendo().MobileApplication()
                .PushState(true)
                .ServerNavigation(false)
            )
    
  7. Build and run the application.

Reference

Instances

You can reference a hybrid Application instance by using the code from the example below. Once a reference is established, use the hybrid Application API to control its behavior.

Example
    @(Html.Kendo().MobileApplication()
            .ServerNavigation(true)
    )
    <script>
    $(function() {
        //Notice that the casing is important.
        var application = kendo.mobile.application;
    });
    </script>

See Also