Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Help with Main Navigation using Master Pages

Posted on 2014-01-14
6
Medium Priority
?
335 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Independent Software Vendors: 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!

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
For those of you who don't follow the news, or just happen to live under rocks, Microsoft Research released a beta SDK (http://www.microsoft.com/en-us/download/details.aspx?id=27876) for the Xbox 360 Kinect. If you don't know what a Kinect is (http:…
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

604 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