Post
Ask Question

Blazor - Create SPA With Azure Database For MariaDB Server

Overview
 
In this article, we will create a MariaDB database service in Azure and connect MariaDB in a Single Page Blazor application.'
 
Azure Database for MariaDB is a relational database service in the Microsoft cloud. This service is currently in public preview. Azure Database for MariaDB is based on the MariaDB community edition database engine.
 
MariaDB Server is one of the most popular database servers in the world. MariaDB turns data into structured information in a wide array of applications, ranging from banking to websites. It is an enhanced, drop-in replacement for MySQL. MariaDB is used because it is fast, scalable, and robust, with a rich ecosystem of storage engines, plugins, and many other tools that make it very versatile for a wide variety of use cases. It’s made by the original developers of MySQL and guaranteed to stay open source.
Please refer to this URL to get more details of MariaDB.
 
I have already written many articles on Blazor in C# Corner. If you are new to the Blazor framework, please refer to the below articles to get a basic idea of Blazor.
Create Azure Database for MariaDB server
 
Create new resource -> Databases -> Azure Database for MariaDB (Currently it is in preview)
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
We can give a name to the MariaDB server. Also, choose the resource group name. If you do not have any resource group, you can create a new one. You must give the server admin login name and password.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
You can choose the pricing tier. I chose the Basic tier.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
After selecting the pricing tier, you can click the “Create” button to create the DB server. It will take some moments to create the server.
 
We must add the IP address in Connection security to access MariaDB from outside Azure. You can choose “Connection security” tab and add Starting IP and Ending IP address. Here I added minimum IP address and maximum IP address. Because my system IP address often changes. But in production, we can give the exact IP address.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
Create Database and Table in MariaDB
 
I am using MySQL Workbench to connect MariaDB for creating Database and Table. Most of the MySQL admin tools also support MariaDB. You can download a free MySQL community edition from this URL.
 
Please give connection name, hostname, username in the workbench. You can get the hostname and username from the Azure portal. You can also store the password as Vault. It is fully secured.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
We can create a new database and table using Query editor. Here I am creating an Employee table with five columns.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
  1. CREATE DATABASE sarathmariadb;  
  2. USE sarathmariadb;  
  3. DROP TABLE IF EXISTS Employee;  
  4. CREATE TABLE Employee (Id VARCHAR(50) PRIMARY KEY,  
  5. Name VARCHAR(50),  
  6. Department VARCHAR(50),  
  7. Designation VARCHAR(50),  
  8. Gender VARCHAR(10));  
We have successfully created a MariaDB server and created one database and table.
 
Create new Blazor Application
 
In this article, we will create an Employee data entry single page application. I am using free Visual Studio 2017 Community edition for creating a Blazor application.
 
Choose .NET Core -> ASP.NET Core Web Application template
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
Currently, there are three types of Blazor templates available. We choose Blazor (ASP.NET Core hosted) template.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
Our solution will be ready in a moment. Please note that there are three projects created in our solution - “Client”, “Server” and “Shared”.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
By default, Blazor created many files in these three projects. We can remove all the unwanted files like “Counter.cshtml”, “FetchData.cshtml”, “SurveyPrompt.cshtml” from Client project and “SampleDataController.cs” file from Server project and delete “WeatherForecast.cs” file from the shared project too.
 
We can create a Models folder in “Shared” project and create Employee class inside this Models folder.
 
Employee.cs
  1. namespace BlazorMariaDB.Shared.Models    
  2. {    
  3.     public class Employee    
  4.     {    
  5.         public string Id    
  6.         {    
  7.             get;    
  8.             set;    
  9.         }    
  10.         public string Name    
  11.         {    
  12.             get;    
  13.             set;    
  14.         }    
  15.         public string Department    
  16.         {    
  17.             get;    
  18.             set;    
  19.         }    
  20.         public string Designation    
  21.         {    
  22.             get;    
  23.             set;    
  24.         }    
  25.         public string Gender    
  26.         {    
  27.             get;    
  28.             set;    
  29.         }    
  30.     }    
  31. }  
As I mentioned earlier MariaDB is developed from (forked) MySQL. We can use MySQL providers to connect MariaDB in .NET.
 
We can install “MySql.Data” NuGet Package in the “Server” project. This package is developed by Oracle corporation.
 
Blazor - Create SPA with Azure Database for MariaDB Server
 
We create a “DataAccess” folder in the “Server” project and create MariaDBContext class inside the DataAccess folder and add all the CRUD operations logic inside this class.
 
We will call the methods in this class from our Controller class later.
 
MariaDBContext.cs
  1. using BlazorMariaDB.Shared.Models;    
  2. using MySql.Data.MySqlClient;    
  3. using System;    
  4. using System.Collections.Generic;    
  5. using System.Data;    
  6. using System.Threading.Tasks;    
  7.     
  8. namespace BlazorMariaDB.Server.DataAccess    
  9. {    
  10.     public class MariaDBContext    
  11.     {    
  12.         public string ConnectionString { get; set; }    
  13.     
  14.         public MariaDBContext(string connectionString)    
  15.         {    
  16.             ConnectionString = connectionString;    
  17.         }    
  18.     
  19.         private MySqlConnection GetConnection()    
  20.         {    
  21.             return new MySqlConnection(ConnectionString);    
  22.         }    
  23.     
  24.         public async Task<List<Employee>> GetAllAsync()    
  25.         {    
  26.             List<Employee> list = new List<Employee>();    
  27.     
  28.             using (MySqlConnection conn = GetConnection())    
  29.             {    
  30.                 conn.Open();    
  31.                 var commandText = @"SELECT Id,Name,Department,Designation,Gender FROM Employee;";    
  32.                 MySqlCommand cmd = new MySqlCommand(commandText, conn);    
  33.     
  34.                 using (var reader = cmd.ExecuteReader())    
  35.                 {    
  36.                     while (await reader.ReadAsync())    
  37.                     {    
  38.                         list.Add(new Employee()    
  39.                         {    
  40.                             Id = await reader.GetFieldValueAsync<string>(0),    
  41.                             Name = await reader.GetFieldValueAsync<string>(1),    
  42.                             Department = await reader.GetFieldValueAsync<string>(2),    
  43.                             Designation = await reader.GetFieldValueAsync<string>(3),    
  44.                             Gender = await reader.GetFieldValueAsync<string>(4),    
  45.                         });    
  46.                     }    
  47.                 }    
  48.     
  49.             }    
  50.             return list;    
  51.         }    
  52.     
  53.         public async Task InsertAsync(Employee employee)    
  54.         {    
  55.             employee.Id = Guid.NewGuid().ToString();    
  56.     
  57.             using (MySqlConnection conn = GetConnection())    
  58.             {    
  59.                 conn.Open();    
  60.                 var commandText = @"INSERT INTO Employee (Id,Name,Department,Designation,Gender) VALUES (@Id, @Name, @Department, @Designation, @Gender);";    
  61.     
  62.                 MySqlCommand cmd = new MySqlCommand(commandText, conn);    
  63.     
  64.                 cmd.Parameters.Add(new MySqlParameter    
  65.                 {    
  66.                     ParameterName = "@Id",    
  67.                     DbType = DbType.String,    
  68.                     Value = employee.Id,    
  69.                 });    
  70.     
  71.                 cmd.Parameters.Add(new MySqlParameter    
  72.                 {    
  73.                     ParameterName = "@Name",    
  74.                     DbType = DbType.String,    
  75.                     Value = employee.Name,    
  76.                 });    
  77.     
  78.                 cmd.Parameters.Add(new MySqlParameter    
  79.                 {    
  80.                     ParameterName = "@Department",    
  81.                     DbType = DbType.String,    
  82.                     Value = employee.Department,    
  83.                 });    
  84.     
  85.                 cmd.Parameters.Add(new MySqlParameter    
  86.                 {    
  87.                     ParameterName = "@Designation",    
  88.                     DbType = DbType.String,    
  89.                     Value = employee.Designation,    
  90.                 });    
  91.     
  92.                 cmd.Parameters.Add(new MySqlParameter    
  93.                 {    
  94.                     ParameterName = "@Gender",    
  95.                     DbType = DbType.String,    
  96.                     Value = employee.Gender,    
  97.                 });    
  98.     
  99.                 await cmd.ExecuteNonQueryAsync();    
  100.     
  101.             }    
  102.         }    
  103.     
  104.         public async Task UpdateAsync(Employee employee)    
  105.         {    
  106.             using (MySqlConnection conn = GetConnection())    
  107.             {    
  108.                 conn.Open();    
  109.                 var commandText = @"UPDATE Employee SET Name=@Name, Department=@Department, Designation=@Designation, Gender=@Gender  Where Id=@Id;";    
  110.     
  111.                 MySqlCommand cmd = new MySqlCommand(commandText, conn);    
  112.     
  113.                 cmd.Parameters.Add(new MySqlParameter    
  114.                 {    
  115.                     ParameterName = "@Id",    
  116.                     DbType = DbType.String,    
  117.                     Value = employee.Id,    
  118.                 });    
  119.     
  120.                 cmd.Parameters.Add(new MySqlParameter    
  121.                 {    
  122.                     ParameterName = "@Name",    
  123.                     DbType = DbType.String,    
  124.                     Value = employee.Name,    
  125.                 });    
  126.     
  127.                 cmd.Parameters.Add(new MySqlParameter    
  128.                 {    
  129.                     ParameterName = "@Department",    
  130.                     DbType = DbType.String,    
  131.                     Value = employee.Department,    
  132.                 });    
  133.     
  134.                 cmd.Parameters.Add(new MySqlParameter    
  135.                 {    
  136.                     ParameterName = "@Designation",    
  137.                     DbType = DbType.String,    
  138.                     Value = employee.Designation,    
  139.                 });    
  140.     
  141.                 cmd.Parameters.Add(new MySqlParameter    
  142.                 {    
  143.                     ParameterName = "@Gender",    
  144.                     DbType = DbType.String,    
  145.                     Value = employee.Gender,    
  146.                 });    
  147.     
  148.                 await cmd.ExecuteNonQueryAsync();    
  149.             }    
  150.     
  151.         }    
  152.     
  153.         public async Task DeleteAsync(string id)    
  154.         {    
  155.             using (MySqlConnection conn = GetConnection())    
  156.             {    
  157.                 conn.Open();    
  158.                 var commandText = @"DELETE FROM Employee Where Id=@Id;";    
  159.     
  160.                 MySqlCommand cmd = new MySqlCommand(commandText, conn);    
  161.     
  162.                 cmd.Parameters.Add(new MySqlParameter    
  163.                 {    
  164.                     ParameterName = "@Id",    
  165.                     DbType = DbType.String,    
  166.                     Value = id,    
  167.                 });    
  168.     
  169.                 await cmd.ExecuteNonQueryAsync();    
  170.             }    
  171.     
  172.         }    
  173.     
  174.         public async Task<Employee> FindOneAsync(string id)    
  175.         {    
  176.             using (MySqlConnection conn = GetConnection())    
  177.             {    
  178.                 conn.Open();    
  179.                 var commandText = @"SELECT Name,Department,Designation,Gender FROM Employee Where Id=@Id;";    
  180.                 MySqlCommand cmd = new MySqlCommand(commandText, conn);    
  181.                 cmd.Parameters.Add(new MySqlParameter    
  182.                 {    
  183.                     ParameterName = "@Id",    
  184.                     DbType = DbType.String,    
  185.                     Value = id,    
  186.                 });    
  187.     
  188.                 using (var reader = cmd.ExecuteReader())    
  189.                 {    
  190.                     if (await reader.ReadAsync())    
  191.                     {    
  192.                         return new Employee()    
  193.                         {    
  194.                             Id = id,    
  195.                             Name = await reader.GetFieldValueAsync<string>(0),    
  196.                             Department = await reader.GetFieldValueAsync<string>(1),    
  197.                             Designation = await reader.GetFieldValueAsync<string>(2),    
  198.                             Gender = await reader.GetFieldValueAsync<string>(3),    
  199.                         };    
  200.                     }    
  201.                     else    
  202.                     {    
  203.                         return null;    
  204.                     }    
  205.     
  206.                 }    
  207.             }    
  208.         }    
  209.     }    
  210. }  
We have created each method for CRUD actions inside this class. Please note we are using “MySqlConnection” class from “MySql.Data” library to connect MariaDB.
We can inject the MariaDBContext service in Startup class.
 
Startup.cs
  1. using BlazorMariaDB.Server.DataAccess;    
  2. using Microsoft.AspNetCore.Blazor.Server;    
  3. using Microsoft.AspNetCore.Builder;    
  4. using Microsoft.AspNetCore.Hosting;    
  5. using Microsoft.AspNetCore.ResponseCompression;    
  6. using Microsoft.Extensions.DependencyInjection;    
  7. using System.Linq;    
  8. using System.Net.Mime;    
  9.     
  10. namespace BlazorMariaDB.Server    
  11. {    
  12.     public class Startup    
  13.     {    
  14.         public void ConfigureServices(IServiceCollection services)    
  15.         {    
  16.             services.AddMvc();    
  17.     
  18.             services.AddResponseCompression(options =>    
  19.             {    
  20.                 options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]    
  21.                 {    
  22.                     MediaTypeNames.Application.Octet,    
  23.                     WasmMediaTypeNames.Application.Wasm,    
  24.                 });    
  25.             });    
  26.             var connStr = "Server=sarathlal.mariadb.database.azure.com; Port=3306; Database=sarathmariadb; Uid =sarathlal@sarathlal; Pwd=<user pasword>; SslMode=Preferred;";    
  27.             services.Add(new ServiceDescriptor(typeof(MariaDBContext), new MariaDBContext(connStr)));    
  28.         }    
  29.     
  30.         public void Configure(IApplicationBuilder app, IHostingEnvironment env)    
  31.         {    
  32.             app.UseResponseCompression();    
  33.     
  34.             if (env.IsDevelopment())    
  35.             {    
  36.                 app.UseDeveloperExceptionPage();    
  37.             }    
  38.     
  39.             app.UseMvc(routes =>    
  40.             {    
  41.                 routes.MapRoute(name: "default", template: "{controller}/{action}/{id?}");    
  42.             });    
  43.     
  44.             app.UseBlazor<Client.Program>();    
  45.         }    
  46.     }    
  47. }    
For simplicity, I have hard corded the connection details inside Startup class. You can even keep these connection details in a separate configuration file.
 
We can create an Employees controller now.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
We can add the below code in this controller class.
 
EmployeesController.cs
  1. using BlazorMariaDB.Server.DataAccess;    
  2. using BlazorMariaDB.Shared.Models;    
  3. using Microsoft.AspNetCore.Mvc;    
  4. using System.Collections.Generic;    
  5. using System.Threading.Tasks;    
  6.     
  7. namespace BlazorMariaDB.Server.Controllers    
  8. {    
  9.     [Route("api/[controller]")]    
  10.     public class EmployeesController : Controller    
  11.     {    
  12.         [HttpGet]    
  13.         public async Task<IEnumerable<Employee>> GetAsync()    
  14.         {    
  15.             MariaDBContext context = HttpContext.RequestServices.GetService(typeof(MariaDBContext)) as MariaDBContext;    
  16.             return await context.GetAllAsync();    
  17.         }    
  18.     
  19.         [HttpGet("{id}")]    
  20.         public async Task<Employee> Get(string id)    
  21.         {    
  22.             MariaDBContext context = HttpContext.RequestServices.GetService(typeof(MariaDBContext)) as MariaDBContext;    
  23.             return await context.FindOneAsync(id);    
  24.         }    
  25.     
  26.         [HttpPost]    
  27.         public async Task Post([FromBody] Employee employee)    
  28.         {    
  29.             if (ModelState.IsValid)    
  30.             {    
  31.                 MariaDBContext context = HttpContext.RequestServices.GetService(typeof(MariaDBContext)) as MariaDBContext;    
  32.                 await context.InsertAsync(employee);    
  33.             }    
  34.         }    
  35.     
  36.         [HttpPut]    
  37.         public async Task Put([FromBody] Employee employee)    
  38.         {    
  39.             if (ModelState.IsValid)    
  40.             {    
  41.                 MariaDBContext context = HttpContext.RequestServices.GetService(typeof(MariaDBContext)) as MariaDBContext;    
  42.                 await context.UpdateAsync(employee);    
  43.             }    
  44.         }    
  45.     
  46.         [HttpDelete("{id}")]    
  47.         public async Task Delete(string id)    
  48.         {    
  49.             MariaDBContext context = HttpContext.RequestServices.GetService(typeof(MariaDBContext)) as MariaDBContext;    
  50.             await context.DeleteAsync(id);    
  51.         }    
  52.     }    
  53. }   
We have added all the CRUD operations in this controller. We are calling methods from MariaDBContext class in this controller.
 
We can go to the “Client” project and modify “NavMenu.cshtml” Razor view.
 
NavMenu.cshtml
  1. <div class="top-row pl-4 navbar navbar-dark">    
  2.     <a class="navbar-brand" href="">Blazor MariaDB App</a>    
  3.     <button class="navbar-toggler" onclick=@ToggleNavMenu>    
  4.         <span class="navbar-toggler-icon"></span>    
  5.     </button>    
  6. </div>    
  7.     
  8. <div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>    
  9.     <ul class="nav flex-column">    
  10.         <li class="nav-item px-3">    
  11.             <NavLink class="nav-link" href="" Match=NavLinkMatch.All>    
  12.                 <span class="oi oi-home" aria-hidden="true"></span> Home    
  13.             </NavLink>    
  14.         </li>    
  15.         <li class="nav-item px-3">    
  16.             <NavLink class="nav-link" href="/listemployees">    
  17.                 <span class="oi oi-plus" aria-hidden="true"></span> Employee Details    
  18.             </NavLink>    
  19.         </li>    
  20.     </ul>    
  21. </div>    
  22.     
  23. @functions {    
  24. bool collapseNavMenu = true;    
  25.     
  26. void ToggleNavMenu()    
  27. {    
  28.     collapseNavMenu = !collapseNavMenu;    
  29. }    
  30. }   
We can create a new Razor view for listing employee details.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
You can add the below code in this Razor view
 
ListEmployees.cshtml
  1. @using BlazorMariaDB.Shared.Models    
  2.     
  3. @page "/listemployees"    
  4. @inject HttpClient Http    
  5.     
  6. <h1>Employee Details</h1>    
  7. <p>    
  8.     <a href="/addemployee">Create New Employee</a>    
  9. </p>    
  10. @if (employees == null)    
  11. {    
  12.     <p><em>Loading...</em></p>    
  13. }    
  14. else    
  15. {    
  16.     <table class='table'>    
  17.         <thead>    
  18.             <tr>    
  19.                 <th>Name</th>    
  20.                 <th>Department</th>    
  21.                 <th>Designation</th>    
  22.                 <th>Gender</th>    
  23.             </tr>    
  24.         </thead>    
  25.         <tbody>    
  26.             @foreach (var employee in employees)    
  27.             {    
  28.                 <tr>    
  29.                     <td>@employee.Name</td>    
  30.                     <td>@employee.Department</td>    
  31.                     <td>@employee.Designation</td>    
  32.                     <td>@employee.Gender</td>    
  33.                     <td>    
  34.                         <a href='/editemployee/@employee.Id'>Edit</a>    
  35.                         <a href='/deleteemployee/@employee.Id'>Delete</a>    
  36.                     </td>    
  37.                 </tr>    
  38.             }    
  39.         </tbody>    
  40.     </table>    
  41. }    
  42. @functions {    
  43. Employee[] employees;    
  44.     
  45. protected override async Task OnInitAsync()    
  46. {    
  47.     employees = await Http.GetJsonAsync<Employee[]>("/api/employees");    
  48. }    
  49. }   
Add three more Razor view files and add below codes
 
AddEmployee.cshtml
  1. @using BlazorMariaDB.Shared.Models    
  2.     
  3. @page "/addemployee"    
  4. @inject HttpClient Http    
  5. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper    
  6.     
  7. <h2>Create Employee</h2>    
  8. <hr />    
  9. <form>    
  10.     <div class="row">    
  11.         <div class="col-md-8">    
  12.             <div class="form-group">    
  13.                 <label for="Name" class="control-label">Name</label>    
  14.                 <input for="Name" class="form-control" bind="@employee.Name" />    
  15.             </div>    
  16.             <div class="form-group">    
  17.                 <label for="Department" class="control-label">Department</label>    
  18.                 <input for="Department" class="form-control" bind="@employee.Department" />    
  19.             </div>    
  20.             <div class="form-group">    
  21.                 <label for="Designation" class="control-label">Designation</label>    
  22.                 <input for="Designation" class="form-control" bind="@employee.Designation" />    
  23.             </div>    
  24.             <div class="form-group">    
  25.                 <label for="Gender" class="control-label">Gender</label>    
  26.                 <select for="Gender" class="form-control" bind="@employee.Gender">    
  27.                     <option value="">-- Select Gender --</option>    
  28.                     <option value="Male">Male</option>    
  29.                     <option value="Female">Female</option>    
  30.                 </select>    
  31.             </div>    
  32.         </div>    
  33.     </div>    
  34.     <div class="row">    
  35.         <div class="col-md-4">    
  36.             <div class="form-group">    
  37.                 <input type="button" class="btn btn-default" onclick="@(async () => await CreateEmployee())" value="Save" />    
  38.                 <input type="button" class="btn" onclick="@Cancel" value="Cancel" />    
  39.             </div>    
  40.         </div>    
  41.     </div>    
  42. </form>    
  43.     
  44. @functions {    
  45.     
  46. Employee employee = new Employee();    
  47.     
  48. protected async Task CreateEmployee()    
  49. {    
  50.     await Http.SendJsonAsync(HttpMethod.Post, "/api/employees", employee);    
  51.     UriHelper.NavigateTo("/listemployees");    
  52. }    
  53.     
  54. void Cancel()    
  55. {    
  56.     UriHelper.NavigateTo("/listemployees");    
  57. }    
  58. }   
EditEmployee.cshtml
  1. @using BlazorMariaDB.Shared.Models    
  2.     
  3. @page "/editemployee/{id}"    
  4. @inject HttpClient Http    
  5. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper    
  6.     
  7. <h2>Edit</h2>    
  8. <h4>Employee</h4>    
  9. <hr />    
  10.     
  11. <form>    
  12.     <div class="row">    
  13.         <div class="col-md-8">    
  14.             <div class="form-group">    
  15.                 <label for="Name" class="control-label">Name</label>    
  16.                 <input for="Name" class="form-control" bind="@employee.Name" />    
  17.             </div>    
  18.             <div class="form-group">    
  19.                 <label for="Department" class="control-label">Department</label>    
  20.                 <input for="Department" class="form-control" bind="@employee.Department" />    
  21.             </div>    
  22.             <div class="form-group">    
  23.                 <label for="Designation" class="control-label">Designation</label>    
  24.                 <input for="Designation" class="form-control" bind="@employee.Designation" />    
  25.             </div>    
  26.             <div class="form-group">    
  27.                 <label for="Gender" class="control-label">Gender</label>    
  28.                 <select for="Gender" class="form-control" bind="@employee.Gender">    
  29.                     <option value="">-- Select Gender --</option>    
  30.                     <option value="Male">Male</option>    
  31.                     <option value="Female">Female</option>    
  32.                 </select>    
  33.             </div>    
  34.         </div>    
  35.     </div>    
  36.     <div class="row">    
  37.         <div class="form-group">    
  38.             <input type="button" class="btn btn-default" onclick="@(async () => await UpdateEmployee())" value="Save" />    
  39.             <input type="button" class="btn" onclick="@Cancel" value="Cancel" />    
  40.         </div>    
  41.     </div>    
  42. </form>    
  43.     
  44. @functions {    
  45.     
  46. [Parameter]    
  47. string id { get; set; }    
  48.     
  49. Employee employee = new Employee();    
  50.     
  51. protected override async Task OnInitAsync()    
  52. {    
  53.     employee = await Http.GetJsonAsync<Employee>("/api/employees/" + id);    
  54. }    
  55.     
  56. protected async Task UpdateEmployee()    
  57. {    
  58.     await Http.SendJsonAsync(HttpMethod.Put, "api/employees", employee);    
  59.     UriHelper.NavigateTo("/listemployees");    
  60.     
  61. }    
  62.     
  63. void Cancel()    
  64. {    
  65.     UriHelper.NavigateTo("/listemployees");    
  66. }    
  67. }   
DeleteEmployee.cshtml
  1. @using BlazorMariaDB.Shared.Models    
  2.     
  3. @page "/deleteemployee/{id}"    
  4. @inject HttpClient Http    
  5. @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper    
  6.     
  7. <h2>Delete</h2>    
  8. <p>Are you sure you want to delete this Employee with Id :<b> @id</b></p>    
  9. <br />    
  10. <div class="col-md-4">    
  11.     <table class="table">    
  12.         <tr>    
  13.             <td>Name</td>    
  14.             <td>@employee.Name</td>    
  15.         </tr>    
  16.         <tr>    
  17.             <td>Department</td>    
  18.             <td>@employee.Department</td>    
  19.         </tr>    
  20.         <tr>    
  21.             <td>Designation</td>    
  22.             <td>@employee.Designation</td>    
  23.         </tr>    
  24.         <tr>    
  25.             <td>Gender</td>    
  26.             <td>@employee.Gender</td>    
  27.         </tr>    
  28.     </table>    
  29.     <div class="form-group">    
  30.         <input type="button" value="Delete" onclick="@(async () => await Delete())" class="btn btn-default" />    
  31.         <input type="button" value="Cancel" onclick="@Cancel" class="btn" />    
  32.     </div>    
  33. </div>    
  34.     
  35. @functions {    
  36.     
  37. [Parameter]    
  38. string id { get; set; }    
  39.     
  40. Employee employee = new Employee();    
  41.     
  42. protected override async Task OnInitAsync()    
  43. {    
  44.     employee = await Http.GetJsonAsync<Employee>("/api/employees/" + id);    
  45. }    
  46.     
  47. protected async Task Delete()    
  48. {    
  49.     await Http.DeleteAsync("api/employees/" + id);    
  50.     UriHelper.NavigateTo("/listemployees");    
  51. }    
  52.     
  53. void Cancel()    
  54. {    
  55.     UriHelper.NavigateTo("/listemployees");    
  56. }    
  57. }   
We have completed all the coding part. Now we can run the application.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
We can click the Employee Details link in the menu bar. It will open the Employee List page. There is a Create Employee Link. You can click that link. It will open the Add Employee page and here you can enter the employee details and “Save” button to save the information.
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
We can add one more employee in the same way. Now we have two employee records
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
We can modify the employee data by clicking the “Edit” link
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
I have modified the employee name. Now we can delete one employee record. You can click “Delete” link
 
Blazor - Create SPA with Azure Database for MariaDB Server 
 
It will display the selected employee details for confirmation and if you click “Delete” button employee data will be deleted from the table.
 
We have seen all the CRUD operations with employee data.
 

Conclusion

 
In this article, we have created an Azure Database for MariaDB server and we have also created a firewall rule to access this MariaDB server from outside Azure. Later we created a new database and table in MariaDB using MySQL workbench (we used workbench free community edition). We have created a Blazor application using Blazor (ASP.NET Core hosted) template. We used MySQL.Data NuGet package to provide data access from Blazor to the MariaDB server. We have successfully created two employee records and have seen how to modify and delete this employee data.
 
We can see more Blazor features in upcoming articles.

Similar Articles
Learn Build Progressive Web Apps