ASP.NET MVC4 only showing #RenderBody content on IIS7
Setup: I've got a VM running Windows 7 upon which I've installed IIS7, MVC3 & MVC4 with Web Platform Installer. I've added a new website in IIS using a .NET 4.0 application pool, and then used the Visual Studio 2012 publish option to publish an MVC4 web app to the website's root directory.
The problem is that the only output I am getting is whatever is in the individual views. There is no layout, nothing other than the #RenderBody content.
It works fine when I preview it with Visual Studio.
This is my _Layout.cshtml:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- this is decorative -->
<div class="topbar"></div>
<div class="row header">
<div class="five columns logo">
<a href="#Url.Action("Index", "Home")">
<img src="#Url.Content("~/Content/images/logo.png")">
</a>
</div>
<div class="seven columns nav">
#Html.Partial("_TopNavigationPartial")
</div>
</div>
#RenderBody()
<div class="row">
<div class="twelve columns box-padding">
<div class="box">
<div class="row footer">
<div class="six columns copyright">© 2013 snip.</div>
<div class="six columns nav">
#Html.Partial("_BottomNavigationPartial")
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
All that will be output though is what is in the view, e.g:
<div class="row">
<div class="twelve columns box-padding">
<div class="box">
<h1>Home</h1>
<p>You are here: Home/Index</p>
</div>
</div>
</div>
Anyone have any idea why this might be so?
It's probably just that I haven't set up IIS7 right.
Edit: I just uploaded the Internet application and it has done the exact same thing. Only the view content is being output. So it's definitely something in IIS.
Edit 2: I have set up an Internet application as an application in IIS but still it returns the view content only. Weird.
Edit 3: Got it working, not sure how. http://i.imgur.com/ZpKb4P5.gif
Managed to fix this. Not sure exactly what was the problem, but I was making a new website and then dragging the published files into it, which wasn't working.
I then added an application to the default website, which worked, but then I found this post which explained that the default website itself is an application.
So in the end I just copied the published files into the default root directory and it worked.
Related
I am trying to migrate my old mvc app to bootstrap 4 and admitedly I have little experience with scss files.
Lets say I have a simple _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Source/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Source/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Source/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Source/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
a View:
<div>
<div class="row">
<div class="col-md-2">
-OOO-
</div>
<div class="col-md-3">
-WWW-
</div>
<div class="col-md-7">
-KKK-
</div>
</div>
</div>
and a Controller with method:
public ActionResult Index() => View();
Bootstrap v4.3.1
JQuery v3.4.1
As soon as the View renders the weird situation happens, the '.col-md-2' class is rendered with wrong width values because '_grid-framework.scss' appear twice in the styles list and the wrong one has precedence:
My questions are:
Why browsers see two different files with the same path??
How do I make bootstrap generate only the correct version of the file?
I tried the regular things with clearing cache, clearing/recompiling, removing content from the IIS and rebooting the IIS.
// EDIT 1
Actually the comment about bootrap 4 dropping .col-sm-*, .col-md-*, etc confused me and it turns out it is not really the case (they even added xl tier). So the problem stands, I am currently overriding .col-md-2 styling in the .css file but I don't really want to do that.
I'm trying to set up a new internal web page using bootstrap (both versions 3.3.6 and 4.0.0-alpha.6) columns, but for some reason they don't show up in Internet Explorer 11 (company-mandated). Instead of columns, the text is stacked vertically (see examples).
I have tried everything from complex code to the simple code I have attached to this question. Nothing has worked. I have also looked at every single web page I could find on this, and likewise nothing has worked. I have also tried using xs, sm, md, lg and xl column sizes, and they don't make any difference.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<title>Test 4</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">lg-4</div>
<div class="col-lg-4">lg-4</div>
</div>
<div class="row">
<div class="col-lg-3">lg-3</div>
<div class="col-lg-3">lg-3</div>
<div class="col-lg-3">lg-3</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">variable</div>
<div class="col-3">variable</div>
<div class="col-3">variable</div>
</div>
</div>
The above code results in:
lg-4
lg-4
lg-3
lg-3
lg-3
variable
variable
variable
Instead of:
lg-4 lg-4 lg-3 lg-3 lg-3
variable variable variable
Bootstrap Grid System allows 12 columns across a page.
In order to avoid using all the 12 columns individually we can split the columns into sub columns as per our requirements.
However we need to ensure that the sub columns always sums up to 12 and never exceed 12 or else the content switches on to the next line.
So perform appropriate changes in your code as per the above concept and apart from that to support the grid system in IE 11 consider including the following tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
In order to have further knowledge about grid system visit the following link :
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Boy, is my face red ...
I closed the browser, cleared the cache, and went back in ... and it worked fine.
Live and learn ... sorry for the wasted time ...
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">Column 1-a</div>
<div class="col-lg-3">Column 1-b</div>
<div class="col-lg-3">Column 1-b</div>
<div class="col-lg-3">Column 1-b</div>
</div>
</div>
I created a new ASP.NET MVC Webapp. I added foundation for MVC using Nuget package manager and removed the bootstrap package. At this point, everything is perfect.
I then added Kendo UI to the MVC Webapp just as I normally do. This is what my Index.cshtml page looks like for a simple test:
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
<h3>Content goes here</h3>
<br/>
#(Html.Kendo().DatePicker().Name("datepicker"))
</div>
</div>
It seems like Foundation is somehow affecting the Kendo styles because the datepicker does not look how it should look. Does anyone have any ideas to why this could be happening? I purposely added anything related to KendoUI after Foundation to avoid this problem.
Here is my head tag in _Layout.cshtml
<head>
<meta charset="utf-8" />
#*Set the viewport width to device width for mobile *#
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - Welcome to Foundation</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Styles.Render("~/Content/foundation/css")
#Styles.Render("~/Content/kendo/css")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/kendo")
#RenderSection("head", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
Here is right before the closing body tag in _Layout.cshtml
#Scripts.Render("~/bundles/foundation")
<script>
$(document).foundation();
</script>
#*Use the Scripts section to define page specific scripts*#
#RenderSection("scripts", required: false)
Following is code i used this is from template when i run this file i see error
bootstrap.css.map:1 GET http://localhost:8000/css/bootstrap.css.map 404 (Not Found)
but there is no link i made and error shows link is on first line can someone help me where the link is
how do i remove that link can someone help me with this
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Animus A Blogging Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Graphic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
</head>
<body>
<div class="contact-top">
<div class="container">
<h2>Log in</h2>
<div class="contact">
<p></p>
<div class="contact-down">
<div class="contact-right">
<div class="col-md-6 contact-info">
<form>
<input type="text" name="your name" placeholder="USER NAME" class="input">
<input type="password" name="your email" placeholder="PASSWORD" class="input">
<div class="clearfix"> </div>
<input type="submit"value="SEND" />
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's coming from your bootstrap.css file. You can remove the reference by editing that file and removing the following line from your code:
/*# sourceMappingURL=bootstrap.css.map */
Source Mapping files should only be used by the Developer Tools.
With Bootstrap you can disable the source map if you like or just ignore the 404 for any .css.map when using the Dev Tools.
If you want to use the Dev Tools for Debugging or want to have more 'completeness' to your code add the .css.map file available from Bootstrap along side the .css file.
Reference: https://developer.chrome.com/devtools/docs/css-preprocessors
Other similar questions: what are the .map files used for in Bootstrap 3.1?
Either you can remove
`/*# sourceMappingURL=bootstrap.css.map */
as mentioned by #xengravity or you can download bootstrap.css.map file of your bootstrap version and add it in your directory.
All I am trying to do is to get some text to begin in the middle of the screen.
Here is the code below. Note that I have included the minified bootstrap css and js files in my project directory along with my html file without subdirectories. I got those files from the precompiled Bootstrap 3.0.1 download. I also tried using the links to the CDN instead. Still didn't work. When I open this code in Firefox I don't see any positioning active at all. Other Bootstrap styles didn't work either, like I tried to do <p class = "large"> blah </p> and it didn't make the text large.
NOTE: To make it easier for people to test the page, I replaced links to local bootstrap files with a link to the bootstrap CDN file.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="span3 offset9">
<p class="large">This Text</p>
</div>
</div>
<h1>Hello, world!</h1>
</body>
</html>
in your jsfiddle, the bootstrap stuff isn't correctly used, all it needs is
<body>
<div class="row">
<div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>
and some externe resouces, http://jsfiddle.net/N5n4Z/1/, is a Bootstrap 2 skeleton, with your example in it, and it work. Well unless the preview window is to small. If the Window is to small, bootstrap, due to its media querys, automatically arrange all rows underneath, and ignore every offset.
On a side note, why not using the new Bootstrap 3? http://getbootstrap.com/
Update
Since you use Bootstrap 3 now, you have to change the markup a bit.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>test loc</p>
</div>
fiddle
bootstrap docu
You forgot to import the javascript part of bootstrap.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>