Blazor Server CRUD App Using Visual Studio Code

Blazor is a new Microsoft technology that allows developers to write code for browsers in C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. Your C# code can easily call JavaScript APIs and libraries. You can continue to use the large ecosystem of JavaScript libraries that exist for client-side UI while writing your logic in C#.

Blazor is a web framework designed to run client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor Server). Regardless of the hosting model, the app and component models are the same.

In this article, we will build a simple Employee Management system using Blazor server-side hosting model, which will allow us to perform CRUD operations. For this, we will be creating a Blazor Server web project, a .Net Core Web API project for managing the backend, and a .Net Core Class Library project for the model.

For the development environment, We will be using Visual Studio Code.

The source code of the application that we will be building is available in my git repository here.

Setup Development Environment

Prerequisites

• Visual Studio Code
• .NET Core 3.1 SDK
• SQL Server Express

Install the required extensions in vscode

C# extension is required for debugging and IntelliSense support for C# code

C# Extensions help us to create new classes, enums, and interfaces. It also provides a possible quick fix on Ctrl+.(Control + Period)
I have also installed some useful extensions like Blazor Snippets, Razor+, etc. to support the development workflow. There are a lot of extensions available at Extension Marketplace

I am using Visual Studio Code version 1.48.0 for this demo.

Let's create a folder named 'BlazorServerCRUD' at your preferred location. We will be using this as the root directory for our projects.

Now we are all set to start our development.

Create Blazor Server Web Application

Let’s create a Blazor Server project. In vscode, open a new integrated terminal window.The default terminal is a powershell and the location will be the default user directory. Use cd command and navigate to the directory we have created earlier.

We can use the .NET Core CLI command dotnet new for creating our project. We can create a new Blazor Server project using blazorserver template. Here you can see a complete list of project templates that can be used with dotnet new command.

dotnet new blazorserver -o 'BlazorServerCRUD.Web'

A new blazor server web project is created. Now we need to open the project folder in vscode. In vscode explorer click Open Folder and select project directory.

In the vscode Explorer, we can see our newly created project and it should look like this,

Blazor project template contains some default files, if we run our application right away it will be launched as a Hello World! application. For launching our application from vscode, we need to configure the vscode specific launch configuration. launch.json file is used to configure the debugger in vscode.

vscode generates a launch.json file with almost all of the required information. Go to Run tab and click on create a lauch.json file, it will ask for the environment, select .Net Core (Do not select Blazor WebAssembly Debug as our application is Balzor Server app) as shown below,

It will create launch.json file and it should look like this,

Click on Add Configuration button, a list of configurations will popup, select .NET: Launch a local NET Core Web App

This will add the required debug configuration, change<target-framework> to netcoreapp3.1, and <project-name.dll> to BlazorServerCRUD.Web.dll in the configuration file. Now launch file should look like this,

Our debug configuration is now complete. Ok, let's run our application by clicking Run>Start Debugging or by hitting F5

An error message will popup Could not find the task 'build' with an option to Configure Task. This is because we need to build our application before launch and in our launch.json build is specified as a preLaunchTask

Click on Configure Task, and select Create task.json from the template and select .NET Core template.

This will add a task.json file,

Now we are all set to build, debug, and launch our Blazor application. Hit F5, the app will be launched in the browser,

We have successfully launched our Blazor Server App from vs code. Next, we need to create a model class. Here I'm going to create a model class in a separate .Net standard class library project

Create .Net Core Class Library Project

We are going to create a new project, but the folder opened in vscode is the root of our web project. Now we need to manage multiple projects using one window. vscode has the concept of a 'workspace' which lets you add several 'root' folders to vscode in the same window.

So, lets set up our workspace in vscode. First, open the parent folder,

Then save the opened folder as the workspace using Save Workspace As option in vscode.

Our workspace is ready. Let's create a class library project. For creating a .net core class library project, run the below command in a new terminal window,

dotnet new classlib -o BlazorServerCRUD.Models

Make sure to run the command from the workspace directory - BlazorServerCRUD

The new Class Library project will be added with the name BlazorServerCRUD.Models and the vscode Explorer should look like this,

Now, we have two projects in our vscode workspace and we need to add the library project reference to our web project. That means we may need to build both the projects while debugging our application. How do we do that? One option is to build class library project by using dotnet build command every time. To make it handier, we can add a solution(.sln) file and add both projects to that solution. Then both projects will be built at the time of debugging.

Let's see how we can achieve this in vscode. Open a new terminal and run dotnet new sln command to create a solution file

dotnet new sln -n BlazorServerCRUD

A new solution file will be created with the name 'BlazorServerCRUD'. Let's add our projects to this sln using dotnet sln add command.

dotnet sln add BlazorServerCRUD.Web/BlazorServerCRUD.Web.csproj
dotnet sln add BlazorServerCRUD.Models/BlazorServerCRUD.Models.csproj

For launching the application, vscode will look for launch.json and task.json in the root directory. As we changed our root directory from BlazorServerCRUD.Web to BlazorServerCRUD, we have to move these configuration files also. Alternatively, we can add new launch configuration files for the current root directory. Note that 'program' and 'cwd' location in our new launch.json is now changed to:

Now we have completed our launch configuration changes as per the vscode workspace changes. Run the application and make sure everything is setup correctly.

Let’s create an Employee Model class with some properties. You can do this by right click on BlazorServerCRUD.Models and select 'New Class'.

Note: You will see this 'New Class' context menu option only if you installed C# Extensions extension in vscode

The Employee Model class should look like this.

For the Gender property, I have created a separate enum class as shown below.

For Department property, I have created another class with DepartmentId and DepartmentName properties.

Now, let’s add BlazorServerCRUD.Models as a reference to BlazorServerCRUD.Web. We can use dotnet add reference command to add a project reference. Run this command from web project folder, i.e., use cd BlazorServerCRUD.Web and run below command.

dotnet add reference ../BlazorServerCRUD.Models/BlazorServerCRUD.Models.csproj

Now we have created our model class library project and referenced it to our blazor web application.
Our next step is to create an API project to manage employee data.

Create ASP.Net Core Web API

For managing the data-access we will be adding a REST API project as a third project. Let’s add the api project using dotnet new command and add to our solution as shown below. --nohttps is used because we don't want https bindings for dev environment.

Run Multiple Projects in Visual Studio Code

Our blazor application is going to use the newly created API for backend data access. i.e., These two projects need to be launched simultaneously. To do this, we need to add one more configuration in our launch.json file. Open launch.json file in .vscode directory and click on Add Configuration button at the bottom right corner. Select .NET: Launch a local NET Core Web App. It will add one more ".NET Core Launch (web)" configuration. Change the name to ".NET Core Launch (api)" for identifying the launch settings. Set program property of newly added configuration to pointing to API application dll.

Now we have two debug configurations and this is all fine but doesn’t give us a way to run both of our projects. Let’s tweak the env property to set the ASPNETCORE_URLS which will control the application launch URL. Our Web API URL is set to http://localhost:5000 and Web Application URL is now set to http://localhost:5001

The following is the full configuration in my launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": ".NET Core Launch (Api)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/BlazorServerCRUD.Api/bin/Debug/netcoreapp3.1/BlazorServerCRUD.Api.dll",
            "args": [],
            "cwd": "${workspaceFolder}/BlazorServerCRUD.Api",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
                "uriFormat": "%s/api/employee"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_URLS": "http://localhost:5000"
            },
        },
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/BlazorServerCRUD.Web/bin/Debug/netcoreapp3.1/BlazorServerCRUD.Web.dll",
            "args": [],
            "cwd": "${workspaceFolder}/BlazorServerCRUD.Web",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_URLS": "http://localhost:5001"

            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/BlazorServerCRUD.Web/Views"
            }
        }

    ]
}

Now that all our configurations are good to go.

Go to the vscode Run tab, there you can see both of our launch configurations listed. If you select the 'API' one and hit the green play button it will start the API. With the API running you can then select the 'Web' configuration and hit the green play button and you will have both of your applications running in debug mode.

Add Entity Framwork Core

Now we are going to add database support to our project. To do this, For data access, we are using Entity Framework Core. To add EF Core to our project, we will need to install Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore.Tools NuGet packages. Let's do this by using the dotnet add package command. These packages need to be installed in the API project. Open new terminal window and navigate to BlazorServerCRUD.Api directory and run the commands.

We also, need to add our model class library project reference to the API project.

Now we have added the required packages and references to our API project. Let's verify that in the API project file.

In this demo, I'm using EF Core Code First approach for data access. To get started with this, Let’s add the connection string to the appsettings.json file of BlazorServerCRUD.Api project. The connection string added is shown below. Here I'm using SQL Server Express LocalDB for the database.

Server=(localdb)\\mssqllocaldb;Database=DBEmployees;Trusted_Connection=True;MultipleActiveResultsets=true

Let’s add a new folder called Models to BlazorServerCRUD.Api project and add a new class called AppDbContext.cs.

Modify AppDbContext class to derive from DbContext. For this, we need to import the namespace Microsoft.EntityFrameworkCore. With the help of C# Extensions vscode will show a quick fix to import this namespace.

For the DbContext class to be able to do any useful work it needs an instance of DbContextOptions class. The DbContextOptions instance carries configuration information such as the connection string and the database provider to use. We are passing the instance of DbContextOptions class to base DbContext class. The updated class should look like this.

Now we will create a DbSet property for each of the entities created in our application. At the moment we have Department and Employee classes that represent the corresponding database table. We will use these DbSet properties to query and save instances of Employee and Department classes. The updated code is as shown below.

Let’s add some seed data for the employees and the department. We can do that by overriding OnModelCreating class. Before that, let's change the Department property in Employee class to int DepartmentID for simplicity.

The next step is to configure the SQL Server in Startup class, under ConfigureServices method as shown below.

The last step is to add database migration. To do that, we need to install .Net Core EF Tools. Use the following command to install ef tools globally.

dotnet tool install --global dotnet-ef

Now let's add database migration using dotnet ef migrations add command.

Once migration is successful, a migrations folder will be added to API project.

The next step is to apply the created migration. To do that we will run dotnet ef database update command.

Once this is successfully completed, we will have our tables with our seed data created in EmployeeDB database. You can see the DB creation logs while applying the migration as in the below image.

Now the database is set up with our seed data we can start to implement the CRUD operations. We are going to use the repository pattern to implement the logic required to access the data source.

Let's create an interface IEmployeeRepository which defines all the CRUD operations to be performed against the employee object.
For this, we have to import BlazorServerCRUD.Models to this interface. Let's do this by using the quick fix

I have added all the methods to perform CRUD operations in IEmployeeRepository interface.

Next step is to create EmployeeRepository class and implement IEmployeeRepository interface.

This EmployeeRepository class will need the AppDbContext class to communicate with the SQL database. We can do that by injecting an instance of AppDbContext class through the constructor.

We have the dependency of AppDbContext injected in EmployeeRepository class. Now let’s add the actual implementations to all CRUD methods as shown below.

Same way, we have to create an interface class called IDepartmentRepository and the implementation class DepartmentRepository for the Department entity as shown below.

And, we need to register repository implementation with the interface in Startup.cs class.

Now we have our repository classes ready. Let's build our REST API to access the employee data. We first need to create a controller class. I have created an EmployeesController class which derives from ControllerBase class. To do this, we can use aspnet-codegenerator (Scaffolding). This tool runs the ASP.NET Core scaffolding engine for avilable generators like controller. Let's install dotnet aspnet-codegenerator by running the below command.

dotnet tool install -global dotnet-aspnet-codegenerator

We also need to add Microsoft.VisualStudio.Web.CodeGeneration.Design for scaffolding our controller. Let's add this package using the following command

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

We are all set to create our first controller using dotnet aspnet-codegenerator. Run the below command to generate our EmployeeController

dotnet aspnet-codegenerator controller -name EmployeeController -api -outDir Controllers

Now, In order to retrieve Employees data from the database, we will need access to EmployeeRepository. I have updated the Employees controller class to inject an IEmployeeRepository class through a constructor as shown below.

Let’s add a HttpGet method GetEmployees to retrieve the list of all employees. It will return an Http status code of 200 OK as a response by using the inbuilt OK method available in ControllerBase base class.

Similarly, let's add other required methods in this EmployeeController. Another HttpGet method with the id parameter for fetching employee data of a specific employee by id, a HttpPost method for saving, a HttpPut method for updating, and an HttpDelete for deleting employee data.

Let’s add a uriFormat property for serverReadyAction in launch.json configuration settings for the API to call our employee controller when we launch our application as shown below.

Now we can test our API by launching the application. Go to Run and select .NET Core Launch (Api) and hit the play button.

Our API will be launched in the browser with api/employees URL by default which in turn calls the GetEmployees method to return the list of employees.

Now we have our API ready to supply some data. Before implementing all CRUD operations, let's go back to our Blazor web project and see how we can consume this API to display the employee list.

Customize Blazor Server Web Application

In our blazor project, there are some default files included as part of the project template. Let’s delete the unnecessary files which we don’t need for this project. I have highlighted the files to be deleted below.

Also, remove the deleted files references from Startup.cs class.

And, remove the unwanted menu from NavMenu.razor file. Highlighted below.

As we got rid of all unwanted files, let’s launch our application and see what we have got so far. The page will show nothing as there is nothing linked to home/root address.

Let’s modify the logic to show the employee list. To do this, add a razor component called EmployeeList.razor in Pages folder. You can use the dotnet new razorcomponent command to add a new razor component.

EmployeeList.razor component will look like this.

Now to link EmployeeList.razor component to the root address, add @page directive as shown below.

Now let’s run the project again. As you can see below. EmployeeList component is appearing at the root URL.

Now we have created our first razor component to view the employee list.
Next, we need to call our REST API created in BlazorServerCRUD.Api project from our BlazorServerCRUD.Web Blazor application.
We will create a separate service that will call the REST API. To do that I have added a new folder called Services to BlazorServerCRUD.Web project. I added a new Interface file called IEmployeeService with GetEmployees as an interface method as shown below.

I have added another implementation class called EmployeeService that implements IEmployeeService interface. To call our API from EmployeeService, we need an HttpClient. Let's inject the HttpClient instance in EmployeeService.

Next, we will have to register Httpclient service to the ASP.Net Core dependency injection container by using AddHttpClient method and map IEmployeeService interface to the EmployeeService class. Also, add the base address of our API.

Next, we have to install Microsoft.AspNetCore.Blazor.HttpClient Nuget Package in our BlazorServerCRUD.Web project. Currently, it is a prerelease. Lets add the package by running below command,

dotnet add package Microsoft.AspNetCore.Blazor.HttpClient --version 3.2.0-preview3.20168.3

Let’s now use httpClient instance in our EmployeeServices class to call REST API through GetEmployees method. I have used GetJsonAsync method which returns an array of Employee. This is an extension method for HttpClient. Include Microsoft.AspNetCore.Components namespace to make this method to appear. The method also requires the path to access the resource. The given path /api/employee is appended to the BaseAddress to return the result.

Now, let's modify our EmployeeList razor component to display the employee data accessed through EmployeeService. First, we need to inject IEmployeeService to our EmployeeList blazor component.

This injected EmployeeService instance is then used in ASP.NET Core Blazor lifecycle method OnInitializedAsync to fetch the list of Employees. This returned data is assigned to employees property.

EmployeeList.razor page uses that employees property to display the data on the screen. Let's add some HTML to our razor component to display the data as shown below.

We are all set to display the data we fetch from the API in our blazor application. Go to Run and first start the API and then the web application. Now you can see the employee list component now displays data from the database using REST API.

We have now displayed employee data from the Employee table. You can see, here the department is shown as Department Id. To display the department name, we have to fetch data from the Department table. To do this, Let's add a navigation property for Department in the Employee entity class.

Then we have to update GetEmployees and GetEmployee methods to include Departments table data by chaining Include method as shown below.

Next, We need to update the EmployeeList.razor Blazor component to display the department name instead of the department id.

Let's run the application and blazor component will show the department name instead of department Id.

Our next step is to get details of a specific employee. For this, let's add a new razor component EmployeeDetails.razor to display the details of a specific employee.

dotnet new razorcomponent -n EmployeeDetails -o Pages

We will be navigating to this page from our EmpoloyeeList page. To do this, we will have to provide a route parameter by using @page directive. Here {id} is the route parameter that will represent the employee Id.

To access {id} route parameter, we have to create a property in our EmployeeDetails.razor and decorate it with [Parameter] attribute. With this change, the id route parameter will be directly mapped to Id property.

Now, let's add a method GetEmployee to access the details of the employee in IEmployeeService interface and implement it in the EmployeeServices as shown below,

Note: You can import required namespace to components using _import.razor as shown below,

To call our GetEmployee method from the employee details page, let's inject the IEmployeeService in the component. To store the result from this method we also need to create an Employee property. With these changes, our EmployeeDetails.razor component should look like this.

Next, we can use ASP.NET Core Blazor lifecycle method OnInitializedAsync to retrieve employee data by id.

Let's add the HTML in EmployeeDetails.razor component to display employee details using the employee property. Also added the buttons to perform 'Edit', 'Delete', and 'Back' operations which we are going to implement next. To avoid NullReferenceException error add an If clause to check if the Employee property is initialized before using it.

For accessing the above Employee details page, let's add a link in our Employee list page.

With all these changes saved, let's run our application. In the employee list page, click on the employee name. We will be redirected to our employee details page and it should look like this

Now, we have displayed details of a specific employee by using the employee id. Next, we are going to implement the actual CRUD operations. For this, we have to add the necessary methods in our IEmployeeService interface,

And, implement these methods in EmployeeService class.

For understanding ASP.NET Core Blazor event handling, let's implement the Delete operation first.

For this, add a new method DeleteEmployee() in EmployeeDetails.razor component.

And, call this method in @onclick event handler as shown below,

With these changes saved, we have implemented the Delete operation. Run the application, go to employee datils you want to delete, and click on the delete button. The employee data for this particular employee will be deleted from the database. Now you need to navigate to home manually to verify this. For handling URI redirection in ASP.NET Core, we can use NavigationManager Class. Let's inject NavigationManager in EmployeeDetails.razor and modify the Delete method as shown below.

Now, on clicking the Delete button on the employee details page, you will be redirected to the home page. You can see the deleted employee is not listed on the homepage anymore.

Now, let's implement Create and Update operations. For this, we will be using CreateEmployee.razor and UpdateEmployee.razor respectively. Before creating these two components, let's create a child component that can be shared by both create and update components. Here we will also learn how to pass data from parent component to child component using parameters.

Let's add a razor component Form.razor in the Pages folder.

dotnet new razorcomponent -n Form -o Pages

In this Form.razor component we will be using ASP.NET Core Blazor forms and validation. Forms and validation are supported in Blazor using data annotations.

In this Form.razor, add an EditForm tag that takes in an Employee model and has a function call to submit. Inside the EditForm tag, we are going to add required blazor form controls and validations.

In the @code section of Form.razor, declare the parameters using the [Parameter] attribute. These parameters are used for passing data between parent and child components. We have an Employee object, a string for holding the button text, and an EventCallback for the method to be called on submitting the form. Below is my Form.razor component.

PS. Here the department select is hardcoded for simplicity, in real scenarios the department values should be fetched from the database.

<EditForm Model="@employee" OnValidSubmit="@OnValidSubmit">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label>Employee Name :</label>
        <div>
            <InputText @bind-Value="@employee.EmployeeName" class="form-control col-sm-3" />
            <ValidationMessage For="@(() => employee.EmployeeName)" />
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Gender :</label>
            <div>
                <InputSelect @bind-Value="@employee.Gender" class="form-control col-sm-3"> 
                   <option value="Select">--Select--</option>
                   <option value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="Other">Other</option>
                </InputSelect>
                <ValidationMessage For="@(() => employee.Gender)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>DOB :</label>
            <div>
                <InputDate @bind-Value="@employee.DateOfBirth" class="form-control col-sm-3" />
                <ValidationMessage For="@(() => employee.DateOfBirth)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Department :</label>
            <div>
                <select @bind="@employee.DepartmentID" class="form-control col-sm-3"> 
                   <option value=0>--Select--</option>
                   <option value=1>Admin</option>
                   <option value=2>HR</option>
                   <option value=3>Payroll</option>
                </select>
                <ValidationMessage For="@(() => employee.DepartmentID)" />
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-success">
        @ButtonText
    </button>
</EditForm>

@code {
    [Parameter]
    public Employee employee { get; set; }
    [Parameter]
    public string ButtonText { get; set; } = "Save";
    [Parameter]
    public EventCallback OnValidSubmit { get; set; }
}

Now, let’s start using our Forms component. Create a new razor component CreateEmployee.razor

dotnet new razorcomponent -n CreateEmployee -o Pages

For navigating to this create employee page, let's add a @page directive. Then, inject IEmployeeService for calling the AddEmployee method and inject NavigationManger for handling redirection from this component.

In this CreateEmployee component, add the Form component we have created earlier. To this Form component, we need to pass three parameters. 'ButtonText' string, 'employee' object, and 'OnValidSubmit' method. To do this, let's create an Employee object and a method in the @code section. With these changes, our CreateEmployee.razor should look like this,

Now, we will have to create a link to CreateEmployee from home page. To do this, let's modify the EmployeeList component and add a 'Create New' button. I have added an anchor tag with href="createemployee" as shown below,

With all these changes saved, let's run our application. On the home page, you can see a 'Create New' button displayed.

By clicking on the 'Create New' button, you will be navigated to CreateEmployee component.

You can see the create employee form with the button text as 'Create Employee'. Here you can save the employee details and you will be navigated to home. The newly created employee will be displayed in the employee grid.

Now, let's implement the Update operation. First, Create a new razor component UpdateEmployee.razor

dotnet new razorcomponent -n UpdateEmployee -o Pages

In this UpdateEmployee component, we can use the same Form component with a different button text. Add a @page directive with a route parameter. Here {id} is the route parameter that will represent the employee Id. Then, inject IEmployeeService for calling the UpdateEmployee method and inject NavigationManger for handling redirection from this component.

Same as we did in the CreateEmployeecomponent, in UpdateEmployee component, add the Form component and we need to pass three parameters. 'ButtonText' string, 'employee' object, and 'OnValidSubmit' method. To do this, let's create an Employee object and a method in the @code section. In addition to this, to access the {id} route parameter, we have to create a property Id and decorate it with the [Parameter] attribute. Also, we need to fetch the details of the employee using this Id parameter. For this we can use a different ASP.NET Core Blazor lifecycle method OnParametersSetAsync. With these changes, our UpdateEmployee.razor should look like this.

Now, we are all set with our UpdateEmployee component. We will be navigating to this component form our EmployeeDetails component. In EmployeeDetails.razor, let's modify the 'Edit' button and add a link to UpdateEmployee with @employee.EmployeeID as routing parameter.

With all these changes saved, let's run our application. From the employee list component, click on the employee name. It will navigate to employee details.

Click on the 'Edit' button, our update employee form will be loaded with all the employee details, and the button text will be displayed as 'Update Employee'.

Modify any field and click on the 'Update Employee' button, you will be navigated to the employee list and there you can see the employee details updated.

Summary

In this article, we covered an introduction to ASP .Net Core Blazor Server Application and How to perform basic CRUD operations with blazor application. We have also learned how to set up the ASP.Net Core development environment in Visual Studio Code as well as Working with multiple projects in the Visual Studio Code. We built an ASP.NET Core 3.1 WebAPI with Entity Framework Core for managing the backend data. You can find the complete source code here.

Comments

[pcoganwu]

Thanks Rinesh for this tutorial. I am have problem starting the API project, it giving me an exception of type 'System.ArgumentNullException'. I ran the project using Visual Studio and it is working find in Visual Studio. See the attached image for the error details. Any suggesting from your end will help. I am using .Net5.0

[rinesh]

The project is in .Net Core 3.1. If you are using .Net5.0, there may be some compatibility issues. Also, I couldn't see any images attached, for the issue details. Let me check with .Net5 and I will update you.

[pcoganwu]

Thanks Rinesh. I also ran the project in .Net Core 3.1, I had the same issue. I will upload the file again. When trying to load the Employee data from the API, it is saying the connection string from the appsettings.json is null. The file is uploaded to this link dev-to-uploads.s3.amazonaws.com/i/...

[rinesh]

Did you checked appsettings.json?. It should contain a DefaultConnection sting as shown here dev-to-uploads.s3.amazonaws.com/i/...

[pcoganwu]

Yes my appsettings.json have a DefaultConnection. See the link dev-to-uploads.s3.amazonaws.com/i/...

[runtimevic]

Hello, sorry for my English, it is not my native language, I am following the realization of this project to learn blazor, and I have a few doubts:
.- What version of microsoft sql server have you installed?
.- To make the connection to the database with SQL Server Express LocalDB, it could also work with a database that is housed in a container With Docker ?, or what other type of method do I have to use to connect to the database in a container?
.- If you could tell me using postman what would be the different requests for get, post, delete, etc ..., they would be very useful for me to test the api.

Congratulations on the good work and the effort to document it with photos so that we can follow and understand each step.

Thank you very much for everything Victor.

[rinesh]

I have used SQL Server 2019. Not tested using a database in a container.
This might be helpful docs.microsoft.com/en-us/sql/linux...

[runtimevic]

Hi,
it would be great if you could complete the project with sorting and filtering of the data.
best regards, Víctor.

[runtimevic]

Hi, Rinesh
it would be great if you could complete the project with sorting and filtering of the data.
best regards, Víctor.