Blazor (ASP.NET Core) - Create A Real time Application With SignalR | blazor crud app

Показать описание

Easily Create A Real-time Application With Blazor And SignalR

SignalR is a library for ASP.NET developers to simplify the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data. Chat application is often used as SignalR example, but here we will see a small book application, where we can have all the CRUD operations.
Blazor is a framework built by Microsoft for creating interactive client-side web UI with .NET codebase. We can write both client-side and server-side code in C#.NET itself. There are two hosting models available for Blazor. Blazor Server and Blazor WebAssembly. Blazor Server for production was already available. Recently Microsoft released the production version of Blazor WebAssembly also.

Steps:
- Create a web application with Visual Studio 2019 using Blazor WebAssembly template. Please
select the “ASP.NET Core hosted” option also.
- Creating a Book app, add a “Book” class in “Shared” project.
- Install “Microsoft.AspNetCore.SignalR.Client” library using NuGet package manager in “Client”
project.
- Register the SignalR component inside the “ConfigureServices” method of Startup class (Server
project).
- Create a “BroadcastHub” class inside a new “Hubs” folder in Server project and inherit “Hub“ class
from SignalR library.
- Add a “SendMessage” method in the class. You can give any name for this method. It will be used
to send and receive push notification using SignalR hub.
- Add the endpoints for BroadcastHub class in the Configure method of Startup class. We named it
as “broadcastHub”. This will be used in our Razor components later in Client project.
- Create a “BooksController” class for CRUD operations under Controllers folder using Scaffolding
template.
- We have used scaffolding with entity framework template. So that, all the methods for CRUD
operations has been created automatically. But we have slightly changed the “PostBook”
method for our purpose. Please use the below code.
the database connection context in “ConfigureServices” method of Startup class.
- Open Package Manager Console from “Tools” -“NuGet Package Manager” and use below NuGet
command to create a migration script. We are using Entity framework code first approach in this
application.
[ Add-migration Init ]
- Use below NuGet command to update the database.
[ Update-database ]
- We create the razor components for CRUD operations in Client project.
- Add “ListBooks” component inside the “Pages” folder to display all book details from database
using API get method.
- initialized a SignalR hub connection inside the “OnInitializedAsync” method and also navigated to
the “broadcastHub” endpoint, that we have already registered in the Startup class.
- Hub connection is listening for a new push message from Hub server and it will call the
“CallLoadData” method. This method will again call the LoadData method and will get new or
modified Book data from database using API get method. Whenever, we add or change a book
record in another web client, it will be automatically reflected in this component. Hence, we will
get real-time data.
- Create a new razor component “AddBook” and add code inside the component file.
- Create a new razor component “EditBook” and add code inside the component file.
- Create a DeleteBook component and use below code.

blazor crud app
blazor crud example
blazor crud tutorial
blazor crud 2020
blazor crud scaffolding
blazor crud without entity framework
blazor crud entity framework
blazor crud web api
crud con blazor
blazor master detail crud
blazor crud ef core
crud en blazor
blazor webassembly crud example

blazor signalr example
blazor signalr chat
blazor signalr tutorial
blazor signalr server side
blazor signalr performance
blazor signalr configuration
blazor signalr webassembly
blazor server signalr

#aspnetcore
#blazortrain
#blazortraining