Help us understand the problem. What is going on with this article?

.NET Core 3.1 SDKをMacにインストールして「Blazor WebAssembly App (3.2.0)」を試してみる。

インストーラーをダウンロード

下記URLより、SDKのインストーラーをダウンロード
https://dotnet.microsoft.com/download/dotnet-core/thank-you/sdk-3.1.300-macos-x64-installer

インストーラを実行

スクリーンショット 2020-06-07 2.08.11.png

「続ける」を押下

スクリーンショット 2020-06-07 2.08.24.png

「続ける」を押下

スクリーンショット 2020-06-07 2.08.34.png

「インストール」を押下

スクリーンショット 2020-06-07 2.09.09.png

待機

スクリーンショット 2020-06-07 2.09.22.png

「閉じる」を押下

dotnetコマンドの確認

/usr/local/share/dotnet/dotnet --version
3.1.300

パスを通す

.bash_profile を編集

vi ~/.bash_profile 

以下の内容を、.bash_profile に追加。

/usr/local/share/dotnet/

.bash_profile を読み込み直す。

source ~/.bash_profile

パスが通ったか確認

dotnet --version
3.1.300

ASP.NET Core Blazor WebAssembly のテンプレートプロジェクトをインストール

dotnet new --install Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0

ASP.NET Core Blazor WebAssemblyのプロジェクト作成

dotnet new blazorwasm -o example

結果

The template "Blazor WebAssembly App" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on /Users/mitsugi/example/example.csproj...
  復元対象のプロジェクトを決定しています...
  /Users/mitsugi/example/example.csproj を復元しました (2.97 sec)。

Restore succeeded.

作成したプロジェクトに移動

cd example

とりあえず、実行してみる。

dotnet run
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/mitsugi/example

localhost:5001 にアクセスしてみる

スクリーンショット 2020-06-07 2.30.17.png

プロジェクトをVisual Studio for Macで開いてみる。

スクリーンショット 2020-06-07 2.34.27.png

clickイベントでC#で書いたコードが動く。不思議な感じです。

スクリーンショット 2020-06-07 2.37.52.png

画面内での遷移はSPAと同じような動きで、HistoryAPIを使った作りと同じような動きになってます。

(※初回起動後、の画面遷移ではWEBへのアクセスはなかった。)

jsonファイルをダウンロードして一覧表示するサンプル

fetchdataというページでは、jsonファイルをwebから取得して、一覧表示していました。

スクリーンショット 2020-06-07 2.42.43.png

↓ダウンロードするjsonファイル
スクリーンショット 2020-06-07 2.42.47.png

ブラウザで表示した結果。

スクリーンショット 2020-06-07 2.42.54.png

参考

mitsugeek
自称:スポンジエンジニア。どんどん吸収しよう。
http://developer.hateblo.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした