t.l.d.r.

How to achieve what is stated in the title of the article.

read more...

I have recently come across this issue when building a website with two pages under one root (same master page):

• the main page is a long landing page with a number of anchor links, and
• the second page that holds some general information.

On the landing page, I have created main menu items from the anchor tags. The second page has no menu item on its own.

I could jump all over the landing page using my main menu. Unfortunately, from the second page the main menu just would not work at all (error 404). So, I had to find a way to fix this behavior in such a way that clicking on a menu item from the second page would open the landing page at the appropriate anchor tag.

This is how my main menu looked like before (simplified version):

<ul class="nav navbar-nav">
  <li>
    <a href="#showcase">@showcaseMenuText</a>
  </li>
  <li>
    <a href="#purpose">@purposeMenuText</a>
  </li>
  <li>
    <a href="#invitation">@invitationMenuText</a>
  </li>
  <li>
    <a href="#contact">@contactMenuText</a>
  </li>
</ul>

If I clicked say the Invitation menu item, I would see this url in the browser: http://my-website.com/#invitation. When my second page opened, I saw this url: http://my-website.com/page2. Now, when I clicked the Invitation menu item again, I would see this url: http://my-website.com/page2#invitation, which of course did not exist.

Here is how I fixed this. In my Razor .cshtml code, I had this standard variable:

var home = Model.Content.AncestorsOrSelf(1).First();

It pointed to the root page of the website. Now, I could modify the anchor tags like this to explicitly link each anchor tag to its own parent page:

<ul class="nav navbar-nav">
  <li>
    <a href="@home.Url#showcase">@showcaseMenuText</a>
  </li>
  <li>
    <a href="@home.Url#purpose">@purposeMenuText</a>
  </li>
  <li>
    <a href="@home.Url#invitation">@invitationMenuText</a>
  </li>
  <li>
    <a href="@home.Url#contact">@contactMenuText</a>
  </li>
</ul>

That's it! Now, when I click the Invitation menu item from the second page, I get this url: http://my-website.com/#invitation, same as from the landing page.

I hope somebody may find this information useful. Any comments are welcome.