CODEWITHSUNDEEP
asp.netjquery-mobileasp.net-mvc-4
Paul
Paul

Reputation: 5924

ASP.Net renders two pages together

This makes no sense to me, and hopefully I can explain this right.

I have a basic jQuery Mobile application that uses Asp.Net MVC 4. After logging in to the application, if I click the account button in the upper left, the page loads, but is missing themes. If I then click refresh, everything looks fine.

I compared the resulting HTML in Chrome's F12 window. The second page is of course correct. The first page contains all the same HTML, however, an additional div is placed at the start of the body. This div is showing the main application page to my application. It has a data-role of 'page' and is hidden from view. I can only assume jQuery Mobile is only applying a theme to the first data-role 'page' that it finds and is therefore skipping the correct one.

Why do I get a different page from clicking on account vs clicking refresh when on the account?

[EDIT] - Two people asked for code. I am extremely new to Asp and to jQuery Mobile and had thought this was likely a simple pebkac error that someone would point out. Code is below:

Here's Index.cshtml

@model TimeCard.Models.LoginModel

@{
   ViewBag.Title = "Your Account";
}

@section Header {
   @Html.ActionLink("Back", "Index", "Home", null, new { data_icon = "arrow-l", data_rel = "back", data_iconpos = "left" })
   <h1>@ViewBag.Title</h1>
}

<ul data-role="listview" data-inset="true">
   <li>@Html.ActionLink("Log off", "LogOff")</li>
</ul>

Here's the shared layout:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>@ViewBag.Title</title>
   <meta name="viewport" content="width=device-width" />
   <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
   @Styles.Render("~/Content/mobileCss", "~/Content/css")
   @Scripts.Render("~/bundles/modernizr")
</head>
<body>
   <div data-role="page" data-theme="b">
      <div data-role="header">
         @if (IsSectionDefined("Header")) {
            @RenderSection("Header")
         }
         else {
            <h1>@ViewBag.Title</h1>
            @Html.Partial("_LoginPartial")
         }
      </div>
      <div data-role="content">
         @RenderBody()
      </div>
   </div>
   @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
   @RenderSection("scripts", required: false)
</body>
</html>

Last, Here's an image showing the correct and incorrect output as well as the rendered HTML. The "Back" button is highlighted in both code snippets.

Upvotes: 0

Views: 170

Answers (1)

Paul
Paul

Reputation: 5924

So the fix was to add data_ajax = "false" the HTML.BeginForm() method being called in the login screen, as well as to the action link for the account page. Although this is the 'answer', it leaves me more confused than ever. Can anyone explain why this fixes my issue? And do I need to add this to all action links? I'll gladly accept an answer from someone who can tell me why this is.

Upvotes: 1

Related Questions