question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Possible to have links in Toast?

See original GitHub issue

Currently I have a toast that e.g. says:

ITEM DELETED SUCCESSFULLY

Now I want to give the user a chance to undo his action.

For this I am looking for a way to output something like:

ITEM DELETED SUCCESSFULLY

[Undo]

Where the [Undo] could be a button or a link.

I’ve seen the example where you add formatting like <strong> to the message, but I cannot deduce a way for me to add a Blazor link and bind its click to a C# method of mine.

My question

Is there any way to add a link/button and bind it to a C# method I can provide?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
chrissaintycommented, Apr 6, 2020

Ok, I’ll tag this as a potential feature and we can go from there.

1reaction
Jcparkyncommented, Jul 22, 2020

I’ve found a workaround that can be used to solve this.

  1. Create a separate .razor file with the button and/or other content you want in the modal, and the required services injected (to handle the button event).
@inject ISomeService SomeService

<p>Some (optional) content</p>
<button @onclick="SomeService.SomeAction">Perform Action</button>
  1. Add this method to the @code section:
public static RenderFragment GetRenderFragment() => @<NameOfRazorFile/>;
  1. Then, to show the component in a Toast:
var fragment = SomeNamespace.NameOfRazorFile.GetRenderFragment();
toastService.ShowSuccess(fragment, "Toast Title");

If you need to call an instance method or pass other data from the calling code, you could do this:

<p>Some (optional) content</p>
<button @onclick="OnClick">@Text</button>

@code {
    [Parameter] public Action OnClick { get; set; }
    [Parameter] public string Text { get; set; }

    public static RenderFragment GetRenderFragment(Action onClick, string text)
        => @<NameOfRazorFile OnClick="@onClick" Text="@text"/>;
}

Then call it like this:

var fragment = SomeNamespace.NameOfRazorFile.GetRenderFragment(
    () => Console.WriteLine("button clicked"),
    "Button name");
toastService.ShowSuccess(fragment, "Toast Title");
Read more comments on GitHub >

github_iconTop Results From Across the Web

Displaying multiple hyperlinks in a msgbx/toast...?
With the right type of panel, you can add multiple links. Can you post your code here. Also try using a different panel,...
Read more >
Toasts · Bootstrap v5.0
While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for ......
Read more >
Toast - How to add a link
To render a link in the Toast component, you can use its contentTemplate property. ... notify({ contentTemplate: function(e){ var a = document.
Read more >
How to add a link to Toast
Hi, I was wondering if there was a way to include a hyperlink in a dx-toast component, and if so, how it would...
Read more >
Create Toast Message in LWC and also embed link inside the ...
Learn to use Toast Message feature of LWC and also include links inside the toast message. Step by step guidance to write LWC...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found