This is the first time I have worked with Content.
I created a full aspx page with all styling and etc and it looks like this with all styling/bootstrap and etc:
Using the first page as a reference, I separated the code from it and copied it into the Master Page and moved all the navbar code into Default.aspx page.
When I create a content master and add the code it shows up like this:
I am unsure why the styling and etc doesn't show up. Something must be organized wrong?
I even tried adding css directly into the Master but still css didn't work.
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="CherylsGroupWeb.Site1" %>
<!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 runat="server">
<title></title>
<!-- Latest compiled and minified CSS -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="Index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#menu-content li').click(function () {
$('#menu-content .active').removeClass('active'); // remove the class from the currently selected
$(this).addClass('active'); // add the class to the newly clicked link
});
</script>
<style>
<!-- put all css here to test as well -->
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="topContent" runat="server">
Master Pages Tutorials
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
I am not sure what exactly I formatted wrong, but by coping the structure of an example into a new Master and adding the content around my Default.aspx it displayed it. So I removed the <a> for my Default.aspx
Default.aspx
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="GroupWeb._Default1" MasterPageFile="~/Site2.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="topContent" runat="server">
<!-- my nav bar code --->
</asp:Content>
Master
<body>
<form id="form1" runat="server">
<div id='mainBody'>
<h1>
How to use Master Pages in ASP.NET
</h1>
<br />
<b>This is a Master Page Content.</b>
<br />
<br />
<div>
<asp:ContentPlaceHolder ID="topContent" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<!-- ContentPlaceHolder is used to enable the pages which uses this page as master page, to place their contents -->
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
Related
I have created a nav bar on a nested master page that allows there to be a nav bar on each web form page that is created from it. I keep getting an error at the < html > tag on the top of the page as stated in the title. The code for the pages I have is as follow.
NestedMasterPage1.Master:
<%# Master Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="NestedMasterPage1.master.cs"
Inherits="TGASAttempt.NestedMasterPage1" %>
<!DOCTYPE html> <html> <head> <link href="StyleSheet.css" rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css?family=Work+Sans"
rel="stylesheet">
<title>Navbar</title> </head> <body>
<header>
<div class="container">
<img src="TGASlogo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
<li>Tab7</li>
<li>Tab8</li>
</ul>
</nav>
</div>
</header>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div> </body> </html>
HomePage.aspx
<%# Page Language="C#" MasterPageFile="~/NestedMasterPage1.master"
CodeBehind="Home Page.aspx.cs" Inherits="TGASAttempt.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
</asp:Content>
Site.Master
<%# Master Language="C#" AutoEventWireup="true"
CodeBehind="Site.master.cs" Inherits="TGASAttempt.Site" %>
<!DOCTYPE html>
<html> <head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder> </head> <body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form> </body> </html>
Since the nested master page is nested within Site.Master there's no need to repeat all the html, head etc tags. The whole point of the main Master page is that it took care of all of that for you already. Also repeating it tries to declare a HTML document within another HTML document, which isn't a good thing.
Also the content in the nested page should be declared within an <asp:Content> block which corresponds to one of the ContentPlaceHolder blocks declared in Site.Master - this is what the error is telling you.
So for example:
<%# Master Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="NestedMasterPage1.master.cs"
Inherits="TGASAttempt.NestedMasterPage1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="StyleSheet.css" rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css?family=Work+Sans"
rel="stylesheet">
<title>Navbar</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<header>
<div class="container">
<img src="TGASlogo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
<li>Tab7</li>
<li>Tab8</li>
</ul>
</nav>
</div>
</header>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</asp:Content>
i have created the .aspx in webform in visual studio. but after i have created the htmlcoding in source and then i could not see my form filling page in designer view in visual studio?
below i mentioned the html code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MainMaster.master.cs" Inherits="ssweb.Admin.MasterPages.MainMaster" %>
<!DOCTYPE html >
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>Specialed India</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"/>
</head>
<body>
<form >
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
</form>
</body>
</html>
after i analysed well in my code,
then the problem is, if i close the script tag in open tag itself.then i could not get any thing in designer view
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
if i close the script tag like() below , i can view the changes in designer view.
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" ></script>
I have one problem ...
I have a new project When creating a master page(site.master), and when calling another page like (home.aspx) then the page gets error.
This is an error:
Server Error in '/' Application.
Content controls have to be top-level controls in a content page or a nested master page that references a master page.
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: Content controls have to be top-level controls in a content page or a nested master page that references a master page.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
This is my master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Masterpage.master.cs"
Inherits="WebApplication2.Masterpage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="CSS/jquery.mobile-1.4.0.min.css" />
<script type="text/javascript" src="JS/Jquery.min1.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
This is home.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="WebApplication2.home" MasterPageFile="~/Masterpage.Master" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>
please help me......
Thanks
D'nt use html,body and head tags again in content page.
In home.aspx you have to write your code like this :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="WebApplication2.home" MasterPageFile="~/Masterpage.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server" >
<div data-role="page">
<div data-role="header" data-theme="b">
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</asp:content>
use this link http://msdn.microsoft.com/en-us/library/wtxbf3hh.ASPX.
Hope it will work.
In home.aspx that nested from Site you cant use <head></head> or <body></body>
you must use <asp:Content> that defineded in Site
i have a website with master pages and content pages. the code for master page is:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>
<!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 runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
<form id="form1" runat="server">
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
And my content pages are like:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>
Now, the tabs renders perfectly but the text used inside tabs or section is displayed back again in each tab content.
Screenshot of how it is rendering:
And here is the rendered 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 href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>
<body style="height: 800px">
<form method="post" action="TopDeals.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />
</div>
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<input name="ctl00$SearchBox" type="text" id="SearchBox" />
<input type="submit" name="ctl00$Search" value="Search" id="Search" />
</li>
</ul>
</div>
<div>
Top deals page.
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
Anyone can tell what I am doing wrong here?
The behavior that you are seeing is as per jQuery tabs - you are not using it correctly.
One of the typical use case scenario will have markup such as:
<div id="tabs">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
</ul>
<div id="tabs-1">
Tab 1 Content
</div>
<div id="tabs-2">
Tab 2 Content
</div>
</div>
Note local referencing href on li and corresponding tab content div (with same id).
In case, URLs are used then jquery tabs will create the content div automatically and load them using AJAX (see content via AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).
This is the case with your code, you are using urls - jquery is loading the url content in a tab. So, for first tab, you can see the content of TopDeals.aspx page - and this page use the same master and hence the tab markup appears in the content div.
EDIT: work-around
Firstly, opening a new page via tab is frowned upon by usability experts - check http://www.useit.com/alertbox/tabs.html! However, to achieve what you want, you need to set the href of active tab to a local link.
For example, in master page
<div id="TopNav">
<ul>
<li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
<li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
<li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
<div id="TabContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
Notice the placement of content placeholder. Now, in each page, you have to adjust the active's tab href accordingly. For example, in TopDeals.aspx, you have to add following line in say page_load or page_prerender:
Tab1.HRef = "#TabContent";
Instead of using hard-coded tab ids etc, I would suggest to use a Repeater in master page and populating it from code-behind. That way, you can expose ActiveTab property in master page (set by content pages) that will adjust href of the correct tab.
Finally last part is tab navigation: see this FAQ from jquery tabs so that when other tab is clicked, browser will open that page (instead of content getting loaded via AJAX).
EDIT: It appears that above FAQ has been removed by jquery team. To follow the tab URL, one needs handle select event - e.g.
$('.tabs').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
location.href = url; // follow url
return false; // to disable default handling
}
});
I am utilizing CSS3 to create rounded borders in my web app. I have created a blank asp.net application, I have a master page and one content page. The content page references the masterpage as expected and the masterpage is pretty much a standard out of the box masterpage.
When I run page locally without modernizr things look fine in all browsers, however when I include the modernizr .js file reference within the masterpage's tags I get a blank html page with the background color that I have setup in my css file. Everything between the tags is not being rendered.
here is a css snippet that i have that uses the border-radius property.
#container {background:#444;width:860px;border:1px solid #FFF;border-radius: 30px 0px 30px 30px; margin:20px auto;padding:20px;}
here is my masterpage (you'll notice modernizr commented out)
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Site.Site" %>
<!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 runat="server">
<title>Name</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style/style.css" media="all" />
<!-- <script src="script/modernizr.custom.51561.js" type="text/javascript" /> -->
</head>
<body>
<div id="container">
<div id="header">
<h1>Name</h1>
<p> text
</p>
</div>
<div id="nav">
<ul>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div id="footer">
Links
</div>
</div>
</body>
</html>
And here is my content page
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Site._default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form id="form1" runat="server">
<div id="content">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</form>
</asp:Content>
Hopefully that is not code overkill... I have tried multiple .js files from modernizr, the dev version, a custom version, the production version... all seem to produce the same results. Perhaps I'm not setting it up properly, I was under the impression modernizr was just an included library that you reference and then forget about it and it pretty much takes care of the rest. Perhaps there's more to it than that.
This is broken and won't work:
<script src="script/modernizr.custom.51561.js" type="text/javascript" />
You need this:
<script src="script/modernizr.custom.51561.js" type="text/javascript"></script>
This is a mistake that you'll only make once.