Generating Dynamic Hrefs in Blazor Server with JSRuntime

Описание: Learn how to create dynamic hyperlinks in Blazor Server that open in new tabs using `JSRuntime` for handling SAS tokens effectively.
---
This video is based on the question https://stackoverflow.com/q/77465691/ asked by the user 'NSS' ( https://stackoverflow.com/u/1764116/ ) and on the answer https://stackoverflow.com/a/77465712/ provided by the user 'Sam' ( https://stackoverflow.com/u/1506115/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: Blazor Server : How do i generate href dynamically

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Generating Dynamic Hrefs in Blazor Server

When building applications with Blazor Server, developers often encounter challenges when it comes to generating links dynamically. This is particularly true when those links need to incorporate SAS tokens for secure access. In this article, we’ll explore how to create dynamic hyperlinks that can be triggered by user interaction, specifically focusing on how to open a new URL in a new tab while properly generating the SAS token upon clicking a button.

The Challenge

In a typical scenario, you're trying to render a link in a grid that, when clicked, generates a URL dynamically with a SAS token valid for a brief period (say, one minute). The existing setup showed that when trying to do this, the link resulted in replacing the current page instead of opening a new tab. This required a solution that effectively leverages the Blazor capabilities to achieve the desired functionality.

Understanding the Solution

The goal is to have an anchor tag that, upon clicking, executes a method that generates the URL with the SAS token and opens it in a new tab. To do this hybrid approach directly in Blazor, we will use the IJSRuntime — a service that allows us to execute JavaScript functions from our Blazor components.

Step-by-Step Breakdown

Set up the HTML:
You need to create an anchor (<a>) tag and ensure it doesn’t interfere with the default browser behavior. Thereby, the href is set to an empty string, and an @onclick event is assigned to handle the click action:

[[See Video to Reveal this Text or Code Snippet]]

Implementing the Click Handler:
Within your Blazor component's code section, you will define the OnClickHandler method. This async method will generate the required URL and utilize JavaScript to open it in a new tab using the open function:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Code Components:

@inject IJSRuntime JSRuntime: This line allows us to use JavaScript runtime capabilities in your Blazor component.

OnClickHandler(): The method gets called when the user clicks on the anchor tag. It constructs a URL and opens it in a new browser tab using JavaScript.

await JSRuntime.InvokeVoidAsync(...): This line invokes the open function of JavaScript, specifying the URL with the constructed SAS token. The second argument, "_blank", indicates that the link should open in a new tab.

Benefits of the Approach

Enhances User Experience: By allowing links to open in new tabs, users don’t lose their current context.

Dynamic Token Generation: The approach makes it easy to integrate security tokens into URLs dynamically, crucial in many web application scenarios.

Conclusion

Generating dynamic links in Blazor Server applications that open in new tabs is a straightforward process with the help of IJSRuntime. By effectively managing click events and leveraging JavaScript, developers can create secure, user-friendly web applications that enhance interaction without sacrificing security.

Feel free to explore further by customizing the logic for SAS token generation based on your application’s needs. Happy coding!