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 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 please follow below steps:
Topics
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.
[JSInvokable]
private async Task LoadDashboardData()
{
await JSRunTime.InvokeVoidAsync("loadDashboard");
}
[JSInvokable]
private async Task Logout()
{
await JSRunTime.InvokeVoidAsync("logout");
}
loadDashboard and logout both are jQuery functions defined under Dashboard.js which we already include in _Host.cshtml page.
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
You may also like
Unlocking the Power of .NET Core Development: Cutting-Edge Strategies and Tools
As the software development industry adapts, Core has become...
How can you use ML Sentiment Analysis in ASP.NET Core?
We are going to talk about ML Sentiment Analysis which is able to conveniently explore the aspects o...
How to work Loop Execution with Benchmark using .NET
What is Benchmarking? It is used for measuring timing complexity for various algorithms and part of ...
