Help with Main Navigation using Master Pages
Hello Experts,
I'm very new to using Master Pages in ASP.NET. Please bare with me. I would like to be able to create the Main Navigation for my website one time only using the site.master page. Then have all the other pages pull the navigation in from the site.master page. But I'm having trouble getting that to work correctly. I'm also having trouble with JavaScript and CSS files that are using in the site.master page to load correctly without error in other pages that incorporate the site.master page. Please see what I have so far.
site.master
default.aspx
I'm using ASP.NET 4.5.1 and C#
I'm very new to using Master Pages in ASP.NET. Please bare with me. I would like to be able to create the Main Navigation for my website one time only using the site.master page. Then have all the other pages pull the navigation in from the site.master page. But I'm having trouble getting that to work correctly. I'm also having trouble with JavaScript and CSS files that are using in the site.master page to load correctly without error in other pages that incorporate the site.master page. Please see what I have so far.
site.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en">
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%: Page.Title %> - My ASP.NET Application</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="~/css/normalize.css">
<link rel="stylesheet" href="~/css/foundation.css">
<script src="~/js/vendor/modernizr.js"></script>
</head>
<body>
<form runat="server">
<!-- body content here -->
<div class="row">
<div class="large-12 columns">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">Top Bar Title
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<a href="~/">Main Item 1</a>
<ul class="dropdown">
<li>
<label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Has Dropdown, Level 1</a>
<ul class="dropdown">
<li><a href="#">Dropdown Options</a></li>
<li><a href="#">Dropdown Options</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li>
<label>Section Name</label></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="~/about/default.aspx">Main Item 2</a></li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="~/contact/default.aspx">Main Item 3</a>
<ul class="dropdown">
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
</ul>
</section>
</nav>
<!-- End Top Bar -->
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</footer>
</div>
</div>
</form>
<script src="~/js/vendor/jquery.js"></script>
<script src="~/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>default.aspx
<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="about_Default" %>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>I'm using ASP.NET 4.5.1 and C#
ASKER
I removed the asp:Content tag from the default.aspx page but the navigation is not working correctly. For example, I have a folder called About which has a file named default.aspx inside. When I run the page the navigation appears but the links that point to the pages are not matching up. I'm assuming since the links are set in the site.master page they will be different for other pages that are inside folders.
Not sure I understand how to properyly setup the navigation to other pages in the site.master file so that the navigation stays in tact.
Not sure I understand how to properyly setup the navigation to other pages in the site.master file so that the navigation stays in tact.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Still no luck. When I run the default.aspx page at the root level were the site.master file is located then the navigation is fine. But If I run a default.aspx page that is located within a folder called "about" then the navigation does not work.
ASKER
I also removed the "~" as you mentioned.
ASKER
I got everything working now. I had to include runat="server" to the <a> tags for each link and I also added the "~" and everything is mapping fine now.
If you omit it, the MasterPage will keep the default you have set there.
If you have the tag in default (even if it's blank content) it will replace the content in the master page.