jQuery with Blazor

Example 1

index.html

    <script>
        function renderjQueryComponents() {

            alert('here');

            // initialization of HSMegaMenu component
            $('.js-mega-menu').HSMegaMenu({
                event: 'hover',
                pageContainer: $('.container'),
                breakpoint: 991
            });

            // initialization of HSDropdown component
            $.HSCore.components.HSDropdown.init($('[data-dropdown-target]'), {
                afterOpen: function () {
                    $(this).find('input[type="search"]').focus();
                }
            });

        }
    </script>

Note:

Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the ‘index.html’ file or another static location.

MainLayout.razor

@inject IJSRuntime jsRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
            if (firstRender)
            {
                await jsRuntime.InvokeVoidAsync("renderjQueryComponents");
            }

        await base.OnAfterRenderAsync(firstRender);
    }
}

or in the MainLayoutBase.cs

using Microsoft.JSInterop;

        [Inject]
        public IJSRuntime jsRuntime { get; set; }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await jsRuntime.InvokeVoidAsync("renderjQueryComponents");
            }

            await base.OnAfterRenderAsync(firstRender);
        }

Example 2

    <script>
        function clearSearchText() {

            document.getElementById('txtSearchText').value = "";
        }
    </script>

        public async Task SearchOnFocus()
        {
            await jsRuntime.InvokeAsync<object>("clearSearchText");
        }

Sources:

https://www.syncfusion.com/faq/blazor/general/how-do-i-use-jquery-ui-components-in-a-blazor-application

https://www.syncfusion.com/faq/blazor/javascript-interop/is-there-a-way-to-access-dom-in-blazor

https://stackoverflow.com/questions/54274629/how-to-use-jquery-ui-from-blazor-component