?
Solved

Help with Main Navigation using Master Pages

Posted on 2014-01-14
6
Medium Priority
?
334 Views
Last Modified: 2014-01-22
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
<%@ 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 &rarr;</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 &rarr;</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>&copy; <%: 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>

Open in new window


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>

Open in new window


I'm using ASP.NET 4.5.1 and C#
0
Comment
Question by:asp_net2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 23

Expert Comment

by:Snarf0001
ID: 39779846
Remove the asp:Content tag (for the HeadContent) from the default.aspx page completely.
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.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 39780416
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.
0
 
LVL 23

Accepted Solution

by:
Snarf0001 earned 2000 total points
ID: 39780943
Sorry, should have taken a closer look at the code inside.
See for example this line:

<a href="~/contact/default.aspx">Main Item 3</a>

You need to keep in mind that the "~" character is strictly a .net thing.  If you have that in and actual asp:HyperLink or other server control it will resolve properly, but as far as html goes, it's jibberish.

So when you have a normal html <a> tag with the ~ in it, it's just going to tack that on to the current url and interpret as relative.

That's most likely the same issue you're having with JS and CSS, remove the ~ from all of those links and post back if that resolves or you're still having issues.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Author Comment

by:asp_net2
ID: 39782168
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.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 39782169
I also removed the "~" as you mentioned.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 39799825
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.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Many of us here at EE write code. Many of us write exceptional code; just as many of us write exception-prone code. As we all should know, exceptions are a mechanism for handling errors which are typically out of our control. From database errors, t…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question