23rd Apr 2021

Blazor with jQuery

.NET

Written By, Kunal Vachhani

Overview

Hello Friends, while we were working on Blazor projects. At that time when we tried to add jQuery components on the .CSHTML page, we learned that the integration of jQuery components is quite different than another .NET framework. A Blazor application can call JS functions from .NET methods.

Please don’t get confused with the term jQuery UI components. It is our source script for jQuery which we used in the <script> tag in razor pages.

To use jQuery UI components in a Blazor application we have to follow the above-mentioned steps. So, let’s check each step in detail.

Include <script> tag in _Host.cshtml file:

  • Open the _Host.cshtml file.
  • Include <script> tag and reference the file via src attribute under body tag.

You can add all JS references as shown in the below image.

host-cshtml

Integrate Contact Form on your page

  • Open your razor page where you want to add jQuery components.
  • Inject IJSRuntime as shown in the below image.

By injecting JSRunTime, we are now able to use the JSRunTime package and its object on our Razor page.

@inject IJSRuntime JSRunTime;

mainlayout-razor

Write the C# method to run the JS function under the @code section.

You can check the below image. We called the JS function using this InvokeVoidAsync method.

blazor-step3-code1
loadDashboard and logout both are jQuery functions defined under Dashboard.js which we already include in _Host.cshtml page.
blazor-step3-code2

Conclusion

In this article, we have learned how to use jQuery UI components in a Blazor application. I hope the steps and snippets in the blog, help you to integrate jQuery UI components in a Blazor application.

Thanks for reading

Written By,

Jr. Web Developer at Yudiz Solutions Pvt. Ltd