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:
I can move around my application just fine by using mobile buttons with the following code:
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?
<
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 })
)