在同一个 Blazor 应用中结合 SQL-DB 和 MongoDB

介绍

传统上，在单应用程序中，我们对整个应用程序使用单个数据库服务器。但是，我将 SQL 数据库和 MongoDB 结合在同一个应用程序中。此应用程序将是 RDBMS 和 No SQL 数据库的组合。我们将从头开始创建一个 Blazor 应用程序，并使用数据迁移创建一个 SQL 数据库和一个表。我们将使用此 SQL DB 来保存员工数据。我们将使用 MongoDB 数据库来保存城市数据。我们可以一步一步地看到所有操作。

在 Visual Studio 中创建 Blazor 应用程序
我们可以使用 Blazor 服务器模板在 Visual Studio 中创建 Blazor 应用程序。

我们必须将以下库安装到我们的项目中。我们可以使用 NuGet 来安装这些库。

• “Microsoft.EntityFrameworkCore.SqlServer”
• “Microsoft.EntityFrameworkCore.Tools”
• “MongoDB.Driver”

我们可以在“Data”文件夹内创建一个具有以下属性的“Employee”类。

Employee.cs

namespace BlazorSQLAndMongoDB.Data
{
    public class Employee
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public string Designation { get; set; }
        public string Company { get; set; }
        public string City { get; set; }
    }
}

我们可以在Data文件夹内创建一个“SqlDbContext”类，用于实体框架相关的操作。

SqlDbContext.cs

using Microsoft.EntityFrameworkCore;
namespace BlazorSQLAndMongoDB.Data
{
    public class SqlDbContext : DbContext
    {
        public SqlDbContext(DbContextOptions<SqlDbContext> options)
           : base(options)
        {
        }
        public DbSet<Employee> Employees { get; set; }
    }
}

我们可以在“appsettings.json”中为 SQL 数据库创建一个连接字符串。

我们使用了本地 SQL 服务器，该服务器可通过 Visual Studio 创建数据库和表。您可以根据需要使用任何 SQL 服务器。

我们必须在 Startup 类中的“ConfigureServices”方法中注册 SqlDbContext 类。

使用实体框架和数据迁移创建 SQL 数据库和表

我们可以使用工具菜单中的 NuGet 包管理器控制台，并使用以下迁移命令来创建 SQL 数据库和表。

add-migration Initial

上述命令将在“Migrations”文件夹内创建一个以当前时间戳为后缀的迁移脚本类。

我们可以使用以下命令来创建数据库和表。

update-database

数据库和表将很快创建。

我们可以创建一个“IEmployeeService”接口并在接口内声明以下方法。

IEmployeeService.cs

using System.Collections.Generic;
using System.Threading.Tasks;
namespace BlazorSQLAndMongoDB.Data
{
    public interface IEmployeeService
    {
        Task<List<Employee>> GetEmployees();
        Task<bool> CreateEmployee(Employee employee);
        Task<bool> EditEmployee(string id, Employee employee);
        Task<Employee> SingleEmployee(string id);
        Task<bool> DeleteEmployee(string id);
    }
}

我们可以从另一个类“EmployeeService”的接口中实现上述方法

EmployeeService.cs

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BlazorSQLAndMongoDB.Data
{
    public class EmployeeService : IEmployeeService
    {
        private readonly SqlDbContext _dbContext;
        public EmployeeService(SqlDbContext dbContext)
        {
            _dbContext = dbContext;
        }
        public async Task<List<Employee>> GetEmployees()
        {
            return await _dbContext.Employees.ToListAsync();
        }
        public async Task<bool> CreateEmployee(Employee employee)
        {
            employee.Id = Guid.NewGuid().ToString();
            _dbContext.Add(employee);
            try
            {
                await _dbContext.SaveChangesAsync();
                return true;
            }
            catch (DbUpdateException)
            {
                return false;
            }
        }
        public async Task<Employee> SingleEmployee(string id)
        {
            return await _dbContext.Employees.FindAsync(id);
        }
        public async Task<bool> EditEmployee(string id, Employee employee)
        {
            if (id != employee.Id)
            {
                return false;
            }
            _dbContext.Entry(employee).State = EntityState.Modified;
            await _dbContext.SaveChangesAsync();
            return true;
        }
        public async Task<bool> DeleteEmployee(string id)
        {
            var employee = await _dbContext.Employees.FindAsync(id);
            if (employee == null)
            {
                return false;
            }
            _dbContext.Employees.Remove(employee);
            await _dbContext.SaveChangesAsync();
            return true;
        }
    }
}

我们在服务类中添加了所有 CRUD 操作的逻辑。请注意，您甚至可以在没有接口的情况下创建此服务。

我们可以创建一个具有以下属性的 City 类。City 数据将存储在 MongoDB 中。

City.cs

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;
namespace BlazorSQLAndMongoDB.Data
{
    public class City
    {
        [BsonId]
        [BsonRepresentation(BsonType.ObjectId)]
        public string Id { get; set; }
        public string Name { get; set; }
        public string State { get; set; }
    }
}

我们可以将 MongoDB 连接字符串、数据库名称和集合名称保存在 appsettings.json 文件中，而不是对值进行硬编码。

我们必须创建一个接口和类来从 appsettings.json 文件中读取值。

我们可以创建“IMongoDbSettings”接口并声明以下属性。

IMongoDbSettings.cs

namespace BlazorSQLAndMongoDB.Data
{
    public interface IMongoDbSettings
    {
        string CollectionName { get; set; }
        string ConnectionString { get; set; }
        string DatabaseName { get; set; }
    }
}

我们可以创建“MongoDbSettings”类并在类内部继承IMongoDbSettings接口。

MongoDbSettings.cs

namespace BlazorSQLAndMongoDB.Data
{
    public class MongoDbSettings : IMongoDbSettings
    {
        public string CollectionName { get; set; }
        public string ConnectionString { get; set; }
        public string DatabaseName { get; set; }
    }
}

我们可以在Startup类中的ConfigureServices类里面注册这个接口和类。

我们可以创建一个“ICityService”接口并在接口内声明以下方法。

ICityService.cs

using System.Collections.Generic;
using System.Threading.Tasks;
namespace BlazorSQLAndMongoDB.Data
{
    public interface ICityService
    {
        Task<List<City>> GetCities();
        Task<bool> CreateCity(City city);
        Task<bool> EditCity(string id, City city);
        Task<City> SingleCity(string id);
        Task<bool> DeleteCity(string id);
    }
}

我们可以从另一个类“CityService”的接口中实现上述方法

ICityService.cs

using MongoDB.Driver;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BlazorSQLAndMongoDB.Data
{
    public class CityService : ICityService
    {
        private readonly IMongoCollection<City> _cities;
        public CityService(IMongoDbSettings settings)
        {
            var client = new MongoClient(settings.ConnectionString);
            var database = client.GetDatabase(settings.DatabaseName);
            _cities = database.GetCollection<City>(settings.CollectionName);
        }
        public async Task<bool> CreateCity(City city)
        {
            try
            {
                await _cities.InsertOneAsync(city);
                return true;
            }
            catch
            {
                return false;
            }
        }
        public async Task<bool> DeleteCity(string id)
        {
            try
            {
                await _cities.DeleteOneAsync(city => city.Id == id);
                return true;
            }
            catch
            {
                return false;
            }
        }
        public async Task<bool> EditCity(string id, City city)
        {
            try
            {
                await _cities.ReplaceOneAsync(book => book.Id == id, city);
                return true;
            }
            catch
            {
                return false;
            }
        }
        public async Task<List<City>> GetCities()
        {
            try
            {
                return await _cities.Find(city => true).ToListAsync();
            }
            catch
            {
                return null;
            }
        }
        public async Task<City> SingleCity(string id)
        {
            try
            {
                return await _cities.Find<City>(city => city.Id == id).FirstOrDefaultAsync();
            }
            catch
            {
                return null;
            }
        }
    }
}

我们已经在上述类中注入了 IMongoDbSettings 接口，并从 appsettings.json 文件中获取了 MongoDB 配置值。

我们已经在上述服务类中添加了针对 City 实体的 CRUD 操作的所有逻辑。

我们可以在 Startup 类中注册 Employee 服务和 City 服务。

我们还可以在启动类中为 Blazor 服务器应用程序启用详细的电路错误。

配置服务（方法）

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddDbContext<SqlDbContext>(options =>
           options.UseSqlServer(Configuration.GetConnectionString("SqlDbContext")));
    services.Configure<MongoDbSettings>(Configuration.GetSection(nameof(MongoDbSettings)));
    services.AddSingleton<IMongoDbSettings>(sp => sp.GetRequiredService<IOptions<MongoDbSettings>>().Value);
    services.AddScoped<IEmployeeService, EmployeeService>();
    services.AddScoped<ICityService, CityService>();
    services.AddServerSideBlazor().AddCircuitOptions(o => o.DetailedErrors = true);
}

我们已经完成了 Blazor 应用程序的后端部分。我们可以在“Pages”文件夹中创建所有用于 CRUD 操作的 Razor 组件。

我们可以先为City创建组件。

ListCities.razor

@using BlazorSQLAndMongoDB.Data
@page "/listcities"
@inject ICityService CityService
<h2>City Details</h2>
<p>
    <a href="/addcity">Create New City</a>
</p>
@if (cities == null)
{
    <img src="./basicloader.gif" />
}
else
{
    <table class='table'>
        <thead>
            <tr>
                <th>Name</th>
                <th>State</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var city in cities)
            {
                <tr>
                    <td>@city.Name</td>
                    <td>@city.State</td>
                    <td>
                        <a href='/editcity/@city.Id'>Edit</a>
                        <a href='/deletecity/@city.Id'>Delete</a>
                    </td>
                </tr>

            }
        </tbody>
    </table>
}
@code {
    List<City> cities;

    protected override async Task OnInitializedAsync()
    {
        cities = await CityService.GetCities();
    }
}

AddCity.razor

@using BlazorSQLAndMongoDB.Data
@page "/addcity"
@inject NavigationManager NavigationManager
@inject ICityService CityService
<h2>Create City</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">Name</label>
                <input for="Name" class="form-control" @bind="@city.Name" />
            </div>
            <div class="form-group">
                <label for="State" class="control-label">State</label>
                <input for="State" class="form-control" @bind="@city.State" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="button" class="btn btn-primary" @onclick="@CreateCity" value="Save"/>
                <input type="button" class="btn" @onclick="@Cancel" value="Cancel" />
            </div>
        </div>
    </div>
</form>
@code {
    City city = new City();
    protected async Task CreateCity()
    {
        await CityService.CreateCity(city);
        NavigationManager.NavigateTo("listcities");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("listcities");
    }
}

EditCity.razor

@using BlazorSQLAndMongoDB.Data
@page "/editcity/{id}"
@inject NavigationManager NavigationManager
@inject ICityService CityService
<h2>Edit City</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">Name</label>
                <input for="Name" class="form-control" @bind="@city.Name" />
            </div>
            <div class="form-group">
                <label for="State" class="control-label">State</label>
                <input for="State" class="form-control" @bind="@city.State" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <input type="button" class="btn btn-primary" @onclick="@UpdateCity" value="Update" />
            <input type="button" class="btn" @onclick="@Cancel" value="Cancel" />
        </div>
    </div>
</form>
@code {
    [Parameter]
    public string id { get; set; }
    City city = new City();
    protected override async Task OnInitializedAsync()
    {
        city = await CityService.SingleCity(id);
    }
    protected async Task UpdateCity()
    {
        await CityService.EditCity(id, city);
        NavigationManager.NavigateTo("listcities");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("listcities");
    }
}

DeleteCity.razor

@using BlazorSQLAndMongoDB.Data
@page "/deletecity/{id}"
@inject NavigationManager NavigationManager
@inject ICityService CityService
<h2>Confirm Delete</h2>
<p>Are you sure you want to delete this City with Id: <b>@id</b></p>
<br />
<div class="col-md-4">
    <table class="table">
        <tr>
            <td>Name</td>
            <td>@city.Name</td>
        </tr>
        <tr>
            <td>State</td>
            <td>@city.State</td>
        </tr>
    </table>
    <div class="form-group">
        <input type="button" value="Delete" @onclick="@Delete" class="btn btn-primary" />
        <input type="button" value="Cancel" @onclick="@Cancel" class="btn" />
    </div>
</div>
@code {
    [Parameter]
    public string id { get; set; }
    City city = new City();
    protected override async Task OnInitializedAsync()
    {
        city = await CityService.SingleCity(id);
    }
    protected async Task Delete()
    {
        await CityService.DeleteCity(id);
        NavigationManager.NavigateTo("listcities");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("listcities");
    }
}

我们现在可以为员工创建组件。

ListEmployees.razor

@using BlazorSQLAndMongoDB.Data
@page "/listemployees"
@inject IEmployeeService EmployeeService
<h2>Employee Details</h2>
<p>
    <a href="/addemployee">Create New Employee</a>
</p>
@if (employees == null)
{
    <img src="./basicloader.gif" />
}
else
{
    <table class='table'>
        <thead>
            <tr>
                <th>Name</th>
                <th>Department</th>
                <th>Designation</th>
                <th>Company</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var employee in employees)
            {
                <tr>
                    <td>@employee.Name</td>
                    <td>@employee.Department</td>
                    <td>@employee.Designation</td>
                    <td>@employee.Company</td>
                    <td>@employee.City</td>
                    <td>
                        <a href='/editemployee/@employee.Id'>Edit</a>
                        <a href='/deleteemployee/@employee.Id'>Delete</a>
                    </td>
                </tr>

            }
        </tbody>
    </table>
}
@code {
    List<Employee> employees;

    protected override async Task OnInitializedAsync()
    {
        employees = await EmployeeService.GetEmployees();
    }
}

AddEmployee.razor

@using BlazorSQLAndMongoDB.Data
@page "/addemployee"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService
@inject ICityService CityService
<h2>Create Employee</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">Name</label>
                <input for="Name" class="form-control" @bind="@employee.Name" />
            </div>
            <div class="form-group">
                <label for="Department" class="control-label">Department</label>
                <input for="Department" class="form-control" @bind="@employee.Department" />
            </div>
            <div class="form-group">
                <label for="Designation" class="control-label">Designation</label>
                <input for="Designation" class="form-control" @bind="@employee.Designation" />
            </div>
            <div class="form-group">
                <label for="Company" class="control-label">Company</label>
                <input for="Company" class="form-control" @bind="@employee.Company" />
            </div>
            <div class="form-group">
                <label asp-for="City" class="control-label">City</label>
                <select asp-for="City" class="form-control" @bind="@employee.City">
                    <option value="">-- Select City --</option>
                    @foreach (var city in cities)
                    {
                        <option value="@city.Name">@city.Name</option>
                    }
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="button" class="btn btn-primary" @onclick="@CreateEmployee" value="Save" />
                <input type="button" class="btn" @onclick="@Cancel" value="Cancel" />
            </div>
        </div>
    </div>
</form>
@code {
    Employee employee = new Employee();
    List<City> cities = new List<City>();
    protected override async Task OnInitializedAsync()
    {
        cities = await CityService.GetCities();
    }
    protected async Task CreateEmployee()
    {
        await EmployeeService.CreateEmployee(employee);
        NavigationManager.NavigateTo("listemployees");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}

请注意，我已在上述组件中注入了城市服务和员工服务。城市组件用于从 MongoDB 获取城市名称，员工服务用于将所有员工数据保存在 SQL 数据库中。

EditEmployee.razor

@using BlazorSQLAndMongoDB.Data

@page "/editemployee/{id}"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService
@inject ICityService CityService
<h2>Edit Employee</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">Name</label>
                <input for="Name" class="form-control" @bind="@employee.Name" />
            </div>
            <div class="form-group">
                <label for="Department" class="control-label">Department</label>
                <input for="Department" class="form-control" @bind="@employee.Department" />
            </div>
            <div class="form-group">
                <label for="Designation" class="control-label">Designation</label>
                <input for="Designation" class="form-control" @bind="@employee.Designation" />
            </div>
            <div class="form-group">
                <label for="Company" class="control-label">Company</label>
                <input for="Company" class="form-control" @bind="@employee.Company" />
            </div>
            <div class="form-group">
                <label asp-for="City" class="control-label">City</label>
                <select asp-for="City" class="form-control" @bind="@employee.City">
                    <option value="">-- Select City --</option>
                    @foreach (var city in cities)
                    {
                        <option value="@city.Name">@city.Name</option>
                    }
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <input type="button" class="btn btn-primary" @onclick="@UpdateEmployee" value="Update" />
            <input type="button" class="btn" @onclick="@Cancel" value="Cancel" />
        </div>
    </div>
</form>

@code {
    [Parameter]
    public string id { get; set; }

    Employee employee = new Employee();
    List<City> cities = new List<City>();
    protected override async Task OnInitializedAsync()
    {
        cities = await CityService.GetCities();
        employee = await EmployeeService.SingleEmployee(id);
    }
    protected async Task UpdateEmployee()
    {
        await EmployeeService.EditEmployee(id, employee);
        NavigationManager.NavigateTo("listemployees");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}

该组件也被注入到City服务和Employee服务中。

DeleteEmployee.razor

@using BlazorSQLAndMongoDB.Data
@page "/deleteemployee/{id}"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService
<h2>Confirm Delete</h2>
<p>Are you sure you want to delete this Employee with Id: <b>@id</b></p>
<br />
<div class="col-md-4">
    <table class="table">
        <tr>
            <td>Name</td>
            <td>@employee.Name</td>
        </tr>
        <tr>
            <td>Department</td>
            <td>@employee.Department</td>
        </tr>
        <tr>
            <td>Designation</td>
            <td>@employee.Designation</td>
        </tr>
        <tr>
            <td>Company</td>
            <td>@employee.Company</td>
        </tr>
        <tr>
            <td>City</td>
            <td>@employee.City</td>
        </tr>
    </table>
    <div class="form-group">
        <input type="button" value="Delete" @onclick="@Delete" class="btn btn-primary" />
        <input type="button" value="Cancel" @onclick="@Cancel" class="btn" />
    </div>
</div>
@code {
    [Parameter]
    public string id { get; set; }
    Employee employee = new Employee();
    protected override async Task OnInitializedAsync()
    {
        employee = await EmployeeService.SingleEmployee(id);
    }
    protected async Task Delete()
    {
        await EmployeeService.DeleteEmployee(id);
        NavigationManager.NavigateTo("listemployees");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}

NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Blazor with SQL and Mongo</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="listcities">
                <span class="oi oi-plus" aria-hidden="true"></span> City details
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="listemployees">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Employee details
            </NavLink>
        </li>
    </ul>
</div>
@code {
    bool collapseNavMenu = true;
    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

我们已经删除了默认创建的计数器和天气数据的路由。

我们已经完成了整个编码部分。我们可以运行该应用程序了。请确保您的 MongoDB Windows 服务正在运行。

我们可以创建一个新的城市数据。

保存数据后，您可以使用 MongoDB 指南针软件检查 MongoDB 数据。

我们可以在那里看到新添加的城市数据。

我们现在可以创建新的员工数据。

我们可以再添加一个员工详细信息，并在网格中列出两个员工详细信息。

我们已成功通过申请添加了两个城市和两名员工。

结论

在这篇文章中，我们了解了如何在同一个 Blazor 应用程序中结合 SQL DB 和 MongoDB。我们已成功在单个应用程序中集成了 RDBMS 和 No SQL 功能。