Use Blazor Component in MVC! 🔥How to use Blazor Component in Asp.Net Core MVC 🚀

You can use Blazor component in MVC or Blazor component in Asp.Net Core MVC web application to achieve the client-side code rendering.
Blazor is a client-side framework by Microsoft and blazor is mainly used to render the logic on client end side. On the other hand the Asp.Net Core MVC is a server-side web-based framework.
If you want to perform the client-Side logic in Asp.Net Core MVC application, then JavaScript was the only way but now you can use the Blazor components in Asp.Net Core MVC application to achieve the client-side logic calculation functionality.
To achieve this functionality, we have to use following steps.

builder.Services.AddServerSideBlazor();
and map the SignalR hub using app.MapBlazorHub();

Here is the list of all these namespaces.

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop

Note: You can add/remove namespaces based on the need of your application.

4. Now you can create your Blazor components anywhere in the project and render them in the MVC pages (.cshtml) using Html.RenderComponentAsync method.

5. Whooho. It is done. Now you can run your MVC app and the blazor component would be working there.

We have covered following Blazor components examples with the Asp.Net Core MVC application in this video,

1. How to use the Counter Component from Blazor framework in Asp.Net Core MVC Web Application
2. How to fetch the data and display it in a table using Blazor component in Asp.Net Core MVC Web Application
3. How to submit the Form using Blazor component in Asp.Net Core MVC Web Application

Get ready to take your Asp.Net Core MVC web applications to the next level. Elevate your client-side logic and rendering game with Blazor components. 🎉

🚀 Watch now and empower your projects with the synergy of Asp.Net Core MVC and Blazor components!"

💰 SUPPORT Nitish Kaushik ☕💳 by donating for more quality content!

Your support is greatly appreciated! 🙌🎥📚

Want to setup the development environment like me:

#blazor #aspnetcoremvc #dotnetcore

[wujido]

And what if the Blazor component has [Parameter] of type RenderFragment. How do I pass the child from cshtml file?

[liammcmullen]

Thanks Nitish, very useful video, lots of examples.

[osmancetin]

Is .Net8 MVC with Blazor still using websocket connections? Microsoft said Blazor will come with SSR(no more websocket) in .Net8.

[atifsaeedkhan]

Excellent! Thanks for information boy!

[otzliiz]

Could you also make a version where we click the Navlinks and transfer to other razor pages. You forgot to add it on your video. thank you so much.

[yash_rathore]

Sir i need some solution how i can connect with you

[guillermomazzari]

Thanks for sharing, this is like the stream rendering that will be available in blazor from net 8 right?

[joelpalmer]

Excellent. Thanks for your work. I suggest the next video be about this same topic but how I would use Blazor Fluent controls in MVC.

[tlababkary]

nice that is wht iam looking for,
so we can get benefit of powerfull MVC routing/controller world but...
how to use blazor directly in route/controller view?, instead of embed to razor.cshtml
i dont like .cshtml too much why msft stil use it, replace to blazor component for better frontend
btw with that method we can still get benefit of inherit nested {component}.razor.cs right?

[imanqoly]

You simply saved a lot oi people day. Thank you