I am using Blazor Server Project with .net 7.
I want to render the following link in my grid grows.
Here the need is that only when user click the button, i want to run the code that will compose SAS token with URL and the it should open this dynamically generated URL, which has sas token valid for 1 minute.
<a href="dynamically Generated when clicked on this link"
class="btn btn-primary ms-2 mt-1" target="_blank">View</a>
Based on the suggestion from answers (@sam and @Kurt Hamilton), this is what i came up with, but it load the new pgae by repalcing the current page, i want the page to be loaded in new tab or new window, looks like target option has no effect, since i am using navigation manager and preventing default.
<a href="#"
@onclick:preventDefault="true"
@onclick:stopPropagation="true"
@onclick="@(async ()=> await ViewFile(fileInfo.FullFilePathAndName))"
class="btn btn-primary ms-2 mt-1" target="_blank">View</a>
I am not sure if thats even possible. However, in your case it would be best to use a onclick handler on the anchor tag and inside this handler use the NavigationManager to go to a dynamically generated URL. The href of the anchor tag in this case should be href=”” to make sure the browser doesn’t interfere with the NavigationManager when you click the link.
Here is an example:
@page "/"
@inject IJSRuntime JSRuntime
<a href="" @onclick="OnClickHandler">View</a>
@code {
private async void OnClickHandler()
{
var token = "77465691";
await JSRuntime.InvokeVoidAsync("open", $"https://stackoverflow.com/questions/{token}", "_blank");
}
}
You could use a button with a click event handler.
- Create a button with an
onclick
event handler
<button type="button" @onclick="@OnButtonClick">
Click me to generate dynamic URL
</button>
- Generate the URL in the event handler and use
NavigationManager
to do the navigating.
@inject NavigationManager NavigationManager
@code {
private void OnButtonClick()
{
string url = GenerateUrl();
NavigationManager.NavigateTo(url);
}
private string GenerateUrl()
{
// TODO: implement
return "/";
}
}
EDIT
Since a requirement for you is to utilise normal anchor functionality (e.g. open in new tab), I would recommend that you link to a page that acts as a intermediary. The intermediate page would generate the link on initialize, and then redirect to the dynamic page.
- Create a link to the intermediary page
<a href="/my-link-generator" target="_blank">
Link to dynamic URL
</a>
- Create the intermediary page
@page "/my-link-generator"
@inject NavigationManager NavigationManager
@code {
protected override void OnInitialized()
{
string url = GenerateUrl();
NavigationManager.NavigateTo(url);
}
private string GenerateUrl()
{
// TODO: implement
return "/";
}
}
Post from (Nb777) helped
await jsRuntime.InvokeAsync(“open”, “”https://www.google.com/””, “_blank”);
I think it’s more instructional to consider what Blazor is. It’s a framework for generating html dynamically. It does things in a super-cool and efficient way– But ultimately, under the hood– it’s still just a browser displaying html.
Therefore, it’s often better to just look for a vanilla html solution instead of trying to figure out how to do it in Blazor (with or without javascript):
<p>Open <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">GOOGLE</a>.</p>
If this doesn’t work, it’s because someone’s browser settings don’t WANT you to pop up a new page. Respect this setting, and move on with your life.
Of course, instead of “google.com” you can put a link to whatever page you want, including a new document in your own site.
You’re
ViewFile
method needs to call the ` JSinteropopen
method.