Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Help with Main Navigation using Master Pages

Posted on 2014-01-14
6
Medium Priority
?
336 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 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
Industry Leaders: 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

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.

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…

581 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