Linking to a view using A HREF

3 posts, 1 answers
  1. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 21 Aug 2013 Link to this post

    How do you link between two views in a MVC mobile application while maintaining a layout? The code for my _Layout.mobile file is below:
    <body>
        @if (IsSectionDefined("head"))
        {
            @RenderSection("head", false);
        }
     
        @RenderBody()
     
        @(Html.Kendo().MobileLayout()
            .Name("mainLayout")
            .Footer(@<text>
                @(Html.Kendo().MobileTabStrip()
                    .Name("tabStrip")
                    .SelectedIndex(7)
                    .Items(items =>
                        {
                            items.Add()
                                .Text("Home")
                                .Icon("home")
                                .Url("Index", "Club", new { club = Model.CurrentContext.Club.FriendlyName })
                                .Target("_top");
                            items.Add()
                                .Text("Browse")
                                .Icon("search")
                                .Url("Browse", "Club", new { club = Model.CurrentContext.Club.FriendlyName })
                                .Target("_top");
                            items.Add()
                                .Text("More")
                                .Icon("more")
                                .Rel(MobileButtonRel.Drawer)
                                .Url("#moreDrawer")
                                .Target("_top");
                        })
                )
            </text>)
        )
     
        @(Html.Kendo().MobileApplication()
            .ServerNavigation(false)
            .PushState(true)
            .HideAddressBar(true)
            .Layout("mainLayout")
            .Transition("slide")
        )
     
        @(Html.Kendo().MobileDrawer()
            .Name("moreDrawer")
            .Views()
            .HtmlAttributes(new { style = "width:200px" })
            .Content(obj =>
                Html.Kendo().MobileListView().Type("group")
                    .Items(root => {
                        root.Add().Text("Links").Items(items =>
                        {
                            items.Add().Icon("home").Content(@<text>
                                @Html.ActionLink("Home", "Index", "Club", new { club = Model.CurrentContext.Club.FriendlyName }, new { })
                            </text>);
                            items.Add().Icon("search").Content(@<text>
                                @(Html.Kendo().MobileButton()
                                    .Text("Browse")
                                    .Url("Browse", "Club", new { club = Model.CurrentContext.Club.FriendlyName })
                                )
                            </text>);
                            if (Model.CurrentContext.Club.BuddyListEnabled)
                            {
                                items.Add().Icon("share").Content(@<text>
                                    @(Html.Kendo().MobileButton()
                                        .Text(Model.CurrentContext.Club.BuddyListPluralName)
                                        .Url("Buddies", "ClubProfile", new { club = Model.CurrentContext.Club.FriendlyName })
                                    )
                                </text>);
                            }       
                        });
     
                        root.Add().Items(items =>
                        {
                            items.Add().Icon("contacts").Content(@<text>
                                @(Html.Kendo().MobileButton()
                                    .Text("Sign Up")
                                    .Url("SignUp", "Club", new { club = Model.CurrentContext.Club.FriendlyName })
                                )
                            </text>);
                            items.Add().Icon("@Url.Content('~/Content/Images/Lock32White.png')").Content(@<text>
                                @(Html.Kendo().MobileButton()
                                    .Text("Log In")
                                    .Url("LogIn", "Club", new { club = Model.CurrentContext.Club.FriendlyName })
                                )
                            </text>);
                        });
                    })
                )
            )
    </body>

    I can move around my application just fine by using mobile buttons with the following code:
    @(Html.Kendo().MobileButton()
                    .Text("Sign Up")
                    .Url("SignUp", "Club", new { club = Model.CurrentContext.Club.FriendlyName })
                )
    However, I would like to do the same thing using a href. Is this possible or do I need to change the css of the button to accomplish what I would like?
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 23 Aug 2013 Link to this post

    Hi Paul,

    You can switch between Views via navigational widgets button, backbutton, detailbutton, listview-link, tabstrip-tab or via navigate method of the application. In-app navigation to remote Views with standard html attributes is not supported.

    I am not sure why you insist to use a standard anchor element instead of button widget, but if you want to customize the appearance of the button please check this topic. In case you want to completely remove the styling, you remove the km-button class.

    Regards,
    Alexander Valchev
    Telerik
    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
  4. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 23 Aug 2013 Link to this post

    On our landing page we have multiple tiles a user can tap to get to different parts of our site. We currently wrap these tiles in HREFs. Since we already have classes that format these tiles how we want I have been trying to reuse them. I'll try stripping the buttons of their current class and replacing them with ours. Thanks.
Back to Top