Solved

Help with Main Navigation using Master Pages

Posted on 2014-01-14
6
323 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
  • 4
  • 2
6 Comments
 
LVL 22

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 22

Accepted Solution

by:
Snarf0001 earned 500 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now