1

I'm trying to include Bootstrap for Material Design into my Blazor Server Side project. I have it working perfectly in a plain HTML file, but the issue with Blazor comes with a script. which I assume needs to run after a page was rendered. The script calls a function from a CDN.

<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>

I have added the CDN in my tag on _Hostcshtml and have verified that it is correctly called when system is compiled.

The function in question (which does validation on form input fields) is

<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>

On the plain HTML file this call is just in the tag after the CDN call.

My problem is to correctly call the .bootstrapMaterialDesign in my OnAfterRenderAsync in Bootstrap.

Current code, which is obviously incorrect is:

@page "/signUpContak"

@layout SignUpLayout @inject IJSRuntime JSRuntime;

....

@code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) await     JSRuntime.InvokeAsync<>("bootstrapMaterialDesign"); } }

I hope this makes sense. The implementation documentation for Bootstrap Material Design is at https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/

Riaan V
  • 265
  • 1
  • 2
  • 7

1 Answers1

0

I managed to fix the issue by doing the below.

In my _host.cshtml I added:

function InitializeBootstrapMaterialDesign() {
        $(document).ready(function () 
    {$('body').bootstrapMaterialDesign(); });
}

And on SignUpContak.razor I added:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync("InitializeBootstrapMaterialDesign");            
}
Riaan V
  • 265
  • 1
  • 2
  • 7