I've created an MVC 4 app (Internet template). The body it created is 1903px wide by 300px tall. In the image below, you can see how it's being rendered. I don't see anywhere where a width is being specified, and I'm curious as to why it decided to create a width of 1903px (and a height of 300px).
If it helps, the HTML of the main page looks as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - The Exchange Site</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<img src="~/Images/CompanyLogo.png">
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Siesta Key Software, LLC</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/ExchangeSite")
#RenderSection("scripts", required: false)
</body>
</html>
I've just had exactly the same issue / question. It is setting the width based on the width of the browser window. If you make your window narrower and refresh the screen you will see that the width property (and probably the height property) have changed. I got around this by explicitly setting the width in the Site.css of the body as follows :
body {
width:2000px;
}
Related
I was viewing lot's of tutorials , moving from web-forms and .master vs MVC Master layout.
the issue i have is regarding the embedded global files vs individual pages own files.
(files= styles and scripts)
Side note in my views i have implemented a little naming convention/rule so that layouts-masters has a LO postfix,
so if my app named "SAdmin", then my layout(master)-chtml will be named :_SAdminLO.cshtml
and in my layout-master i have :
(for simplicity)just a main bar - links (so that all pages has the "links" top-bar)
this is the main layout
[textlink1] | [textlink2] | [textlink3] | [textlink4] ....
then i have index page(it's name is cpanel)
in my index cpanel.chtml i have added icons in addition to the main layout's textual bar ... replication of the top bar in a form of
icons menu
[IMG] [IMG]
page_name page_name
[IMG] [IMG]
page_name page_name
so together Layout-master _SAdminLO.cshtml + cpanel.chtml - froms the "home page" of my app
now i have individual pages that are totally independent in their actions
but all they need is the css + html of the top bar, as opposed to cpanel (the index)
so my situation is that:
in rightclick-> view-source, i can see that all my pages has double html tags -
<html> + <head> + <body> markup of `LO`
&
<html> + <head> + <body> markup of `individual.cshtml `
the files :
-master-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href='#Href("~/Content/css/GlobUtils.css")' rel='stylesheet' type='text/css' />
<title>#ViewBag.Title</title>
#Scripts.Render("~/js")// C# bundle
#RenderSection("head", false)
</head>
<body id="bodid">
<h2>Cpanel</h2>
<div id="navbar">
<ul id="nav">
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-0" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-0 current_page_item menu-item-0">
#Html.ActionLink("Cpanel", "Cpanel", "ControlPanel")
</li>
<li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1 current_page_item menu-item-1">
#Html.ActionLink("Templates Generator", "TemplateGenerator", "ControlPanel")
</li>
<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-2">
#Html.ActionLink("Content Editor", "ContentEditor", "ControlPanel")
</li>
<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3 current_page_item menu-item-2">
#Html.ActionLink("Files Uploader", "FilesUploader", "ControlPanel")
</li>
<li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-2">
#Html.ActionLink("Code Dev", "CodeDev", "ControlPanel")
</li>
</ul>
</div>
</ul>
</div>
#RenderBody()
</body>
</html>
someindividualpage.chtml
#{
Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
}
#model MvcE.Models.IndexModel.CreatedTemplateJPacket
<!DOCTYPE html>
#{
ViewBag.Title = "TemplateGenerator";
}
<html>
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Template Generator</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='#Href("~/Content/css/Chrm_TemplateGenerator.css")' rel="stylesheet" type="text/css" />
</head>
<body id="bodid">
<div id="DivEditor">
<h1 id="ContH"> ControlPanel - TemplateGenerator</h1>
<div class="container-fluid">
<div>
<a class="btn btn-CtrlsTmplt" id="save" href="#">save</a>
<a class="btn btn-CtrlsTmplt" id="load" href="#">load</a>
<a class="btn btn-CtrlsTmplt" id="clear" href="#">clear</a>
<input type="text" id="scr1" class="input_Border_AndBGClear" />
</div>
<hr/>
#*----------------------------------localData-------------------------------------*#
<div id="localData">
<input id="DataValue_FormFileds" type="hidden" />
</div>
</div>
</div>
<div id="SaveNewTmpltWwrap">
</div>
<script src='#Href("~/Js/jspart2.js")' type="text/javascript"></script>
</body>
Maybe I'm not quite understanding but it seems you can use custom sections.
_Layout
<html>
<head>
<title>#ViewBag.Title</title>
#* common script, css *#
<script src="jquery.js"></script>
#* variable script, css *#
#RenderSection("customHead", required: false)
</head>
<body>
<!-- nav bar here -->
#RenderBody()
#RenderSection("footer", required: false)
</body>
</html>
SomePage.cshtml
#{
Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
ViewBag.Title = "Some Page 1";
}
#section customHead {
<script src="page1.js"></script>
}
#* no <html>,<head>,<body> *#
#* inserted into RenderBody() *#
<div id="page1content">
...
</div>
Because the section declared required: false it will won't try to render anything unless the view contains that section.
You can change the section content per page.
SomePage2.cshtml
#{
Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
ViewBag.Title = "Some Page 2";
}
#section customHead {
<script src="page2.js"></script>
}
#section footer {
<div>footer</div>
}
<div id="page2content">
</div>
Rather than multiple layouts -- you can also use Partial Views and Child Actions to do variable content rendering.
SomePage3.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Some Page 3";
}
#Html.Partial("widget")
#{Html.RenderAction("UserInfo");}
Now much of the layout content is removed and it becomes content inclusion rather than defining everything with exclusion rules.
I find fewer layout pages and using partials is more maintainable and the pages easier to understand what will render by looking at just the view page.
I want to prevent any client page in my MVC 5 application from being cached. My _Layout.cshtml page looks as follows. Notice the code in the head tag. Is this enough (and is it correct) to prevent caching on any page in my app? Or do I need to also add code on every page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="visible-lg visible-md" src="~/Images/WebBirderFatbirder.png" title="WebBirder">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div id="bodyContentDiv" class="container body-content">
#RenderBody()
<hr />
<footer>
<br/>
<br />
<br />
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Please see www.lancoministorage.com as an example. When I load this site up on my iPhone, the content displays at the top (starting with the call button), and the header is not seen unless someone would manually pull the screen down. Is there a way I can get this to load with the header image displaying at the top?
This is how I did my main layout.
<!DOCTYPE html>
<html>
<head>
<title>Lanco Mini Storage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="c">
<img src="images/logo.jpg" alt="Lanco Mini Storage">
</div>
<!--header-->
<div data-role="content" data-theme="a">
<ul data-role="listview" data-divider-theme="a" data-theme="b" data-inset="true">
<li>Call Us at (717) 291-6022</li>
<li>Send Us an Email</li>
<li>Map to Our Location</li>
<li>Hours of Operation</li>
</ul>
</div><!--content-->
<div data-role="footer" data-theme="c">
<div data-role="navbar" data-iconpos="top" class="footer">
<ul>
<li>View Full Website</li>
</ul>
</div><!--navbar-->
</div><!--footer-->
</div><!--page-->
...page content continued (not shown)
Thank you for your help!
I created a new MVC4 internet application. I'm just following the book ASP.NET MVC4 in Action. The chapter is Ajax is ASP.NET in MVC.
the view for index goes like this
#section head{
<script type ="text/javascript"
src="#Url.Content("~/Scripts/AjaxDemo.js")"></script>
}
#Html.ActionLink("Show the privacy policy", "PrivacyPolicy", null, new{id="privacyLink"})
<div id="privacy"></div>
and partial view contains some very basiic markup.
<h2>Our Commitment to privacy</h2>
This is sample priavcy policy.
In AjaxDemo.js file whose path is given in index.cshtml file i have small code
$(document).ready(function() {
$('privacyLink').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$('#privacy').load(url);
});
});
now when I run this application and manually give the link as http://localhost:19208/customajax
I get error saying
The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_Layout.cshtml": "head".
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_Layout.cshtml": "head".
any idea what's the mistake that I'm doing here?
The _Layout.cshtml is as default, I haven't changed anything to it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
You have not defined the head section in the _Layout.cshtml
You just need to defined it in the head section of _Layout.cshtml
As
<head>
#RenderSection("head", required: false)
</head>
jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});