[C#]Razorアプリケーションの作り方とは?プロジェクトの作成方法・アプリケーションの実行方法・プロパティの設定方法・Formの作成方法

公開日時:   更新日時:
[C#]Razorアプリケーションの作り方とは?プロジェクトの作成方法・アプリケーションの実行方法・プロパティの設定方法・Formの作成方法
基本情報技術者試験の試験対策はこちら>>

SE
Razorアプリケーションの作り方が知りたいです。

PM
Razorで効率的にアプリケーションの開発ができます。詳しく説明しますね。

[C#]Razorアプリケーションの作り方とは?


今回は、C#でのRazorアプリケーションの作り方について説明します。Razorとは、ASP.NET MVC 3から導入されているビュー・エンジンです。自動的に作成してくれる部分があるので、効率的にWebアプリケーションの開発が可能です。

ここでは、C#でのRazorプロジェクトの作成方法、アプリケーションの実行方法、プロパティの設定方法、Formの作成方法について紹介します。統合開発環境には、Microsoft Visual Studio Community 2019 Previewを使用します。

C#でのRazorページの作り方に興味のある方はぜひご覧ください。

プロジェクトの作成

C#でRazorのプロジェクトを作成します。まず、「ASP.NET Core Web アプリケーション」のプロジェクトを新規作成します。次に、新しいASP.NET Core Web アプリケーション画面で「Web アプリケーション」を選択して、作成ボタンをクリックします。

プロジェクトを生成すると、フォルダやファイルが自動生成されます。Pages\Index.cshtml.csは以下のようになっています。

Pages\Index.cshtmlは以下のようになっています。

C#でRazorのプロジェクトが作成できました。

アプリケーションの実行

C#でRazorアプリケーションの実行方法を紹介します。VisualStudioの実行ボタン「IIS Express」をクリックするとブラウザが起動します。

ブラウザには「Welcome」と表示されます。

プロパティの設定

C#でRazorページのプロパティ設定方法を紹介します。Pages\Index.cshtml.csを以下のように修正します。BindPropertyでプロパティをバインドします。

BindPropertyはPostメソッドに対してのみ使用可能ですが、「SupportsGet = true」を付与することで、Getメソッドでも利用できるようになります。

Pages\Index.cshtmlを以下のように修正します。@Model.Nameとすることで、Nameプロパティを参照できます。

実行すると、ブラウザに以下のように表示されます。

Nameプロパティが空なのでGuestが表示されました。ブラウザのURLに、Nameプロパティを指定してみます。

https://localhost:ポート番号?Name=Taro

Enterキーをクリックすると、画面が更新されて以下のように表示されます。

プロパティが受け渡せていることが分かります。

Formの作成

C#でRazorページにFormを作成する方法を紹介します。Pagesを右クリック→追加(D)→新しいフォルダ(D) でFormsを追加します。次にFormsを右クリック→追加(D)→RazorページでAddUser.cshtmlを追加します。

Pages\Forms\AddUser.cshtmlが自動生成されます。内容は以下のようになっています。

Pages\Forms\AddUser.cshtml.csの内容は以下のようになっています。

次にModelクラスを作成します。トップを右クリック→追加(D)→新しいフォルダ(D) でModelsを追加します。次に、Modelsを右クリック→追加(D)→クラス でUserModel.csを追加します。

Models\UserModel.csが自動生成されます。内容は以下のようになっています。

Models\UserModel.csを以下のように修正します。プロパティを2つ追加します。

Pages\Forms\AddUser.cshtml.csを以下のように修正します。Formを作成するので、OnPostメソッドを作成します。

Pages\Forms\AddUser.cshtmlを以下のように修正します。asp-forでプロパティを指定します。

Razorアプリを起動し、ブラウザから「https://localhost:ポート番号/Forms/AddUser」にアクセスします。nameとageを入力して「submit」ボタンをクリックしてください。ここではnameにJiro、ageに40を入力しました。
submitボタンをクリックするとIndexにリダイレクトされ、「Welcome Jiro」と表示されます。URLを確認すると、「https://localhost:ポート番号/?Name=Jiro」となっています。

SE
C#でのRazorアプリケーションの作り方がわかりました。

PM
C#でのRazorについての理解を深めて、実際にコードを書いてみましょう。

まとめ

いかがでしたでしょうか。C#でのRazorアプリケーションの作り方について説明しました。ここでは、プロジェクトの作成方法、アプリケーションの実行方法、プロパティの設定方法、Formの作成方法について紹介しました。

ぜひご自身でC#のRazorのソースコードを書いて、理解を深めてください。


FEnetへの登録は左下のチャットが便利です 経験者優遇! 最短10秒!

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags