More than 3 years have passed since last update.

【第1章】C# + .NET 5.0 + Blazor WebAssemblyで簡単SPA開発【プロジェクトの作成と動作確認】

Last updated at 2021-10-03Posted at 2021-09-29

はじめに

AngularなどのSPAアプリケーションの作成が面倒だったが、BlazorでSPAが実装できると聞いてお試しメモ書きついでの手順化
TypeScriptやJavascriptを使わずに、C#とHTMLとCSSだけでレッツSPA!!!
最終目標は本番環境(Azure)での動作を目指して構築していきます。

今章ではプロジェクトの作成とSQLとの接続、動作確認まで実施します。
第1章完了時のソースコード一式はこちら
https://github.com/enngawa/BlazorLerning/tree/第1章

全体目次

第1章プロジェクトの作成と動作確認 <= この章はここ
第2章 SyncfusionBlazor(UIコンポーネント)の導入
第3章画面の新規作成
第4章 SQLとの連動(Entity Framework経由でのCRUD)(予定)
以降検討中・・・

この章でやること

開発環境の確認
プロジェクトの新規作成
Azure SQL Serverへの接続設定
動作確認

使用する言語

C#
HTML
CSS

1. 開発環境の確認

今回使用するツール

VisualStudio 2019 Community
Microsoft Azure SQL Server (ローカルで開発する場合は SQL Server Express)

次回以降使用する予定のツール

Microsoft Azure WebApps

必要に応じて使うツール

Microsoft SQL Management Studio(通称:SSMS)

環境構築は説明しません。環境がセットアップされている前提で話を行います。
Visual Studioは必ず最新のバージョンにアップデートしてください。

【参考】私のVisualStudioのワークロード設定

2. プロジェクトの新規作成

新しいプロジェクトから、【Blazor WebAssembly アプリ】を選択し「次へ」をクリック。

プロジェクト名を設定して次へ
※ここでは「BlazorLearning」と設定。

以下の設定をして「作成」をクリック

ターゲットフレームワークを「.NET 5.0」
認証の種類を「個別のアカウント」
「HTTPS用の構成」にチェック
「ASP.NET Coreでホストされた」にチェック

3. Azure SQL Serverへの接続設定

Azureで開発できない、ローカルで実行したい人はこの頁はスキップして次の頁へ移動してください。
この頁を始める方は、事前にAzure SQL Serverで空のDBを作成し、サーバーファイヤーウォールの設定を実施してください。

作成された3つのプロジェクトから、「****(プロジェクト名).Server」直下の「appsettings.json」を開く

DefaultConnection項目の接続文字列をAzure SQL DBの接続先に書き換える。

 "ConnectionStrings": {
    "DefaultConnection": "data source=サーバー名.database.windows.net;initial catalog=データベース名;user id=ユーザID;password=パスワード;MultipleActiveResultSets=true;"
  }