Auto inject javascript in blazor application

Question

I'm developing a Blazor extension library.

One thing in this library would be the reuse of the javascript alert() method. I know how to do this, this involves adding this in a .cshtml page:

<script>
  Blazor.registerFunction('Alert', (message) => {
      alert(message);
  });
</script>

and this in my code:

public void Alert(string message)
{
     RegisteredFunction.Invoke<object>("Alert", message);
}

I would like the javascript part somehow to be auto injected in the html if you use my package (or maybe always). Not sure if this is possible (yet)

Any ideas on this?

maybe by using nuget insall script

agua from mars
– agua from mars

2018-03-27 16:54:21 +00:00
Commented Mar 27, 2018 at 16:54 — agua from mars
– agua from mars, Commented Mar 27, 2018 at 16:54

Flores · Accepted Answer · 2018-04-18 17:56:03Z

9

Edit

Since blazor 0.2 there is a more supported way to do this. Look at the blazorlib template for an example:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

dotnet new blazorlib

0.1 answer

I ended up with creating my own blazor component containing my javascript, like this:

public class BlazorExtensionScripts : Microsoft.AspNetCore.Blazor.Components.BlazorComponent
{

    protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "script");
        builder.AddContent(1, "Blazor.registerFunction('Alert', (message) => { alert(message); });");
        builder.CloseElement();
    }
}

And adding it to my app.cshtml like this:

@addTagHelper *, BlazorExtensions

<Router AppAssembly=typeof(Program).Assembly />

<BlazorExtensionScripts></BlazorExtensionScripts>

edited Apr 18, 2018 at 17:56

answered Mar 27, 2018 at 19:43

Flores

8,9905 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vibeeshan Mahadeva Over a year ago

Could you please explain how @addTagHelper is working in Blazor

Flores Over a year ago

It's because my component lives in another assembly. It's a workaround: github.com/aspnet/Blazor/issues/394

Muqeet Khan Over a year ago

Balzor.registerFunction should not be used directly in razor or a component. You will run into issue when you re-use the component. More info github.com/aspnet/Blazor/issues/451

Guillaume ZAHRA Over a year ago

Actually, the exposed method here should still work, as the <BlazorExtensionScripts> tag is under the Router tag, it should be called once at startup. Also i imagine that we can assume that this code should be called once, we may add a static bool flagging that this component has been already initialized.

Guillaume ZAHRA Over a year ago

Addtionaly, on my side for my own project extension, i have created a little tool (github.com/Daddoon/Daddoon.Blazor/tree/master/…) that read as input args .js files, and output a BlazorComponent like .cs file. of course adapted for my project. You may use a simplistic strategy like this to maintean all your js script code outside the Blazor .cs file during development. You juste have to call the JstoCsharp tool on the PreBuild event of your package extension project.

Collectives™ on Stack Overflow

Auto inject javascript in blazor application

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related