Make a database maintenance project in 10 minutes

[densen2014]

1.New project

New project b03sqlite

dotnet new blazorserver -o b03sqlite

Add project to solution：

dotnet sln add b03sqlite/b03sqlite.csproj

Use nuget.org to install BootstrapBlazor components, FreeSql sqlite library, fonts ..

dotnet add b03sqlite package BootstrapBlazor
dotnet add b03sqlite package BootstrapBlazor.FontAwesome
dotnet add b03sqlite package FreeSql.Provider.Sqlite
dotnet add b03sqlite package Densen.FreeSql.Extensions.BootstrapBlazor

[Optional] BootstrapBlazor.DataAcces.FreeSql or Densen.FreeSql.Extensions.BootstrapBlazor almost the same function

2.Style Sheets and Javascript References

Add theme stylesheet to Pages/_Layout.cshtml

Delete <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

and add two lines below

<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

Add Javascript reference to Pages/_Layout.cshtml

Add this line before <script src="_framework/blazor.server.js"></script>

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>

3.Added namespace reference to _Imports.razor

@using BootstrapBlazor.Components

4.Add BootstrapBlazorRoot component to App.razor

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</BootstrapBlazorRoot>

5.Add BootstrapBlazor service to Program.cs

Add after builder.Services.AddSingleton<WeatherForecastService>();

builder.Services.AddBootstrapBlazor();

6. Data service

Add FreeSql service to Program.cs
Add before builder.Services.AddBootstrapBlazor();

builder.Services.AddFreeSql(option =>
{
    //demo is Sqlite driver, FreeSql supports a variety of databases，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess
    option.UseConnectionString(FreeSql.DataType.Sqlite, "Data Source=test.db;")  //It can also be written to the configuration file
#if DEBUG
         //Development Environment: Automatically Synchronize Entities
         .UseAutoSyncStructure(true)
         .UseNoneCommandParameter(true)
         //Debug sql statement output
         .UseMonitorCommand(cmd => System.Console.WriteLine(cmd.CommandText))
#endif
    ;
});

[Optional] Data Source in configuration file appsettings.json :

  "ConnectionStrings": {
    "bb": "Data Source=test.db;"
  }

option.UseConnectionString(FreeSql.DataType.Sqlite, "Data Source=test.db;") changed to

option.UseConnectionString(FreeSql.DataType.Sqlite, builder.Configuration.GetConnectionString("bb"))

7. Data entity class

Add BootstrapBlazor and ORM features to Data/WeatherForecast.cs class file

full codes

using BootstrapBlazor.Components;
using FreeSql.DataAnnotations;
using System.ComponentModel;

namespace b03sqlite.Data;

[AutoGenerateClass(Searchable = true, Filterable = true, Sortable = true)] //BootstrapBlazor Automatic column creation features, searchable, filterable, sortable
public class WeatherForecast
{
    [Column(IsIdentity = true)] //FreeSql ORM features: auto-increment, the first name ID is automatically the primary key

    [DisplayName("ID")] //BootstrapBlazor uses DisplayName to render column names
    public int ID { get; set; }

    [DisplayName("Date")] 
    public DateTime Date { get; set; }

    public int TemperatureC { get; set; }

    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

    public string? Summary { get; set; }
}

8. Razor and codes

Add the Table component to the Index.razor file

Specify the data TItem as WeatherForecast, configure it to automatically create data columns, [optional] double-click to edit, [optional] display column selector

@using b03sqlite.Data

<Table TItem="WeatherForecast"
       IsPagination="true"
       IsStriped="true"
       IsBordered="true"
       AutoGenerateColumns="true"
       ShowSearch="true"
       ShowToolbar="true"
       ShowExtendButtons="true"
       DoubleClickToEdit=true
       ShowColumnList=true
       ShowCardView=true>
</Table>

Codes

@code{
    // Due to the use of FreeSql ORM data services, objects can be fetched directly
    [Inject] IFreeSql fsql { get; set; }

    //Initialize the database with data from the demo service
    [Inject] WeatherForecastService ForecastService { get; set; }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //the demo directly initializes some data for use
            var res = fsql.Select<WeatherForecast>().Count();
            if (res == 0)
            {
                var forecasts = (await ForecastService.GetForecastAsync(DateTime.Now)).ToList();
                fsql.Insert<WeatherForecast>().AppendData(forecasts).ExecuteAffrows();
            }
        }
    }
}

9. Run

Project source code

Github

[densen2014]

CV一条龙系列教程