Forum Discussion

JohnStraumann's avatar
JohnStraumann
Icon for Microsoft rankMicrosoft
Feb 08, 2023

Mobile pages

Hi all:

 

I am adapting web pages from an MVC site for Mobile. I created a new shared layout, _LayoutMobile.cshtml, using a "hamburger" menu as opposed to a NavBar. The index page looks fine with the logo and Menu button (1.png), but when I tried to use the same layout and add some content to LoginMobile.cshtml, the content is appearing above the header (3.png). Here is the LoginMobile method from AccountController.cs:

 

[AllowAnonymous]
public ActionResult LoginMobile()
{
//Console.WriteLine("");
//ViewBag.ReturnUrl = returnUrl;
return View();
}

 

and I also attached _LayoutMobile.cshtml, and LoginMobile.cshtml. Any and all input is greatly appreciated!

ASP.NET (Classic)
mvc

2 Replies

  • LanHuang's avatar
    LanHuang
    Former Employee
    Mar 03, 2023

    Hi JohnStraumann,

    Thanks for posting your issue here.

    However this platform is used for how-to discussions and sharing best practices for building any app with .NET.Since your issue is a technical question, welcome to post it in Microsoft Q&A forum, the support team and communities on Microsoft Q&A will help you for any technical questions.
    Besides, it will be appreciated if you can share it here once you post this technical question Microsoft Q&A.
    Best Regards,
    Lan Huang

  • Gavin-Williams's avatar
    Gavin-Williams
    Brass Contributor
    Feb 26, 2023

    JohnStraumann 

     

    Hi John,

     

    Looks like you're calling RenderBody() on line 41 of _layoutMobile which is above where you are laying out the content of the body. I did a quick test to check this is the case with the code you provided and took the following section of code and put it just before the </body> tag:

     

      @{
    var level = "";
    var pcurrent = 0;
    var pcomplete = "No";
    //Getting session object
    if (Session["MembershipLevel"] != null)
    {
    level = Session["MembershipLevel"].ToString();
    pcurrent = Convert.ToInt32(Session["MembershipCurrent"]);
    pcomplete = Session["ProfileCompleted"].ToString();
    }
    //Generate variables for nav showing
    var psale = false;
    var mdir = false;
    var pwanted = false;
    var pisale = false;
    var pisearch = false;

    if (pcomplete == "Yes" && pcurrent == 1) //show for both basic and premium
    {
    psale = true;
    pisale = true;
    pisearch = true;
    pwanted = true;
    mdir = true;
    }
    if (IsSectionDefined("scripts"))
    {
    @RenderSection("scripts", required: false)
    }
    @RenderBody()
  }

     

    By putting the render as the last part of your mobile layout body it will always produce it below the logo and nav menu that you produce above it. You probably don't need all of the code above in that body section but hopefully this will give you enough of an idea about your issue to clean it up. Also note that if you plan on adding a footer then that would go below the section I mentioned above so the body renders between the header and footer.

     

    I've attached a picture of how it looks with the change I described above.

     

    Have yourself a wonderful day,

    Gav

     

     

Resources