Simple Blazor Components In .NET CORE MVC 3.1

<div class="card-header">
    <h3>DataComponent</h3>
    <button @onclick="Getdata" class="btn btn-dark">Click to GetData</button>
</div>

<div class="card-body">
    <br />
    <div class="@style">@Data</div>
</div>

@code {
    [Parameter]
    public string Data { get; set; } = string.Empty;
    [Parameter]
    public string style { get; set; }

    private void Getdata()
    {
        Data = "I am Working";
        style = "badge-success";
    }
}

Step 6. The below code you need to add to your _Layout. cshtml

This is for registering Blazor to your web application.

<base href="~/" />
<script src="_framework/blazor.server.js"></script>

Step 7. Add a simple _Imports. razor file to your root of the project which consists of the below code. These namespaces are required to access the component features over your components.

@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.JSInterop

@using System.IO

Step 8. Add services.AddServerSideBlazor(); to your startup file method name ConfigureServices.

Add endpoints.MapBlazorHub(); to your Configure method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddServerSideBlazor();
    services.AddControllersWithViews();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        endpoints.MapBlazorHub();
    });
}

Step 9. The last step is to render components on your View page.

You can see that I am passing 2 parameters as requested in our DataViewComponent.razor file.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
</div>

<div class="card">
    @(await Html.RenderComponentAsync<BlazorComponentProject.Views.Shared.Components.DataViewComponent>(
        RenderMode.ServerPrerendered,
        new { Data = "I came from Index", style = "badge-danger" }))
</div>

Summary

Our main focus in this article was to help you integrate your existing Web application built in .NET Core MVC 3.1 with Blazor and use the Blazor components in it.

Please refer to the project and debug the process for more understanding. I hope it helps!