I am using the following code to display a login form (Login.cshtml) when the user is not authenticated and the main page when the user is authenticated:
Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META SECTION -->
<title>Coalesce</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- END META SECTION -->
<!-- CSS INCLUDE -->
<link href="~/Content/Template/css/theme-default.css" rel="stylesheet" />
<!-- EOF CSS INCLUDE -->
</head>
<body>
#if (!Request.IsAuthenticated) {
<div class="login-container">
#RenderPage("~/views/Account/Login.cshtml")
</div>
RenderBody();
}
else {
...Normal page here
}
</body>
</html>
The Login.cshtml looks something like this:
<!DOCTYPE html>
<html lang="en">
<body>
...Login controls
</body>
</html>
I am using OWIN and everything wroks fine, but when I hit the login page portion, it only displays on half the screen, so half is the login page, and the bottom is white.
I've tried RenderPartial and a few other things in the authentication check, but I get get the login page to display on the full browser window.
I'm sure its the way that
#if (!Request.IsAuthenticated) {
#RenderPage("~/views/Account/Login.cshtml")
RenderBody();
}
is constructed, but i'm currently stumped.
I've never seen this approach before, but in any case (assuming it works) Login.cshtml should not contain <!DOCTYPE>, <html> and <body> tags because it will be rendered inside Layout.cshtml, which already contains these tags.
The approach that I am familiar with is: let a Controller, or even a global ActionFilter, check if one is logged in. If not, show View("Login"), or redirect to /Home/Login. Then let Login.cshtml be rendered using Layout.cshtml (which contains no login logic) - and not the other way around which is what you seem to be trying.
Controllers/HomeController.cs example
public ActionResult Index()
{
if (!Request.IsAuthenticated)
return View("Login");
// Add normal flow here
}
Related
I am using thymeleaf ,html for front end development , when I try to
set image on my page, image is not showing . How to set image ,images
are in my local folder
Here is my project structure
Here is the my code stuff ,that I used to set to display the image on
page.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>My Music</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" th:href="#{/css/myMusic.css}">
</head>
<body>
<nav>
<ul>
<li class="brand"><img th:src="#{/static/images/logo.jpeg}"></li>
</ul>
</nav>
</body>
</html>
this code is not able to show the Image, Below out put of this code
I am using IntelIJ ultimate 2021.1 as code editor
Spring Boot will serve everything in src/main/resources/static at the root, so you need to change:
<img th:src="#{/static/images/logo.jpeg}">
to:
<img th:src="#{/images/logo.jpeg}">
I am creating a web app in mvc using Javascript and Jquery.
when I comment the line for layout which is below,
//Layout = "~/Views/Shared/myLayout.cshtml";
my ui looks fine in all the mobile devices, but when I un-comment this line like the following,
Layout = "~/Views/Shared/myLayout.cshtml";
my font-size decreases and it makes very difficult to understand,
my myLayout.cshtml is empty
what is the problem here and how can I solve this?
Kindly edit your myLayout.cshtml to
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
#RenderBody()
</body>
</html>
Then in your view, remove all the <html>, <head> and <body> tags.
The trick here is <meta> tag. You can learn more about it here.
I have a simple typescript game(using Phaser.io) that i what to run from an ASP.net MVC application in an MVC 5 View page with Layout (Razor)
I have added the view and the controller
/Views/Home/About.cshtml
#{
ViewBag.Title = "About";
}
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="~/phaser.js"></script>
<script src="~/app.js"></script>
<div id="game"></div>
The game starts but it does not show any images. It looks like the reference to the image is wrong.
http://asskicker3.azurewebsites.net/Home/About
I reference the images as follows in the app.ts:
preload() {
this.game.load.image('background',"assets/background.jpg");
If i add an HTML page to the root of my folder it all work perfect.
http://asskicker3.azurewebsites.net/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body style="margin:0px; padding: 0px;">
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="phaser.js"></script>
<script src="app.js"></script>
<div id="game"></div>
</body>
</html>
Answer:
James Skemp solutions works. Just by adding the / it all works. Perfect!
Your asset references are relative.
So if you look at the network tab in a browser you'll notice that it's trying to load the graphics relative to the URL. For example, http://asskicker3.azurewebsites.net/Home/assets/background.jpg
One way to fix this would be to change your preload so that the asset URLs are absolute instead of relative. So
this.game.load.image('background', "assets/background.jpg");
would become
this.game.load.image('background', "/assets/background.jpg");
Please find 2 set of code blocks below and let me know which one is to follow and why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"></div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed"></div>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</body>
</html>
and set 2 is....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
(ie) which one is right, putting all the scripts at the top or at bottom?
Both of them are correct, only difference is how are you going to bind events.
In the first case, because HTML is already loaded into the DOM events can be bound directly like this:
$('#buttonID').on('click', function(){
});
Because button is already into the DOM, click event can be bound directly to it.
In the second case, because jQuery Mobile is loaded before page content all event binding must be done like delegation:
$(document).on('click', '#buttonID',function(){
});
This is a safer but slower solution. It don't require for object to exist to bind an event to it.
To make a story short, solution 1 is slightly faster.
First case to improve performance .... this is said to be general practise to keep javascript down the page ...so that content is loaded faster .... though no facts or analysis personally I have on same. Check this nice post sameelegantcode.com/2010/03/30/your-javascript-goes-where/
It will good to place all javascript at the bottom of the page. Never forget that page rendering can be delayed by javascript parsing/execution. Well, I believe you love to read http://developer.yahoo.com/performance/rules.html#js_bottom
I made a script that loads content based on the current request locale. Something like
class ScriptsTagLib {
static namespace = "my"
def loadLangInfo = { attrs ->
Locale locale = RequestContextUtils.getLocale(request)
r.script() {
out << '$(function(){ loadLangInfo("'+locale.language+'") });'
}
}
}
If I add this in my layout, the page throws an error:
Error evaluating expression [my.loadLangInfo()] on line [6]: Cannot
add module [-page-fragments-] which requires disposition [defer] to
this request - that disposition has already been rendered.
Error 2012-11-19 15:13:54,801 [http-bio-8080-exec-5] ERROR
[Tomcat].[localhost] - Exception Processing ErrorPage[errorCode=500,
location=/grails-errorhandler] Message:
java.io.UnsupportedEncodingException: The character encoding [null] is
not supported
But if I add this tag in my page instead of the layout, the page is rendered with success.
It's not possible to add r.script() to a layout?
EDIT: The problem is really with resources in the layout. Another example that fails is:
<g:layoutHead/>
<r:script>
$(function(){ });
</r:script>
<r:layoutResources />
EDIT 2: More info about the context
Grails 2.0.4
Resources 1.2.RC2
Also, it's a layout inside a plugin, and not one app.
Not tested in Grails 2.1, but will do that.
EDIT 3:
Just tested now, with Grails 2.1.1 and Grails 2.0.4 new fresh plugin projects, and the script tag in the layout is ignored!
./views/layout/test.gsp -> Script ignored
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><g:layoutTitle default="Insoft4 UI Plugin"/></title>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<g:layoutBody/>
<r:script disposition="defer">
alert('layout!');
</r:script>
<r:layoutResources />
</body>
</html>
./views/index.gsp -> Script OK
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Teste</title>
<meta name="layout" content="teste" />
<r:script disposition="defer">
alert('index!');
</r:script>
<r:layoutResources />
</head>
<body>
<h1>Testing this index!</h1>
<r:layoutResources />
</body>
</html>
I found out that the problem occurs when you have declared <r:layoutResources /> in both, layout and page and you try to add a script in the layout.
To correct I removed the layoutResources from every view, leaving just in the layout.
Try to add tag before the last r:layoutResources on the layout.