Short:
Do you put the data-role portions (header|content|footer) in your layout/master page or in each view in ASP.NET MVC?
Long:
Trying to find the 'best practice' with handling jQuery mobile layout. The docs (and some others) show:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
...
</head>
<body>
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">#RenderBody()</div>
<div data-role="footer">...</div>
</div>
</body>
</html>
However I have seen this too :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
...
</head>
<body>
<div data-role="page">
#RenderBody()
</div>
</body>
</html>
With each view having:
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
So, do you define the header|content|footer in each 'view' in ASP.NET or in the layout/master? Is one better? Does it matter at all?
I've noticed that navigation (using the back button) only works correctly when you use the first option (DRY). I am facing the same issue. If I want different header content how do you change this if you have one layout page. I think the way to go is to create sections in the master layout page and enable them per view as required.
RenderSection("SectionName")
Personally, I've been using the second practice for Don't-Repeat-Yourself sake.
Related
I have a common layout which, by default, should display a (basic) search form on each page excepted the search page itself which contains a (more advanced) search form already.
Is it possible to pass a parameter from my search page to the layout in order to not display the default search form?
Here is an example of what I would like to do:
layout.html
<html layout:???="displayShowForm = true">
...
<form action="search" th:if="${displayShowForm}">...</form>
...
<div layout:fragment="content">...</div>
home.html (show the default search form)
<html layout:decorator="layout">
...
<div layout:fragment="content">...</div>
search.html (hide the default search form)
<html layout:decorator="layout (displayShowForm = false)">
...
<div layout:fragment="content">
...
<form action="advancedSearch">...</form>
Yes, it's entirely possible, even though Thymeleaf's documentation doesn't clearly state it.
All you have to do is pass your param using the th:with attribute. There may be other methods, but this seems to be the most straight-forward.
Here's a stripped down version of my implementation:
Default decorator - fragments/layout/default.html
<!doctype html>
<html xmlns:layout="http://www.thymeleaf.org" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:replace="fragments/header :: main"></div>
<div layout:fragment="content">
main content goes here
</div>
</body>
</html>
Header fragment - fragments/header.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="main">
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
</ul>
</nav>
</div>
</body>
Home Page file - home.html
<!doctype html>
<html layout:decorator="layout/default" th:with="currentPage='home'"
xmlns:layout="http://www.thymeleaf.org/" xmlns:th="http://www.thymeleaf.org">
<body>
<div layout:fragment="content">
This is my home page content... thrilling, isn't it?
</div>
</body>
</html>
Here, in the home.html file, you can see I include the default decorator and pass my parameter using the th:with attribute. I don't actually use my parameter in my layout decorator, but I use it in header.html, which is included from the decorator. No need to pass it from the decorator to the header.html fragment, since it's already in scope.
There was also no need to do a NULL check on the currentPage variable in header.html. The active CSS class was simply not appended when removing the parameter from home.html.
If I were to render home.html, I would expect to see the following output:
<!doctype html>
<html>
<body>
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
</ul>
</nav>
<div>
This is my home page content... thrilling, isn't it?
</div>
</body>
</html>
Yes, it is possible to pass parameters but you need to use layout:include instead of layout:decorator or layout:fragment.
Similar to Thymeleaf's th:include, but allows the passing of entire
element fragments to the included page. Useful if you have some HTML
that you want to reuse, but whose contents are too complex to
determine or construct with context variables alone.
Source : https://github.com/ultraq/thymeleaf-layout-dialect
You should take a look at this documentation which will give you details about the way to use it.
In your case, it could look like :
<div layout:include="form" th:with="displayShowForm=true"></div>
And in the layout page of form :
<div layout:fragment="form">
<div th:if="${displayShowForm} == true">
<form action="basicSearch"></form>
</div>
<div th:if="${displayShowForm} == false">
<form action="advancedSearch"></form>
</div>
</div>
I have a problem I cannot wrap my head around, it is driving me crazy. I used the default template for MVC projects in VS2013 and everything works fine. I can login with users I've created using the Forms Authentication, etc. The problem I have is that when I drop a _ViewStart into the Account views folder, and use a custom layout for the login pages ... I keep getting redirected to the login page everytime I try to login. My Login Post method is also not being called, only the Default Login ActionResult fires. If I take the ViewStart file out and use the default layout, I have no problems.
Here is my _LoginLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Corporate</title>
<link rel="stylesheet" type="text/css" href="~/Content/style.css">
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
</head>
<body>
<div class="holder login">
<div class="row">
<div class="col-lg-5 left">
<img src="~/images/logo.png" alt="logo" />
</div>
</div>
<div class="row">
<div class="col-lg-6 border">
<img src="~/images/corporate.png" alt="corporate" />
<br />
<form>
#RenderBody()
</form>
</div>
</div>
<footer>
<p>© #DateTime.Now.Year - Application. All Rights Reserved.</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</div>
</body>
</html>
Here is the ViewStart...
#{
Layout = "~/Views/Shared/_LoginLayout.cshtml";
}
The login page is basically the same boiler plate page provided when you start the project. Everything works until I start trying to use a custom layout and viewstart.
Ok. I'm dumb.
#using (Html.BeginForm("Login", "Account",....
Creates Form tags. My layout had Form tags wrapping the RenderBody(). I was essentially nesting form tags which is a nono. Mystery solved.
It's the little things that get you.
I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
I want to open a new page as popup. I google it but not able to find answer.
Is Possible to do like that ??
Any Other Method to like that..I search all the Jquery mobile Doc. but not able to find any thing.
Here is my Code::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Popup</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
</div>
<div data-role="page">
<div data-role="Header">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<p>
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
</p>
</div>
<div data-role="Footer">
Sounds Good
Cancel
</div>
</div>
</body>
</html>
Short answer is no, it cant be done, at least in jQuery Mobile versions < 1.4. Popup as it is MUST be part of the page DIV and as such it can't be accessed outside of a page.
There is another solution, you can replace your second page div with data-role="popup" and place it inside a first page DIV, it would look like this:
jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/103/
HTML :
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
<div data-role="popup" id="popupExample">
<div data-role="header"class="ui-content">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<p>
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
</p>
</div>
<div data-role="footer" class="ui-content">
Sounds Good
Cancel
</div>
</div>
</div>
You will need to play with a CSS to make it look nicer.
Other solution would be to wait for jQuery Mobile 1.4 which will allow for popup to be placed outside page DIV, so you can share it among several pages. Unfortunately jQuery Mobile is in alpha state and this feature is still not working correctly.
I've developed an app for ios and android using phonegap. It's a dictionary app and it will display result in multiple tab (the tab is a div, every div will display different content). I use my own code so that only one div is shown at any time. Now I want to include jquerymobile so that I can apply a animation/transition when switching to other div.
So I add the data-role="page" to each div, which I assume will work immediately(like sample code below). But something is not right.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<table id="headergroup">
<tr><td>
<input>.........
<img>.......
</table>
<wrapper>
<div data-role="page" id="tab1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
.........other div......
<div data-role="page" id="tabN">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>PageN content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</wrapper>
<div id="footer>
<img .......>
</div>
</body>
</html>
Supposely, my app should display the div(s) in the wrapper only. But the problem is, now my app will display the div with data-role=page in full screen and on top of other element (my app header and footer were not shown).
Is my implementation correct? How do I overcome this problem? Thanks.
You may get by with this on the first page, but on all other pages you are loading in via JQM-Ajax (default), you will only grab what's inside your first(!) div-data-role="page" from the page you are loading. Everything else (table, 2nd, 3rd page-div will not be loaded, because it's outside the page-div.
Have a look at the JQM docs on page anatomy and linking pages.
JQM is based on page-divs, so also in your code the page-div will get most "JQM attention" being set to fullscreen size and of cource hovering above everything else.
To use JQM you will either go with
Single page layout = page by page
Multi pape layout = multiple pages contained in one document.
Since you are using Phonegap, which I think bundles everything into a single file eventually, you may be better off with multipage. There is also a subpage widget or multiview, if you need to load documents with multiple "nested pages" from your initial page.