Integrate Blazor into .NET Core ASP.NET MVC app

Question

I built an ASP.NET MVC Core app using .NET Core 3.0. This app was migrated from ASP.NET Core 2.2. It's fairly complex at this point. However, there is one view that I would like to make "richer". So, I was hoping to use Blazor (Server App).

I started by adding a Blazor Server App to my existing solution. My solution setup looks something like this:

MySolution
- MyBlazorApp
- MyMvcApp

I add added a reference from MyMvcApp to MyBlazorApp. However, I'm not sure how to actually show the Blazor app, in a view, in my existing MyMvcApp. I basically want MyBlazorApp nested within a view in my existing MyMvcApp. Kind of like a widget. Is there a way to do this? If so, how?

Thank you!

you don't need to do that , you can Integrating Blazor in an existing ASP.NET Core application — Nan Yu
@NanYu While I don't need to that, I do want to have that kind of separation. Is there a way to keep the projects separated? — Some User
As far as the existing MVC app is concerned, the Blazor app is just something that presents a particular page on a particular URL (and that page happens to be a Blazor SPA). This implies that you could do this the same way you'd show any third-party content within your pages. If you want deeper integration than that, then the Blazor stuff probably needs to actually be part of your app. — anaximander
If you want to separate Blazor from your MVC app, then you would create a Blazor Library. But what you need to do is to integrate Blazor components into your project. Besides the link mentioned by @NanYu, there is the official doc at Microsoft about integrating Blazor components. I did follow it with success: docs.microsoft.com/en-us/aspnet/core/blazor/… — Daniel Schmid

Pouya Samie Pouya Samie · Accepted Answer · 2019-11-07T14:41:56

if you want to use server-side Blazor for .Net Core 3.0 use step below :

Integrating server-side Blazor in your web application:

Modify the ConfigureServices method in the Startup.cs file, and add the following code:

services.AddServerSideBlazor();

This enables the server-side blazor dependencies.

Extend the HTTP pipeline with Blazor:

// enables endpoint routing in ASP.NET Core
app.UseRouting(); 

//maps the endpoints in the application
app.UseEndpoints(endpoints =>
{
 // .. Other endpoint mappings
 endpoints.MapBlazorHub();
});

Create and host the actual Blazor components

there you go, it doesn't take a lot to integrate Blazor into existing ASP.NET Core applications

Integrate Blazor into .NET Core ASP.NET MVC app

2 Answers