ASP.NET Core を開始する

このチュートリアルでは、.NET CLI を使用して、ASP.NET Core Blazor Web App を作成、実行、および変更する方法について説明します。 Blazor は、1 つのプログラミング モデルでサーバー側のレンダリングとクライアントの対話機能の両方をサポートする .NET フロントエンド Web フレームワークです。

次の方法について学習します。

Prerequisites

Obtain and install the latest .NET SDK at Download .NET.

認証要求の処理に使用する Blazor Web App

サンプル アプリに適した場所にコマンド シェルを開き、次のコマンドを使用して Blazor Web Appを作成します。 -o|--output オプションは、プロジェクトのフォルダーを作成し、プロジェクトにBlazorSample名前を付けます。

dotnet new blazor -o BlazorSample

アプリを実行する

次のコマンドを使用して、ディレクトリを BlazorSample フォルダーに変更します。

cd BlazorSample

dotnet watch コマンドは、アプリを実行し、既定のブラウザーを開いてアプリのランディング ページに移動します。

dotnet watch

アプリのサイドバー ナビゲーションを使用して、[カウンター] ページにアクセスし、 Click me ボタンを選択してカウンターをインクリメントできます。

アプリを変更する

[カウンター] ページが読み込まれた状態でブラウザーを開いたままにします。 dotnet watch コマンドを使用してアプリを実行すると、ブラウザーで変更を反映するためにアプリをリビルドしなくても、アプリのマークアップとコードに変更を加えることができます。

Counter Web ページをレンダリングする CounterRazor コンポーネントは、プロジェクトの Components/Pages/Counter.razor にあります。 Razor とは、開発者の生産性のために設計された、C# コードに HTML マークアップを結合するための構文です。

テキスト エディターで Counter.razor ファイルを開き、コンテンツをレンダリングし、コンポーネントのカウンター機能を機能させる興味深い行をいくつかメモします。

Components/Pages/Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

ファイルは、コンポーネントの相対パス (/counter) を示す行で始まります。

@page "/counter"

ページのタイトルは、 <PageTitle> タグによって設定されます。

<PageTitle>Counter</PageTitle>

H1 見出しが表示されます。

<h1>Counter</h1>

段落要素 (<p>) には現在のカウントが表示され、 currentCountという名前の変数に格納されます。

<p role="status">Current count: @currentCount</p>

ボタン (<button>) を使用すると、ユーザーはカウンターをインクリメントできます。これは、ボタンクリックが IncrementCount という名前の C# メソッドを実行したときに発生します。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code ブロックには、コンポーネントが実行する C# コードが含まれています。

• currentCountカウンター変数は、初期値が 0 で確立されます。
• IncrementCount メソッドが定義されています。 メソッド内のコードは、メソッドが呼び出されるたびに、 currentCount 変数を 1 ずつインクリメントします。

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

IncrementCount メソッドのカウンターの増分を変更してみましょう。

IncrementCountが呼び出されるたびにcurrentCountが 10 の値だけインクリメントされるように行変更します。

- currentCount++;
+ currentCount += 10;

ファイルを保存します。

ファイルを保存するとすぐに、 dotnet watch コマンドを使用したため、実行中のアプリが自動的に更新されます。 ブラウザーでアプリに戻り、[カウンター] ページで [ Click me ] ボタンを選択します。 カウンターが既存の値 1 から 11 の値にどのようにインクリメントされるかを確認します。 ボタンが選択されるたびに、値は 10 ずつインクリメントされます。

アプリをシャットダウンする

次の手順に従います。

• ブラウザー ウィンドウを閉じます。
• To shut down the app, press Ctrl+C in the command shell.

Congratulations! このチュートリアルは正常に完了しました。

Next steps

このチュートリアルでは、次の方法を学習しました。

このチュートリアルでは、.NET CLI を使用して ASP.NET Core Web アプリを作成および実行する方法について説明します。

Blazor チュートリアルについては、「ASP.NET Core Blazor チュートリアル」をご覧ください。

次の方法について学習します。

Prerequisites

Obtain and install the latest .NET SDK at Download .NET.

Razor Pages アプリを作成する

サンプル アプリに適した場所にコマンド シェルを開き、次のコマンドを使用して Razor Pages アプリを作成します。 -o|--output オプションは、プロジェクトのフォルダーを作成し、プロジェクトにRazorPagesSample名前を付けます。

dotnet new webapp -o RazorPagesSample

アプリを実行する

次のコマンドを使用して、ディレクトリを RazorPagesSample フォルダーに変更します。

cd RazorPagesSample

dotnet watch コマンドは、アプリを実行し、既定のブラウザーを開いてアプリのランディング ページに移動します。

dotnet watch

アプリを変更する

テキスト エディターで Pages/Index.cshtml ファイルを開きます。

"Welcome" 案内応答の行の後に、次の行を追加して、ローカル システムの日付と時刻を表示します。

<p>The time on the server is @DateTime.Now</p>

変更を保存します。

ファイルを保存するとすぐに、 dotnet watch コマンドを使用したため、実行中のアプリが自動的に更新されます。

ブラウザーでページを更新して結果を確認します。

アプリをシャットダウンする

アプリをシャットダウンするには:

• ブラウザー ウィンドウを閉じます。
• Press Ctrl+C in the command shell.

Congratulations! このチュートリアルは正常に完了しました。

Next steps

このチュートリアルでは、次の方法を学習しました。