Scribd
Upload
63 views

Lab - 03 - ProductManagement - Using - SignalR and Entity Framework

This document outlines steps to build a product management application using ASP.NET Core, Entity Framework Core, and SignalR for real-time communication. It describes creating the project structure, entity classes and database context, CRUD operations with a products controller, adding a SignalR hub for notifications, and integrating the client-side library to enable real-time updates across clients.

Uploaded by

Nguyen Thi My Ai (K17 CT)
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
63 views

Lab - 03 - ProductManagement - Using - SignalR and Entity Framework

This document outlines steps to build a product management application using ASP.NET Core, Entity Framework Core, and SignalR for real-time communication. It describes creating the project structure, entity classes and database context, CRUD operations with a products controller, adding a SignalR hub for notifications, and integrating the client-side library to enable real-time updates across clients.

Uploaded by

Nguyen Thi My Ai (K17 CT)
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Building Product Management

Application Using Real-Time


Communication with SignalR

Introduction
Imagine you're an employee of a product retailer named Product Store. Your
manager has asked you to develop a web application for product management
Product (ProductID, ProductName, Category, Quantity, Price). The application
has to support adding, viewing, modifying, and removing products—a
standardized usage action verbs better known as Create, Read, Update, Delete
(CRUD).

This lab explores creating an application using Real-Time Communication with


SignalR, ASP.NET Core, and C#. An SQL Server Database will be created to
persist the product data that will be used for reading and managing product data
by Entity Framework Core.

Lab Objectives
In this lab, you will:
 Use the Visual Studio.NET to create ASP.NET Core Web Application
Project.
 Develop application using MVC Pattern.
 Use Entity Framework to Create a SQL Server database named
SignalRLab that has a Product table.
 Develop Entity Classes a and DBContext class to perform CRUD actions
using Entity Framework Core.
 Apply JavaScript library for Real-Time communication application.
1|Page
 Run the project and test the application actions.

2|Page
Activity 01: Create Project
Create a Solution named SignalRLab. Create ASP.NET Core Web Application
(Model-View-Controller). Open the Visual Studio .NET application and performs
steps as follows:
Create ASP.NET Core Web App (Model-View-Controller)

Specify Name and Location of the Project “SignalRLab”

3|Page
The structure of ASP.NET Core Web Application Project “SignalRLab”.

4|Page
Activity 02: Work with Entity Framework
Step 01. Install the following packages from NuGet:

Step 02. Add Connection string (appsettings.json file)


{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {

5|Page
"DefaultConnection": "Persist Security Info=False;User
ID=sa;Password=1234567890;Initial Catalog=SignalRLabDB;Data Source=.;Connection
Timeout=100000"
}
}

Step 03. Add “Products.cs” entity and “ApplicationDBContext.cs” classes

Step 04. Add-Migration and Update-Database

6|Page
Step 05. Add ProductsController with Scraffolding

7|Page
8|Page
Activity 03: Create SignalR Hub and configure SignalR
Step 01. Create SignalR Hubs in the SignalrServer.cs

Step 02. Add SignalR to Startup.cs

9|Page
10 | P a g e
Activity 04: Build CRUD functions with SignalR
Step 01. Add Client-Side Library

 Right-click the project, and select Add > Client-Side Library.


 In the Add Client-Side Library dialog, for Provider select unpkg.
 For Library, enter @microsoft/signalr@latest.
 Select Choose specific files, expand the dist/browser folder, and select
signalr.js and signalr.min.js.
 Set Target Location to wwwroot/microsoft/signalr/ , and select Install.

11 | P a g e
12 | P a g e
Step 02. Create a callback function in the script (site.js)

Step 03. Add the notification to CRUD actions


 The SignalR hub is the core abstraction for sending messages to clients
connected to the SignalR server.
 Use a SignalR IHubContext to send notifications to clients from outside a
hub.
private readonly IHubContext<SignalrServer> _signalRHub;
 Then use an instance of IHubContext, call client methods as if you were in
the hub itself
await _signalRHub.Clients.All.SendAsync("LoadProducts");

13 | P a g e
14 | P a g e
Step 04. Add SignalR JavaScript client to View
Views/Shared/_Layout.cshtml

15 | P a g e
Views/Products/Index.cshtml

16 | P a g e
Activity 05: Build and run Project. Test all CRUD
actions

17 | P a g e
Client 1 Client 2

18 | P a g e

You might also like