23rd Apr 2021

Blazor with jQuery


Written By, Kunal Vachhani


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 web 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.


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;


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.

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


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