CODEWITHSUNDEEP
c#asp.netasp.net-coreblazor
001
001

Reputation: 65087

How to load jQuery inside a Blazor web app?

The example provider here does not work How to use jQuery UI from Blazor component

https://blazorfiddle.com/s/kg13ms5x

Upvotes: 1

Views: 4232

Answers (2)

Ryan
Ryan

Reputation: 20106

@Isaac's code is correct.It seems that you do not have proper references to jquery-ui:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ServerSideBlazor</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />

@*Add below references*@
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
    #resizable {
        width: 100px;
        height: 100px;
        background: #ccc;
    }
</style>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

I suggest that you could create a new blazor project with visual studio 2019 and asp.net core 3.0 sdk.

Upvotes: 2

enet
enet

Reputation: 45596

This is how you initialize the resizable widget from Blazor. You can place this code where you want, preferably in the App or layout components...

@inject IJSRuntime JSRuntime 


@code {

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("jQueryWidgets.initialize");
        }
    }

Add the following script... jQueryWidgets is the namespace, initialize is the 'name' of the function...

JavaScript (_Host.cshtml, if you use Blazor Server )

<script src="_framework/blazor.server.js"></script>
    <script>
      window.jQueryWidgets = {

         initialize: function () {
              $("#resizable").resizable();
         }
      };
    </script>

Note that you should also add the necessary jQuery files. Place them within the head html element in _Host.cshtml, if you use Blazor Server

Upvotes: 4

Related Questions