Create A To Do App With Blazor Web Assembly And gRPC

Introduction

 

In my last article, we saw how do we integrate the Blazor server-side with the gRPC service. In this article, let’s try to explore the integration between web assembly and gRPC service. Also, we will try to build a To-Do Application where the front end is into the Blazor Web assembly and back end designed into the gRPC. If you want to know and explore gRPC, refer to my previous articles.

1. gRPC Introduction part 1
2. gRPC introduction - Part 2
3. Integrating Blazor server-side with gRPC

Project Setup

 

To get started with this, let's set up the project first before going forward. We need to ensure we have the following things in place:

• .NET Core SDK 3.0 and above (try to get latest stable version)
• Visual Studio 2019 – Latest edition

We have two projects, the first one is the web Assembly project and another is the gRPC service project. Let's add them one by one.

 

Blazor web Assembly

 

Open Visual Studio and click on Add New Project and Select the following project type:

 

Once we click on the above step, go to the next step, then we get the following options:

 

 

After doing the needed steps, we will arrive at this step which will be like below:

 

 

Select Blazor Web Assembly App here and our project will be created with this just to clarify one thing we are creating standalone application here without any server or back end support as we will have our own back end service for integration.

 

Creating a gRPC Service Project

 

Now let us add the gRPC project. To add that, again go to visual studio and create New Project and select the following option

 

 

Implementing gRPC service

 

We are going to use the same service which we have used in the last article which is here. In this article, we will focus on only the implementation details which are new and needed for understanding the integration between the Blazor web assembly and the gRPC service.

 

Startup.cs Changes

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using ToDoGrpcService;
using ToDoGrpcService.Services;
using Microsoft.EntityFrameworkCore;
namespace ToDo
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(o => o.AddPolicy("AllowAll", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();

            }));
            services.AddGrpc();
            services.AddDbContext<ToDoDataContext>(options => options.UseInMemoryDatabase("ToDoDatabase"));
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ToDoDataContext ctx)
        {
            new ToDoGenerator(ctx).ToDoDataSeed();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();
            app.UseCors();
            app.UseGrpcWeb();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGrpcService<GreeterService>().EnableGrpcWeb()
                                                  .RequireCors("AllowAll");
                endpoints.MapGrpcService<ToDoDataService>().EnableGrpcWeb()
                                                  .RequireCors("AllowAll");

                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid=2086909");
                });
            });
        }
    }
}

The most notable change that we can see here is adding the CORS policy and applying to the services next notable change is to add the middleware GrpcWeb in the pipeline and enabling the endpoints for calling them from browser.

 

What is gRPC-Web?

 

As we all know, it is not possible to call grpc service directly from the browser and it needs to be consumed from the grpc enabled client. gRPC – Web is a protocol that allows browser and JavaScript and blazor wasm clients to call the service easily.

 

Configure gRPC- Web

 

To see that let's check the following below steps.

 

Add nuget package Grpc.AspNetCore.Web

 

Configure App by Adding UseGrpcWeb and EnableGrpcWeb in Startup.cs like below: 

app.UseGrpcWeb();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGrpcService<GreeterService>().EnableGrpcWeb()
                                                  .RequireCors("AllowAll");
                endpoints.MapGrpcService<ToDoDataService>().EnableGrpcWeb()
                                                  .RequireCors("AllowAll");
         }

Code Details

1. The above code adds grp-Web Middleware using UseGrpcWeb() after routing and before endpoints
2. It specifies that Services are enabled for gRPC web

gRPC-Web and CORS

 

We all know that the browser generally prevents calling the services from a domain other than the domain where your app is hosted. the same restriction is applied to the gRPC-Web also in order to apply for the browser to make CORS calls with the following snippet.

services.AddCors(o => o.AddPolicy("AllowAll", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader()
                      .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");
            }));

Implement Blazor Application

 

Now we are ready with the server application its time we Blazor application which will use these services.

 

Install Packages

 

In order to get the grpc services up and running, let's install the following packages in the application:

1. Google.Protobuf
2. Grpc.Net.Client
3. Grpc.Net.Client.Web
4. Grpc.Tools

Once we are done with these package installations, lets copy our proto files from the server application and paste in the folder named proto in the blazor application

 

Once we are done with the copy and paste, then change the properties of the file to compile these files as a client like below:

 

 

Once we are done with this build, our project once and we will have our stubs automatically generated to use in our application

 

Configuring Client DI service in Program.cs

 

The most significant change that we need to do here in the application is to inject the services into the client application for this we have to make changes in the Program.cs, like below:

using System;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Grpc.Net.Client.Web;
using Microsoft.AspNetCore.Components;
using Grpc.Net.Client;
using ToDo;

namespace BlazorWebAseemblyWithGrpc
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddSingleton<BlazorClient.Services.ToDoDataService>();

            builder.Services.AddSingleton(services =>
            {
                var httpClient = new HttpClient(new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler()));
                var baseUri = services.GetRequiredService<NavigationManager>().BaseUri;
                var channel = GrpcChannel.ForAddress("https://localhost:5001", new GrpcChannelOptions { HttpClient = httpClient });

                // Now we can instantiate gRPC clients for this channel
                return new Greeter.GreeterClient(channel);

            });
            builder.Services.AddSingleton(services =>
            {
                var httpClient = new HttpClient(new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler()));
                var baseUri = services.GetRequiredService<NavigationManager>().BaseUri;
                var channel = GrpcChannel.ForAddress("https://localhost:5001", new GrpcChannelOptions { HttpClient = httpClient });

                // Now we can instantiate gRPC clients for this channel
                return new ToDoGrpcService.ToDoService.ToDoServiceClient(channel);

            });
            await builder.Build().RunAsync();
        }
    }
}

If you see here, we are injecting our ToDo service as a singleton which can be used in the application by injecting the service into the data service next step will be to add the Data service. Add the Code file and the component.

 

Designing the data service

using Grpc.Net.Client;
using System;
using System.Threading.Tasks;
using ToDoGrpcService;
namespace BlazorClient.Services
{
    public class ToDoDataService
    {
        ToDoService.ToDoServiceClient _toDoServiceClient;
        public ToDoDataService(ToDoService.ToDoServiceClient toDoServiceClient)
        {
            _toDoServiceClient = toDoServiceClient;
        }

        public async Task<bool> AddToDoData(Data.ToDoDataItem toDoDataItem)
        {
            var todoData = new ToDoGrpcService.ToDoData()
            {
                Status = toDoDataItem.Status,
                Title = toDoDataItem.Title,
                Description = toDoDataItem.Description
            };

            var response = await _toDoServiceClient.PostToDoItemAsync(todoData, null);
            return response.Status;

        }
        public async Task<bool> UpdateToDoData(Data.ToDoDataItem toDoDataItem)
        {

            var updateData = new ToDoGrpcService.ToDoPutQuery
            {
                Id = toDoDataItem.Id,
                ToDoDataItem = new ToDoGrpcService.ToDoData()
                {
                    Id = toDoDataItem.Id,
                    Status = toDoDataItem.Status,
                    Title = toDoDataItem.Title,
                    Description = toDoDataItem.Description
                }
            };
            var response = await _toDoServiceClient.PutToDoItemAsync(updateData, null);
            return response.Status;
        }
        public async Task<bool> DeleteDataAsync(string ToDoId)
        {

            var response = await _toDoServiceClient.DeleteItemAsync(new ToDoGrpcService.ToDoQuery() { Id = Convert.ToInt32(ToDoId) }, null);
            return response.Status;
        }
        public async Task<ToDoGrpcService.ToDoItems> GetToDoList()
        {

            return await _toDoServiceClient.GetToDoAsync(new Google.Protobuf.WellKnownTypes.Empty(), null);

        }

        public async Task<Data.ToDoDataItem> GetToDoItemAsync(int id)
        {

            var todoItem = await _toDoServiceClient.GetToDoItemAsync(new ToDoGrpcService.ToDoQuery() { Id = Convert.ToInt32(id) }, null);



            return new Data.ToDoDataItem() { Title = todoItem.Title, Description = todoItem.Description, Status = todoItem.Status, Id = todoItem.Id };

        }
    }
}

Add Code file for Component

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Grpc.Net.Client;
using Microsoft.AspNetCore.Components;

namespace BlazorClient.CodeFiles
{
    public partial class ToDoOperation : ComponentBase
    {
        public bool ShowModel = false;
        public bool ShowAlert = false;
        public bool ShowModeletePopup = false;
        public string OperationStatusText = "";
        public string PopupTitle = "";
        public int noOfRows = 0;
        public int noOfCoumns = 4;


        public BlazorClient.Data.ToDoDataItem ToDoDataItem = new BlazorClient.Data.ToDoDataItem();
        public string ActionText = "";

        public ToDoGrpcService.ToDoItems toDoItems = new ToDoGrpcService.ToDoItems();

        public string DeleteItemId { get; set; }

        [Inject]
        protected BlazorClient.Services.ToDoDataService ToDoService { get; set; }

        protected async override Task OnInitializedAsync()
        {
            try
            {
                await GetToDoListAsync();
            }
            catch (Exception ex)
            {

                Console.WriteLine(ex);
            }
        }

        protected async Task GetToDoListAsync()
        {

            toDoItems = await ToDoService.GetToDoList();
            var temoRowCount = toDoItems.ToDoItemList.Count() / noOfCoumns;
            noOfRows = toDoItems.ToDoItemList.Count() % noOfCoumns == 0 ? temoRowCount : temoRowCount + 1;

        }

        protected async Task ShowEditForm(int Id)
        {
            Console.Write(Id);
            PopupTitle = "To Do Edit";
            ActionText = "Update";
            ToDoDataItem = await ToDoService.GetToDoItemAsync(Id);
            ShowModel = true;
        }

        protected void ShowAddpopup()
        {
            ToDoDataItem = new Data.ToDoDataItem() { Title = "", Description = "", Status = false, Id = 0 };
            PopupTitle = "To Do Add";
            ActionText = "Add";
            ShowModel = true;

        }
        protected void ShowDeletePopup(string Id)
        {
            Console.Write(Id);
            DeleteItemId = Id;
            ShowModeletePopup = true;
        }

        protected async Task PostDataAsync()
        {
            try
            {
                bool status = false;
                if (ToDoDataItem.Id > 0)
                {
                    status = await ToDoService.UpdateToDoData(this.ToDoDataItem);

                }
                else
                {
                    status = await ToDoService.AddToDoData(this.ToDoDataItem);
                }
                await Reload(status);
            }
            catch (Exception ex)
            {

                Console.WriteLine(ex);
            }

        }

        public async Task DeleteDataAsync()
        {

            var operationStatus = await ToDoService.DeleteDataAsync(DeleteItemId);
            await Reload(operationStatus);
        }

        protected async Task Reload(bool status)
        {
            ShowModeletePopup = false;
            ShowModel = false;
            await GetToDoListAsync();
            ShowAlert = true;
            if (status)
            {
                OperationStatusText = "1";
            }
            else
            {
                OperationStatusText = "0";
            }

        }

        protected  void DismissPopup()
        {
            ShowModel = false;
            ShowAlert = false;
            ShowModeletePopup = false;

        }

    }
}

Component Template

@page "/Todo"

@inherits BlazorClient.CodeFiles.ToDoOperation



<div class="row" style="margin-bottom:15px">
    <button id="btnAdd" @onclick="ShowAddpopup" class="btn btn-primary" style="background-color: #053870; color: white"><i class="oi oi-plus">Add New</i></button>
</div>

@if (toDoItems != null && toDoItems.ToDoItemList != null)
{
    int elementStartPosition = 0;

    @for (int i = 0; i < noOfRows; i++)
    {

<div class="row">
    @for (int elementPosition = elementStartPosition; elementPosition < elementStartPosition + noOfCoumns; elementPosition++)
    {


        if (elementPosition > toDoItems.ToDoItemList.Count() - 1)
        {
            break;
        }
        var idToEdit = @toDoItems.ToDoItemList[elementPosition].Id;
        <div class="card" style="width: 18rem;margin:3px;border-radius:10px">
            <div class="card-body">
                <h5 class="card-title" style="background-color: #053870; color: white;text-align:center;padding:5px;font-weight:500">@toDoItems.ToDoItemList[elementPosition].Title</h5>
                <p class="card-text">@toDoItems.ToDoItemList[elementPosition].Description</p>
                <p class="card-text">@(toDoItems.ToDoItemList[elementPosition].Status == false ? "Closed" : "Active")</p>
            </div>
            <div class="card-footer text-md-center">
                <button class="btn btn-secondary" @onclick="@(async () => await ShowEditForm(idToEdit))">Edit</button>

                <button class="btn btn-danger" @onclick="@(async () => ShowDeletePopup(idToEdit.ToString()))">Trash</button>
            </div>
        </div>

    }
    <div style="display:none">  @(elementStartPosition = elementStartPosition + noOfCoumns);</div>
</div>

    }
}


@if (ShowModel == true)
{

    <div class="modal" tabindex="-1" style="display:block;" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#5c116f;color:white;height:50px">
                    <span class="modal-title">@PopupTitle</span>
                    <button type="button" class="close" @onclick="DismissPopup">
                        <span aria-hidden="true" style="color:white;">X</span>
                    </button>
                </div>
                <div class="modal-body">

                    <table border="0" cellspacing="1">
                        <tr>
                            <td><strong>Title</strong></td>
                            <td><input type="text" @bind="ToDoDataItem.Title" maxlength="20" /></td>
                        </tr>
                        <tr>
                            <td><strong>Description</strong></td>
                            <td><input type="text" @bind="ToDoDataItem.Description" maxlength="20" /></td>
                        </tr>
                        <tr>
                            <td><strong>Status</strong></td>
                            <td><input type="checkbox" @bind="ToDoDataItem.Status" /></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><button class="btn btn-primary" id="btnPostData" @onclick="PostDataAsync">@ActionText</button></td>

                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
}


@if (ShowAlert == true)
{

    <div class="modal" tabindex="-2" style="display:block;padding-top:-200px;padding-right:0px" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#5c116f;color:white;height:50px">
                    <span class="modal-title">Notification</span>
                    <button type="button" class="close" @onclick="DismissPopup">
                        <span aria-hidden="true" style="color:white;">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if (OperationStatusText == "1")
                    {
                        <span> All Good 😄</span>
                    }
                    else
                    {
                        <span>Nothing is good i am angry now 😠</span>
                    }

                </div>
            </div>
        </div>
    </div>
}

@if (ShowModeletePopup == true)
{

    <div class="modal" tabindex="-3" style="display:block;padding-top:300px" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#5c116f;color:white;height:50px">
                    <span class="modal-title">Status</span>
                    <button type="button" class="close" @onclick="DismissPopup">
                        <span aria-hidden="true" style="color:white;">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td colspan="2">
                                Are you sure you want to delete this ToDo Item with Id @DeleteItemId ?
                            </td>
                        </tr>
                        <tr>
                            <td align="right"><button class="btn btn-primary" @onclick="DeleteDataAsync">Ok</button></td>
                            <td align="left"><button class="btn btn-danger">Cancel</button></td>
                        </tr>

                    </table>
                </div>
            </div>
        </div>
    </div>
}

Once we are done with the above changes, we can see the output below:

 

 

Here is how we can integrate our Blazor web assembly application to the grpc services. For the complete source code, you can follow my Git Hub Repo.

 

Source code link.

 

References

• https://blog.stevensanderson.com/2020/01/15/2020-01-15-grpc-web-in-blazor-webassembly/
• https://docs.microsoft.com/en-us/aspnet/core/grpc/browser?view=aspnetcore-3.1