Skip to content
Branch: master
Find file History
Sergey Seleznyov Sergey Seleznyov
Sergey Seleznyov and Sergey Seleznyov Update Demo 3 for Blazor Preview 9
Latest commit 4879e86 Sep 5, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
wwwroot
.gitignore
AnchorLink.razor
AnchorUtilsComponent.cs
DevExpress.Blazor.AnchorUtils.csproj Update Demo 3 for Blazor Preview 9 Sep 5, 2019
README.md

README.md

DevExpress Blazor Anchor Navigation Tool

The DevExpress Anchor Navigation tool automatically scrolls a page to an anchor in the following instances:

The tool also includes the Blazor AnchorLink component. Use this component to create in-page navigation links as needed:

<AnchorLink class="nav-link py-3 px-4" href="#MySection1">My Section 1</AnchorLink>

When an end-user clicks the link, the page scrolls to the corresponding anchor:

<h2 id="MySection1">Section 1</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h2 id="MySection2">Section 2</h2>
<p>Quisque imperdiet risus quis nisl vulputate...</p>

Add the tool to a project

Follow the steps below to add the tool to your Blazor application.

  1. Download and add the DevExpress.Blazor.AnchorUtils.csproj project to your Blazor solution.

  2. Register the DevExpress.Blazor.AnchorUtils namespace in the _Imports.razor file:

@using DevExpress.Blazor.AnchorUtils
  1. Add the non-visual AnchorUtilsComponent component to the Shared/MainLayout.razor file:
<div class="main">
	...
	<div class="content px-4"> 
		@Body 
	</div> 
</div>
<AnchorUtilsComponent />
  1. Copy wwwroot/anchor-utils.js file from the anchor navigation source code to your project’s wwwroot folder or its subfolders.
  • For server-side Blazor, register this file in Pages/_Host.cshtml file.

  • For client-side Blazor, register this file in wwwroot/index.html file.

  1. (optional): If your page layout contains a pinned (non-scrollable) header (like the standard Blazor project), edit the anchor-utils.js file and update the following code to obtain vertical scroll offset appropriate for your application:
y -= document.querySelector(".main .top-row").offsetHeight;

Note: If a client-side Blazor application is deployed as a set of static files, the web server provides the index.html file by a root URL (e.g., https://mywebsite.com/) only. If a browser requests a specific page by its direct URL (e.g., https://mywebsite.com/MyPage1), the web server raises a 404-code exception. Refer to the Getting 404 on pages other than root when Blazor hosted in IIS to learn more about this issue and a possible solution. The solution requires URL Rewrite Module.

You can’t perform that action at this time.