Blazor - Connect With Oracle Database In Amazon RDS

Introduction

In this article, we will see how to create an Oracle database instance in Amazon RDS (AWS Relational Database Service) and we will connect to the Oracle database from Blazor application. We will use Employee details Single Page Application for this purpose.

Prerequisites
  • AWS Account
  • Visual Studio 2017 (any edition) with .NET SDK 2.1 or later
  • Blazor Language Support
Please refer my C# Corner article to know the details about AWS free tier account creation.
 
If you are new to Blazor framework, please refer my below articles in C# Corner to know the basic about the Blazor framework.
Create Oracle Database instance in Amazon RDS

Login to AWS console

Select Database -> RDS -> Create database -> Oracle

 
Choose the Oracle Edition. If you are using AWS free tier, please choose Only enable options eligible for RDS free Usage Tier and click “Next” button to proceed
 
 
Give Oracle DB instance and master username and password details
 
 
Give the Database options. Here you must provide the default database name and port details. By default, database name is “ORCL” and Port is “1521”. You can proceed with all the default values.
 
 
Please choose the “Enable deletion protection” option if you want to avoid the database deleted accidently. You can’t delete the database if you select this option. Please click “Create database” button to proceed.
 
 
You will be notified with a message as shown below. You can click “View DB instance details” to get the database creation details.
 
 
 
You can see that the DB instance status is “creating”. It will take some time to finish the instance creation.
 
 
After some time, our database is created successfully. We can change the inbound IP rule. So that database can be accessed from outside AWS.
 
 
In my system IP address often changes. So, I will change the rule to Anywhere. So that I can access the Oracle database from any IP address. It is not suggested for production database.
 
Connect Oracle Database with Oracle SQL Developer

We have successfully created Oracle database and modified the inbound IP rule. Now we can connect Oracle database from Oracle SQL Developer tool. Oracle SQL Developer tool is a fee IDE for Oracle administration developed by Oracle corporation.

You can click the “+” to add a new connection. 

 
We can give the Oracle instance details to create a new connection. You can get the Hostname from AWS console.
 
 
We have successfully connected to Oracle database. Now we can create an Employee table
 
 
  1. CREATE TABLE Employee (Id VARCHAR2(50) PRIMARY KEY,  
  2. Name VARCHAR2(50),  
  3. Department VARCHAR2(50),  
  4. Designation VARCHAR2(50),  
  5. Gender VARCHAR2(10));   
Create Blazor Application

We can create a Blazor application now. I am creating an Employee data Single Page Application.

Open Visual Studio 2017 and choose .NET Core -> ASP.NET Core Web Application template

 
Currently there are three types of Blazor templates available. We can choose Blazor (ASP.NET Core hosted) template.
 
 
Our solution will be ready in a moment. Please note that there are three projects created in our solution - “Client”, “Server”, and “Shared”.
 
 
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 shared project too.
 
We can create a new “Models” folder in “Shared” project and add Employee class inside this folder.
 
Employee.cs
  1. namespace BlazorOracle.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. }  

We will use “Oracle.ManagedDataAccess.Core” NuGet package to connect Oracle database from Blazor application. We can install this package from NuGet manager in “Server” project

 
We can create a “DataAccess” folder in “Server” project and create “OracleDBContext” class inside this folder. This class contains all the logic for Oracle CRUD operations. We will call all these methods from our API controller later.

Please copy below code and paste to this class.

OracleDBContext.cs
  1. using BlazorOracle.Shared.Models;  
  2. using Oracle.ManagedDataAccess.Client;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Data;  
  6. using System.Threading.Tasks;  
  7.   
  8. namespace BlazorOracle.Server.DataAccess  
  9. {  
  10.     public class OracleDBContext  
  11.     {  
  12.         public string ConnectionString { get; set; }  
  13.   
  14.         public OracleDBContext(string connectionString)  
  15.         {  
  16.             ConnectionString = connectionString;  
  17.         }  
  18.   
  19.         private OracleConnection GetConnection()  
  20.         {  
  21.             return new OracleConnection(ConnectionString);  
  22.         }  
  23.   
  24.         public async Task<List<Employee>> GetAllAsync()  
  25.         {  
  26.             List<Employee> list = new List<Employee>();  
  27.   
  28.             using (OracleConnection conn = GetConnection())  
  29.             {  
  30.                 conn.Open();  
  31.                 var commandText = @"SELECT Id,Name,Department,Designation,Gender FROM Employee";  
  32.                 OracleCommand cmd = new OracleCommand(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.         public async Task InsertAsync(Employee employee)  
  53.         {  
  54.             employee.Id = Guid.NewGuid().ToString();  
  55.   
  56.             using (OracleConnection conn = GetConnection())  
  57.             {  
  58.                 conn.Open();  
  59.                 var commandText = @"INSERT INTO Employee (Id,Name,Department,Designation,Gender) VALUES (:Id, :Name, :Department, :Designation, :Gender)";  
  60.   
  61.                 OracleCommand cmd = new OracleCommand(commandText, conn);  
  62.   
  63.                 cmd.Parameters.Add(new OracleParameter  
  64.                 {  
  65.                     ParameterName = "@Id",  
  66.                     DbType = DbType.String,  
  67.                     Value = employee.Id,  
  68.                 });  
  69.   
  70.                 cmd.Parameters.Add(new OracleParameter  
  71.                 {  
  72.                     ParameterName = "@Name",  
  73.                     DbType = DbType.String,  
  74.                     Value = employee.Name,  
  75.                 });  
  76.   
  77.                 cmd.Parameters.Add(new OracleParameter  
  78.                 {  
  79.                     ParameterName = "@Department",  
  80.                     DbType = DbType.String,  
  81.                     Value = employee.Department,  
  82.                 });  
  83.   
  84.                 cmd.Parameters.Add(new OracleParameter  
  85.                 {  
  86.                     ParameterName = "@Designation",  
  87.                     DbType = DbType.String,  
  88.                     Value = employee.Designation,  
  89.                 });  
  90.   
  91.                 cmd.Parameters.Add(new OracleParameter  
  92.                 {  
  93.                     ParameterName = "@Gender",  
  94.                     DbType = DbType.String,  
  95.                     Value = employee.Gender,  
  96.                 });  
  97.   
  98.                 await cmd.ExecuteNonQueryAsync();  
  99.   
  100.             }  
  101.         }  
  102.   
  103.         public async Task UpdateAsync(Employee employee)  
  104.         {  
  105.             using (OracleConnection conn = GetConnection())  
  106.             {  
  107.                 conn.Open();  
  108.                 var commandText = @"UPDATE Employee SET Name=:Name, Department=:Department, Designation=:Designation, Gender=:Gender  Where Id=:Id";  
  109.   
  110.                 OracleCommand cmd = new OracleCommand(commandText, conn);  
  111.   
  112.                 cmd.Parameters.Add(new OracleParameter  
  113.                 {  
  114.                     ParameterName = "@Name",  
  115.                     DbType = DbType.String,  
  116.                     Value = employee.Name,  
  117.                 });  
  118.   
  119.                 cmd.Parameters.Add(new OracleParameter  
  120.                 {  
  121.                     ParameterName = "@Department",  
  122.                     DbType = DbType.String,  
  123.                     Value = employee.Department,  
  124.                 });  
  125.   
  126.                 cmd.Parameters.Add(new OracleParameter  
  127.                 {  
  128.                     ParameterName = "@Designation",  
  129.                     DbType = DbType.String,  
  130.                     Value = employee.Designation,  
  131.                 });  
  132.   
  133.                 cmd.Parameters.Add(new OracleParameter  
  134.                 {  
  135.                     ParameterName = "@Gender",  
  136.                     DbType = DbType.String,  
  137.                     Value = employee.Gender,  
  138.                 });  
  139.   
  140.                 cmd.Parameters.Add(new OracleParameter  
  141.                 {  
  142.                     ParameterName = "@Id",  
  143.                     DbType = DbType.String,  
  144.                     Value = employee.Id,  
  145.                 });  
  146.   
  147.                 await cmd.ExecuteNonQueryAsync();  
  148.             }  
  149.   
  150.         }  
  151.   
  152.         public async Task DeleteAsync(string id)  
  153.         {  
  154.             using (OracleConnection conn = GetConnection())  
  155.             {  
  156.                 conn.Open();  
  157.                 var commandText = @"DELETE FROM Employee Where Id=:Id";  
  158.   
  159.                 OracleCommand cmd = new OracleCommand(commandText, conn);  
  160.   
  161.                 cmd.Parameters.Add(new OracleParameter  
  162.                 {  
  163.                     ParameterName = "@Id",  
  164.                     DbType = DbType.String,  
  165.                     Value = id,  
  166.                 });  
  167.   
  168.                 await cmd.ExecuteNonQueryAsync();  
  169.             }  
  170.   
  171.         }  
  172.   
  173.         public async Task<Employee> FindOneAsync(string id)  
  174.         {  
  175.             using (OracleConnection conn = GetConnection())  
  176.             {  
  177.                 conn.Open();  
  178.                 var commandText = @"SELECT Name,Department,Designation,Gender FROM Employee Where Id=:Id";  
  179.                 OracleCommand cmd = new OracleCommand(commandText, conn);  
  180.                 cmd.Parameters.Add(new OracleParameter  
  181.                 {  
  182.                     ParameterName = "@Id",  
  183.                     DbType = DbType.String,  
  184.                     Value = id,  
  185.                 });  
  186.   
  187.                 using (var reader = cmd.ExecuteReader())  
  188.                 {  
  189.                     if (await reader.ReadAsync())  
  190.                     {  
  191.                         return new Employee()  
  192.                         {  
  193.                             Id = id,  
  194.                             Name = await reader.GetFieldValueAsync<string>(0),  
  195.                             Department = await reader.GetFieldValueAsync<string>(1),  
  196.                             Designation = await reader.GetFieldValueAsync<string>(2),  
  197.                             Gender = await reader.GetFieldValueAsync<string>(3),  
  198.                         };  
  199.                     }  
  200.                     else  
  201.                     {  
  202.                         return null;  
  203.                     }  
  204.   
  205.                 }  
  206.             }  
  207.         }  
  208.   
  209.     }  
  210. }  

We are using “Oracle.ManagedDataAccess.Clientclass from “Oracle.ManagedDataAccess.Core” library to establish connection and command in Oracle database.

We can inject this class from Startup class. We will provide the Oracle connection string in this class.

Startup.cs
  1. using BlazorOracle.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 BlazorOracle.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 = "Data Source = (DESCRIPTION = (ADDRESS = (PROTOCOL = TCP)(HOST = sarathlal.cah1w3njil8m.ap-south-1.rds.amazonaws.com)(PORT = 1521)) (CONNECT_DATA=(SID=ORCL)));User Id=sarath;Password=<your password>;";  
  27.             services.Add(new ServiceDescriptor(typeof(OracleDBContext), new OracleDBContext(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. }  

We can create our Web API Controller now.

 
Please copy below code and paste to this controller class.
 
EmployeesController.cs
  1. using BlazorOracle.Server.DataAccess;  
  2. using BlazorOracle.Shared.Models;  
  3. using Microsoft.AspNetCore.Mvc;  
  4. using System.Collections.Generic;  
  5. using System.Threading.Tasks;  
  6.   
  7. namespace BlazorOracle.Server.Controllers  
  8. {  
  9.     [Route("api/[controller]")]  
  10.     public class EmployeesController : Controller  
  11.     {  
  12.         [HttpGet]  
  13.         public async Task<IEnumerable<Employee>> GetAsync()  
  14.         {  
  15.             OracleDBContext context = HttpContext.RequestServices.GetService(typeof(OracleDBContext)) as OracleDBContext;  
  16.             return await context.GetAllAsync();  
  17.         }  
  18.   
  19.         [HttpGet("{id}")]  
  20.         public async Task<Employee> Get(string id)  
  21.         {  
  22.             OracleDBContext context = HttpContext.RequestServices.GetService(typeof(OracleDBContext)) as OracleDBContext;  
  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.                 OracleDBContext context = HttpContext.RequestServices.GetService(typeof(OracleDBContext)) as OracleDBContext;  
  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.                 OracleDBContext context = HttpContext.RequestServices.GetService(typeof(OracleDBContext)) as OracleDBContext;  
  42.                 await context.UpdateAsync(employee);  
  43.             }  
  44.         }  
  45.   
  46.         [HttpDelete("{id}")]  
  47.         public async Task Delete(string id)  
  48.         {  
  49.             OracleDBContext context = HttpContext.RequestServices.GetService(typeof(OracleDBContext)) as OracleDBContext;  
  50.             await context.DeleteAsync(id);  
  51.         }  
  52.     }  
  53. }  

We have added all CRUD actions in this controller class.

We can go to “Client” project and modify the “NavMenu.cshtml” Razor View. This Razor file is used to create menu bar.

NavMenu.cshtml
  1. <div class="top-row pl-4 navbar navbar-dark">  
  2.     <a class="navbar-brand" href="">Blazor Oracle 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 add a new Razor View now. We will use this file to list the employee details.

 
Please copy below code and paste to this Razor view file.

ListEmployees.cshtml

  1. @using BlazorOracle.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. }      

You can add three more Razor View files in the same way.

AddEmployee.cshtml

  1. @using BlazorOracle.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 BlazorOracle.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 BlazorOracle.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 successfully completed the coding part. We can run the application.

 
We can click the Employee Details link the in left menu and open Employee details page. Currently there are no Employee data available.
 
We can click the Create new employee link and add employee information and press “Save” button to save data.
 
 
We can add one more employee data. Now we have two employee records available.
 
 
We can modify one employee data by clicking “Edit” link
 
I have modified the employee designation. We can delete the employee data
 
 
It will show the selected employee information before deletion. You can confirm the deletion by clicking the “Delete” button.
We have seen all CRUD operations for Employee data with this application.
 
Conclusion

In this article we have created an Oracle database instance in AWS RDS (Relational Database Service) and we connected Oracle database using Oracle SQL Developer tool. We have created a Single Page Blazor application in Visual Studio 2017. We have connected Blazor with Oracle database using “Oracle.ManagedDataAccess.Client” library in “Oracle.ManagedDataAccess.Core” NuGet package. We have seen all the CRUD actions in Blazor application using Employee data.

We can see more Blazor features in upcoming articles.