mvc 4 mobile template question...Back Button and login button placement in the header... RSS

• • Reply
  

  scott_t_ct

  Member

  45 Points

  34 Posts

  mvc 4 mobile template question...Back Button and login button placement in the header...

  Nov 20, 2011 11:20 PM|LINK

  I want to be able to move the log in button in the header section to the right, and add page back button to the left.  I keep getting an error.  How can I implement this action.

  I tried to use the actionlink within both the _layout section and the _PartialLayout but the use of the jquery mobile class attibute caused an error. 

• • Reply
  

  Anindita.Bas...

  Contributor

  2448 Points

  416 Posts

  Re: mvc 4 mobile template question...Back Button and login button placement in the header...

  Nov 21, 2011 03:43 AM|LINK

  You want to put the LogIn button in header section then why dont you keep the actionlink tag in header tag of div-role ?

  <div data-role="header" class="ui-bar">
          <%: Html.ActionLink("LogIn", "LogIn", "LogIn")  %>
      </div>
  Check out some examples:

  http://www.asp.net/mvc/tutorials/aspnet-mvc-4-mobile-features

  http://weblogs.asp.net/gunnarpeipman/archive/2010/10/27/building-mobile-web-site-with-asp-net-mvc-and-jquery-mobile.aspx 

  http://weblogs.asp.net/jalpeshpvadgama/archive/2011/10/09/asp-net-mvc-4-0-mobile-template.aspx

   

  Thanks,

  Anindita

  http://anindita9.wordpress.com

  
• • Reply
  

  scott_t_ct

  Member

  45 Points

  34 Posts

  Re: mvc 4 mobile template question...Back Button and login button placement in the header...

  Nov 23, 2011 11:09 AM|LINK

  Thank you so much for the resources.  However, I think you misunderstood my need.  When using the mvc 4 mobile template, the login button is already in the header, but on the left side of the screen, and I want to place it on the right side of the screen header in order to add the back button to the left. This however causes an error using razor in that the "Class=" causing an error.

  Any help on this connundrum would be helpful.

• • Reply
  

  bruce (sqlwo...

  All-Star

  36894 Points

  5452 Posts

  Re: mvc 4 mobile template question...Back Button and login button placement in the header...

  Nov 26, 2011 09:55 PM|LINK

  please learn c# syntax. when you want to use a reserved word as a variable/member name you prefix it with @. so its @class="value"

  but if you read the jquery mobile docs, you would know that the first button, goes on the left and the second on the right by default. so if you just add the back link in the correct location, you are done.

  bruce (sqlwork.com)
  • Edited by bruce (sqlwork.com) on Nov 26, 2011 09:55 PM
• • Reply
  

  scott_t_ct

  Member

  45 Points

  34 Posts

  Re: mvc 4 mobile template question...Back Button and login button placement in the header...

  Dec 03, 2011 12:28 PM|LINK

  @if(Request.IsAuthenticated) {
      @Html.ActionLink("Home", "Index","Home", null, new { data_icon = "home" })
      @Html.ActionLink(User.Identity.Name, "Index", "Account", null, new { data_icon = "gear", data_iconpos = "ui-btn-right"})
  }
  else {
      @Html.ActionLink("Home", "Index", "Home", null, new { data_icon = "home" })
      @Html.ActionLink("Log On", "LogOn", "Account", null, new { data_icon = "gear", @class = "ui-btn-right" })
  }

  The above code was used to place the logon icon to the right on an MVC 4 jquery Mobile page in the _LogOnPartial.mobile view.  It also placed a home button to the right in the header section.

  • Marked as answer by scott_t_ct on Dec 03, 2011 12:29 PM