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

Linking to a view using A HREF

2 Answers 208 Views
Application
This is a migrated thread and some comments may be shown as answers.
Kelly
Top achievements
Rank 1
Kelly asked on 21 Aug 2013, 07:56 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 23 Aug 2013, 01:22 PM
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!
0
Kelly
Top achievements
Rank 1
answered on 23 Aug 2013, 02:19 PM
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.
Tags
Application
Asked by
Kelly
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Kelly
Top achievements
Rank 1
Share this question
or