troubleshooting Question

Help with Main Navigation using Master Pages

Avatar of asp_net2
asp_net2Flag for United States of America asked on
.NET ProgrammingASP.NET
6 Comments1 Solution349 ViewsLast Modified:
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>

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 CERTIFIED SOLUTION
Snarf0001

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros