I'm teaching myself MVC and am having trouble with the fonts in the output web pages.
I have a View object that starts thus:-
#model IEnumerable<Beer.Models.Brewery>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/Index.cshtml";
}
<h2>Index</h2>
... etc etc
The file Beer\Views\Shared\Index.cshtml is:-
#{
ViewBag.Title = "Index";
}
<body>
#RenderBody()
</body>
When I run this the page is rendered in Times New Roman. I then change the Layout to:-
Layout = "~/Views/Shared/_Layout.cshtml";
which refers to Beer\Views\Shared\_Layout.cshtml, which is:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
It then renders in a different font (Helvetica, I suspect). The Visual Studio search and Agent Ransack agree that no source file contains the word "Roman" (it appears in some dlls).
So why is the page being displayed in Times New Roman? Where I should look to find out?
Edit
There are two .css files in the Beer\Content directory. bootstrap.css specifies Helvetica for the body; changing that to Courier and then Times New Roman didn't make any difference. Site.css doesn't mention fonts at all.
Related
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'm using dotnetcore and ASP MVC.
The problem is that I don't know how to serve correctly my css and images files.
Here you can see the file structure:
Here is the Shared layout's head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Galeria de comics">
<title>#ViewBag.Title - Galeria de comics</title>
<link rel="stylesheet" href="~/wwwroot/css/normalize.css">
<link rel="stylesheet" href="~/wwwroot/css/main.css">
</head>
<body>
<header class="main-header"></header>
#RenderBody()
</body>
</html>
I'm called this layout in a View.
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Libro comic detalle";
}
What's the problem?
The problem is that the CSS files aren't serve so I can't see the styles.
Any solition?
Seems I miss the href attribute's content. You should skip the wwwroot folder since the static files are served as http://app/css/cssFileName. Example: http://yoursite.com/css/main.css, same with images and js files.
Here I fixed the problem:
<link rel="stylesheet" href="~/css/normalize.css">
<link rel="stylesheet" href="~/css/main.css">
If you want to know more visit this link
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");
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
}
I am having a fair few issues using ASP.Net MVC 5 + Twitter Bootstrap 3.
Styling, that works, no issues - but the carousel I put in does not cycle, nor does it respond to the next/prev arrows or the navigation buttons.
I even gave in and pulled a carousel example from an article: (Bootstrap Carousel Tutorial to rule out errors in my code.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css") <!-- this is the bundle name -->
#Scripts.Render("~/Content/bundles/modernizr")
</head>
<body>
<!--------------------------- Carousel ------------------------------->
( Exact code from http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/ )
<!-------------------------------------------------------------------->
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
But It doesn't work, as described at the start. Any clues? [I don't want to clutter up the question with my Site.less or BundleConfig code - but if you need it, ask.]
( for the record I also tried
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="~/Content/Scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/Scripts/respond.js"></script>
rather than bundling - but same result...)
Once pointed to look in the right direction I found that I moved the the files/renamed the bundle and hadn't updated the call.
instead of
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
I should have had
#Scripts.Render("~/Content/bundles/jquery")
#Scripts.Render("~/Content/bundles/bootstrap")
to match the bundle config
var jqueryBundle = new ScriptBundle("~/Content/bundles/jquery");
...
var bootstrapBundle = new ScriptBundle("~/Content/bundles/bootstrap");