Share on twitter
Share on facebook
Share on linkedin
Performing CRUD Operations Using Blazor Preview 9 and Entity Framework Core 3.0.

How to Perform CRUD Operations Using Blazor Preview 9 and Entity Framework Core 3.0

Entity Framework Core

Entity Framework (EF) Core is the latest version of Entity Framework from Microsoft. It is an open-source, lightweight, extensible, and cross-platform version of Entity Framework. It runs on Windows, Mac, and Linux.

Entity Framework is an object/relational mapping (O/RM) framework. It is an enhancement of ADO.NET that gives developers an automated mechanism for accessing and storing data in a database.

Every web app needs a data source, and EF Core is a great way to interact with a SQL database. So, let’s walk through the process of adding EF Core to a Blazor app.

Blazor

In the past, JavaScript was the only programming language available for client-side web applications. Now, we have different choices of client frameworks, such as Angular, React, and others, but in the end, it always run as JavaScript in the browser.

Recently, WebAssembly (wasm) changes all of that.

According to the WebAssembly.org website:

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Blazor is a UI web framework built on .NET. It runs on browsers using WebAssembly, and it provides choice for client-side programming language—C# rather than JavaScript.

Now, we will see how to do CRUD operations using a Blazor app with EF Core.

Prerequisites

In this blog, I am using Visual Studio to build the application. I have the following software installed:

  • Visual Studio 2019 16.3.0 Preview 2.0
  • .NET Core 3.0
  • SQL Server 2017

Create database

Let’s create a database on our local SQL Server.

  1. Open SQL Server 2017.
  2. Create a new database named Management. Now we have the database in place.
  3. Click on our database and choose New Query.
  4. For this application, I am going to create a table with the name Employee with some basic attributes. Paste the following SQL query into the Query window to create the Employee table.
Create Table Employee(
EmployeeId BigInt Identity(1,1) Primary Key,
Name Varchar(100) Not Null,
Designation Varchar(100),
Email Varchar(20),
Location Varchar(50) Not Null,
PhoneNumber bigint Not Null)

Create Blazor application

Follow these steps to create a Blazor application:

  1. In Visual Studio 2019, go to File > New > Project.
  2. Choose the Create a new project.
  3. Select the Blazor App.

    Selecting a Project Template in Visual Studio.
    Selecting a Project Template in Visual Studio
  4. Enter a project name and click Create. In my example, I used the name BlazorCrud.

    Configuring the New Project in Visual Studio.
    Configuring the New Project in Visual Studio
  5. Select Blazor WebAssembly App, choose the ASP.NET Core Hosted template, and then click Create. The sample Blazor application will be created.

    Selecting a Blazor WebAssembly App.
    Selecting a Blazor WebAssembly App

Now, we have three project files created inside this solution:

  • Client: Contains the client-side code and the pages that will be rendered on the browser.
  • Server: Contains the server-side code such as DB-related operations and web API.
  • Shared: Contains the shared code that can be accessed by both client and server.

Install NuGet packages

The following NuGet packages should be added to work with the SQL Server database and scaffolding. Run these commands in the Package Manager Console:

  • Install-Package Microsoft.EntityFrameworkCore.Tools -Version 3.0.0: This package creates database context and model classes from the database.
  • Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 3.0.0: The database provider that allows Entity Framework Core to work with SQL Server.

Creating a model for an existing database

Let’s create entity and context classes for the Management database in the local SQL server.

Run the following scaffold command in the Package Manager Console to reverse engineer the database to create database context and entity classes from any tables. The Scaffold command will create a class for the tables that have a primary key.

Scaffold-DbContext “Server=.\\;Database=Management;Integrated Security=True” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
  • Connection: Sets the connection string of the database.
  • Provider: Sets the provider to use to connect the database.
  • OutputDir: Sets the directory where the POCO classes are to be generated.

In our case, the Employee class and context class will be created.

Add the web API controller to the application

  1. Right-click the Server/Controllers folder and select the controller.

    Selecting the File to Add a Controller.
    Selecting the File to Add a Controller
  2. An Add New Scaffolded Item dialog box will open. Select API Controller – Empty.

    Adding an API Controller.
    Adding an API Controller
  3. An Add Empty API Controller dialog box will open. Enter the name EmployeeController.cs and click Add.

    Naming the Controller.
    Naming the Controller

Add a Razor view to the application

Let’s see how to create Razor pages for CRUD operations.

  1. Right-click the Client/Pages/Employee folder, and then select Add > New Item.

    Selecting the Folder to Add a Razor View.
    Selecting the Folder to Add a Razor View
  2. An Add New Item dialog box will open. Select Web from the left panel, and then select Razor View from templates listed. Name it GetEmployee.razor.

    Selecting a Razor View Template.
    Selecting a Razor View Template
  3. Create the Razor files AddEmployee.razor, EditEmployee.razor, and DeleteEmployee.razor.

Perform CRUD operations

Let’s add the code in the Razor files and web API controller to display, create, update, and delete.

Read

An HTTP GET request can be sent to get a resource from the API using the GetJsonAsync() method provided by the HttpClient class.

@page "/employee"
@inject HttpClient Http

.. .. .. .. .. .. 
.. .. .. .. .. ..

@code {
    Employee[] empList;

    protected override async Task OnInitializedAsync()
    {
        empList = await Http.GetJsonAsync<Employee[]>("/api/Employee/Index");
    }
}
[HttpGet]
[Route("api/Employee/Index")]
public IEnumerable Index()
{
    return _employee.GetAllEmployees();
}

Create

An HTTP POST request can be sent to add new data in the API using the SendJsonAsync() method provided by the HttpClient class.

@page "/employee/add"
@inject HttpClient Http
@inject Microsoft.AspNetCore.Components.NavigationManager navigation
.. .. .. .. .. .. 
.. .. .. .. .. ..

@code {

    Employee emp = new Employee();

    protected async Task CreateEmployee()
    {
        await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/Create", emp);
        navigation.NavigateTo("/employee");
    }

    void cancel()
    {
        navigation.NavigateTo("/employee");
    }
}
[HttpPost]
[Route("api/Employee/Create")]
public void Create([FromBody] Employee employee)
{
    if (ModelState.IsValid)
        this.employee.AddEmployee(employee);
}

Update

The HTTP PUT method is used to completely replace a resource on the server. We can use the HttpClient to send a PUT request to an API using the SendJsonAsync() method.

@page "/employee/edit/{empID}"
@inject HttpClient Http
@inject Microsoft.AspNetCore.Components.NavigationManager navigation
.. .. .. .. .. .. 
.. .. .. .. .. ..

@code {

    [Parameter]
    public string empId { get; set; }

    protected async Task UpdateEmployee()
    {
        await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp);
        navigation.NavigateTo("/employee");

    }
}
[HttpPut]
[Route("api/Employee/Edit")]
public void Edit([FromBody]Employee employee)
{
    if (ModelState.IsValid)
        this.employee.UpdateEmployee(employee);
}

Delete

An HTTP DELETE request can be sent to delete a resource from the server using the DeleteAsync() method provided by the HttpClient class.

@page "/employee/delete/{empId}"
@inject HttpClient Http
@inject Microsoft.AspNetCore.Components.NavigationManager navigation
.. .. .. .. .. .. 
.. .. .. .. .. ..

@code {

    [Parameter]
    public string empId { get; set; }

    protected async Task Delete()
    {
        await Http.DeleteAsync("api/Employee/Delete/" + Convert.ToInt64(empId));
        navigation.NavigateTo("/employee");
    }
}
[HttpDelete]
[Route("api/Employee/Delete/{id}")]
public void Delete(int id)	
{
    employee.DeleteEmployee(id);
}

Run the application

  1. Click Run to view the application. The page will be opened in a new browser window.
  2. Click Employee in navigation menu. This will direct you to the Employee page. Initially this page will be empty.

    Empty Employee Page.
    Empty Employee Page
  3. Click the Create link to create a new employee entry. Enter the employee details and click Save.

    Employee Page with a New Employee Entry.
    Employee Page with a New Employee Entry
  4. Now, the created employee details are displayed as shown in the following screenshot.

    Application with Employees Added.
    Application with Employees Added
  5. Click Edit to update the employee details.

    Updating Employee Information.
    Updating Employee Information
  6. Click Delete to delete a product. A confirmation alert will appear before it is deleted from the database.

    Deleting an Employee Record.
    Deleting an Employee Record

You can also fork this application on GitHub.

Conclusion

In this blog, we have learned how to create a Blazor application and perform basic CRUD operations using Entity framework Core 3.0.

Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive Blazor UI controls such as DataGrid, Charts, and Scheduler to ease the work of developers.

If you have any questions, please let us know in the comments section below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (1)

I been doing CRUD from Blazor through APIs but if anyone wants to do direct to the database this is GOLD

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top