Simple Blazor Components In .NET CORE MVC 3.1

Introduction

Hello Folks,

In this article, we will add a Razor component to our existing .NET Core MVC project.

Blazor is a framework for building interactive client-side web UI. NET. With it, you can.

• Create rich interactive UIs using C# instead of JavaScript.
• Share server-side and client-side app logic written in. NET.
• Render the UI as HTML and CSS for wide browser support, including mobile browsers.

Blazor apps are based on components. A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Let's start with a few simple steps.

Step 1

Step 2

Step 3. Add a Microsoft.AspNetCore.Components reference to your project if not available.

Step 4. Add a Component folder inside the view/shared folder, then add a Razor component.

Step 5. For the Razor component, we have written a simple method named "GetData", which you can see below. Also, I have made 2 public properties for getting data from the view and decorating it with the attribute name Parameter.

<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!