Razorページでページ内の一部を表示、非表示にする - ASP.NET Core

ASP.NET Core Webアプリケーションで Razorページを利用した場合に、ページ内の一部を表示、非表示にするコードを紹介します。

概要

ASP.NET アプリケーションでは、WebFormアプリケーションを利用し、Panelコントロールを利用してページ内の一部の要素の表示、非表示を切り替えることができました。実装の詳細はこちらの記事を山椒すいてください。
一方で、Razor Pageの場合、Panelコントロールはないため、ページ内の一部の要素の表示、非表示を切り替える場合は別の方法を用いる必要があります。
Razor Pageでページ内の要素の表示、非表示を切り替える場合は、Razor Pageにコードブロックを記述しif文を利用して表示を切り替えることができます。

プログラム例

コード

RazorPage を作成します。

ChangeVisible.cshtml

@page "{param1?}"
@model RazorPagesSectionHide.Pages.ChangeVisibleModel
@{
}
<html>
<haed>

</haed>
<body>
  <p>入力欄</p>

  @if (Model.Param1Value == 1) {
    <p>入力欄その1</p>
    <span>Text1:</span><input id="text1" type="text" />
  }
  @if (Model.Param1Value == 2) {
    <p>入力欄その2</p>
    <span>Text2:</span><input id="text2" type="text" />
  }
  @if (Model.Param1Value == 3) {
    <p>入力欄その3</p>
    <span>Text3:</span><input id="text3" type="text" />
  }

  </body>
</html>

ページモデルクラスを実装します。

ChangeVisible.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 RazorPagesSectionHide.Pages
{
  public class ChangeVisibleModel : PageModel
  {
    public int  Param1Value { get; set; }

    public void OnGet(string param1)
    {
      Param1Value = Convert.ToInt32(param1);
    }
  }
}

Startup.cs ファイルにRazorPagesのルーティング処理を記述します。

Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPagesSectionHide
{
  public class Startup
  {
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddRazorPages();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
      }

      app.UseRouting();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapRazorPages();
      });
    }
  }
}

解説

RazorPage

@page "{param1?}" により、RazorPageでパラメーターを受け取ることができる設定にします。パラメーター名の後ろに"?" があることでパラメーターが無い場合でも、Razor Pageにルーティングできます。

Razor Page内のif文により、ページモデルクラスのParam1Value の値に応じてif文内を実行します。 Param1Value が1の場合は、[入力欄その1]の項目が表示されます。同様に、Param1Value が2の場合は、[入力欄その2]の項目が、3の場合は[入力欄その3]の項目が表示されます。

  @if (Model.Param1Value == 1) {
    <p>入力欄その1</p>
    <span>Text1:</span><input id="text1" type="text" />
  }
  @if (Model.Param1Value == 2) {
    <p>入力欄その2</p>
    <span>Text2:</span><input id="text2" type="text" />
  }
  @if (Model.Param1Value == 3) {
    <p>入力欄その3</p>
    <span>Text3:</span><input id="text3" type="text" />
  }

ページモデルクラス

ページモデルクラスのOnGetメソッドでRazor Pageに渡されたパラメータの値を取得して、Param1Value プロパティに値をセットしています。

    public void OnGet(string param1)
    {
      Param1Value = Convert.ToInt32(param1);
    }

Starup.cs

Starup.cs ファイルではRazorPagesのルーティング処理を実装しています。詳細はこちらの記事を参照して下さい。

実行結果

プロジェクトを実行しWebブラウザで (アプリケーションルートURL)/ChangeVisible のURLを表示します。下図のページが表示されます。パラメーターが無いため、どのif文にも該当せず、画面にはテキストボックスは表示されません。

続いて、Webブラウザで (アプリケーションルートURL)/ChangeVisible/1 のURLを表示します。下図のページが表示されます。パラメーターの値が"1"のため、「入力欄その1」が表示されます。

(アプリケーションルートURL)/ChangeVisible/2 のURL場合は、「入力欄その2」が表示されます。

(アプリケーションルートURL)/ChangeVisible/3 のURL場合は、「入力欄その3」が表示されます。

Razorページでページ内の一部分の表示、非表示を切り替える処理を実装できました。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次