Blazor Serverにて気象データをグラフ化するWebアプリを作成する: SQL Server 接続編

DIY

完成イメージ

Blazor Serverにて気象データをグラフ化するWebアプリを作成する f:id:cniya:20210728152036p:plain

前提

Step 1: Blazor Server新規プロジェクトの作成

  • Visual Studio 2019にて新規作成→プロジェクト→Blazor Serverアプリ→.NET 5.0
  • Ctrl+F5でアプリが起動することを確認する。

Step 2: SQL Server準備

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=Forecast;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {

Step 3: EF CoreインストールとモデルのMigration

  • Nugetパッケージの管理から下記インストール
  • Data\WeatherForecast.csに求めるテーブル構造にあわせてプロパティを追加する
    • 日付、最高気温、最低気温、平均気温、降水量、日照時間をフィールドとするテーブル構造にする
    [Table("WeatherForecast")]
    public class WeatherForecast
    {
        public int Id { get; set; }
        [DisplayName("日付")]
        public DateTime Date { get; set; }
        [DisplayName("最高気温")]
        public double HighestTemperature { get; set; }
        [DisplayName("最低気温")]
        public double LowestTemperature { get; set; }
        [DisplayName("平均気温")]
        public int Temperature { get; set; }
        [DisplayName("降水量")]
        public double Precipitation { get; set; }
        [DisplayName("日照時間")]
        public double DaylightHours { get; set; }
    }
  • Pages\Fetchdata.razor、Data\WeatherForecastService.csがコンパイルエラーにならないよう、一旦日付と平均気温のみ表示するよう修正する
  • Data\WeatherForecastDbContext.cs追加
    public class WeatherForecastDbContext : DbContext
    {
        public WeatherForecastDbContext(DbContextOptions<WeatherForecastDbContext> options)
            : base(options)
        {
        }
        public DbSet<WeatherForecast> WeatherForecast { get; set; }
    }
  • Startup.csのConfigureServicesでAddDbContext呼び出し追加。
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<WeatherForecastDbContext>(options =>
                            options.UseSqlServer(
                                Configuration.GetConnectionString("DefaultConnection"),
                                providerOptions => providerOptions.CommandTimeout(120)));
            services.AddRazorPages();
  • パッケージマネージャーコンソール起動
  • Add-Migration 成功後、Update-database実行。
PM> Add-Migration InitialCreate
Build started...
Build succeeded.
To undo this action, use Remove-Migration.
PM> Update-database
Build started...
Build succeeded.
Done.

Step 4: BlazorからSQL Serverデータを取得し表示する

  • Data\WeatherForecastService.csを修正。SQL Serverからデータを取得するメソッドを実装。
    public class WeatherForecastService
    {
        WeatherForecastDbContext _Context { get; }

        public WeatherForecastService(WeatherForecastDbContext context) =>
            _Context = context;

        public Task<List<WeatherForecast>> GetForecastAsync() =>
            _Context.WeatherForecast
                .OrderBy(x => x.Id)
                .ToListAsync();
    }
  • Pages\FetchData.razorでForecastService.GetForecastAsyncをパラメータ無しで呼び出すよう変更。あわせて戻り値をList<>型に変更する。
    private List<WeatherForecast> forecasts;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync();
    }
  • Startup.csのConfigureServicesメソッド内でAddSingletonを削除してAddScopedに変更。
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<WeatherForecastDbContext>(options =>
                            options.UseSqlServer(
                                Configuration.GetConnectionString("DefaultConnection"),
                                providerOptions => providerOptions.CommandTimeout(120)));
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddScoped<WeatherForecastService>();
        }
  • Ctrl+F5にてアプリを起動。FetchDataページの動作を確認する。

Step 5: テストデータを入れて動作確認する

  • 次のSQLにてテストデータをインサート
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/01' as date),10.7,3.7,6.9,0,6)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/02' as date),11.8,3,8.2,0,9.3)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/03' as date),13.5,6.6,10.3,0,5.9)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/04' as date),12.5,6.4,9.6,0,7.2)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/05' as date),10.3,5.3,7,0,4)
  • Ctrl+F5にてアプリを起動。FetchDataページの動作を確認する。

参考記事

blazor-master.com