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

C#
プログラミング言語

公開日時: 2021-09-24 　更新日時: 2022-06-01

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

この記事でわかること

システム エンジニア: Razorアプリケーションの作り方が知りたいです。

プロジェクト マネージャー: 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は以下のようになっています。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;

namespace RazorApplication1.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {

        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using Microsoft.Extensions.Logging;

namespace RazorApplication1.Pages

{

public class IndexModel : PageModel

{

private readonly ILogger<IndexModel> _logger;

public IndexModel(ILogger<IndexModel> logger)

{

_logger = logger;

}

public void OnGet()

{

}

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

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@page

@model IndexModel

ViewData["Title"] = "Home page";

}

<h1 class="display-4">Welcome</h1>

<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

</div>

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

アプリケーションの実行

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

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

プロパティの設定

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

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

public class IndexModel : PageModel
{
    // プロパティをバインド。Getでも使用可能にする
    [BindProperty(SupportsGet = true)]
    public string Name { get; set; }

    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    public void OnGet()
    {
        // Nameプロパティが空の場合は「Guest」を設定
        if (string.IsNullOrWhiteSpace(Name))
        {
            Name = "Guest";
        }

    }
}

public class IndexModel : PageModel

{

// プロパティをバインド。Getでも使用可能にする

[BindProperty(SupportsGet = true)]

public string Name { get; set; }

private readonly ILogger<IndexModel> _logger;

public IndexModel(ILogger<IndexModel> logger)

{

_logger = logger;

}

public void OnGet()

{

// Nameプロパティが空の場合は「Guest」を設定

if (string.IsNullOrWhiteSpace(Name))

{

Name = "Guest";

}

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

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome @Model.Name</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@page

@model IndexModel

ViewData["Title"] = "Home page";

}

<h1 class="display-4">Welcome @Model.Name</h1>

<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

</div>

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

Welcome Guest

1	Welcome Guest

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

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

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

Welcome Taro

1	Welcome Taro

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

Formの作成

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

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

@page
@model RazorApplication1.Pages.Forms.AddUserModel
@{
}

@page

@model RazorApplication1.Pages.Forms.AddUserModel

}

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorApplication1.Pages.Forms
{
    public class AddUserModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorApplication1.Pages.Forms

{

public class AddUserModel : PageModel

{

public void OnGet()

{

}

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

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorApplication1.Models
{
    public class UserModel
    {
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace RazorApplication1.Models

{

public class UserModel

{

}

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorApplication1.Models
{
    public class UserModel
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace RazorApplication1.Models

{

public class UserModel

{

public string Name { get; set; }

public int Age { get; set; }

}

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

public class AddUserModel : PageModel
{
    [BindProperty]
    public Models.UserModel user { get; set; }

    public void OnGet()
    {
    }

    public IActionResult OnPost()
    {
        if(ModelState.IsValid == false)
        {
            return Page();
        }
        // Indexページにリダイレクトする。その際、user.Nameをプロパティに設定
        return RedirectToPage("/Index", new { user.Name });
    }
}

public class AddUserModel : PageModel

{

[BindProperty]

public Models.UserModel user { get; set; }

public void OnGet()

{

}

public IActionResult OnPost()

{

if(ModelState.IsValid == false)

{

return Page();

}

// Indexページにリダイレクトする。その際、user.Nameをプロパティに設定

return RedirectToPage("/Index", new { user.Name });

}

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

@page
@model RazorApplication1.Pages.Forms.AddUserModel
@{
}

<form method="post">
    <input type="text" asp-for="user.Name" placeholder="name" />
    <input type="text" asp-for="user.Age" placeholder="age" />
    <button type="submit">SUbmit</button>
</form>

@page

@model RazorApplication1.Pages.Forms.AddUserModel

}

<button type="submit">SUbmit</button>

</form>

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

システム エンジニア: C#でのRazorアプリケーションの作り方がわかりました。

プロジェクト マネージャー: C#でのRazorについての理解を深めて、実際にコードを書いてみましょう。

まとめ

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

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

プロジェクトの作成

アプリケーションの実行

プロパティの設定

Formの作成

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

C＃新着案件New Job

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

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

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

プロジェクトの作成

アプリケーションの実行

プロパティの設定

Formの作成

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

C＃新着案件New Job

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

関連記事Related Posts

C#の比較演算子とは？使い方をご紹介！

C#でのマウス座標について詳しく解説していきます！

C#を使ったトグルボタンの作成方法について詳しく解説！

静的型付け言語について｜使用方法からメリットとデメリットについても解説

decimalの使い方とは？様々な言語でのdecimalの使い方を紹介！