Razor Pages でボタンクリックで処理を実行するシンプルなページを作成する
Razor Pages でボタンクリックで処理を実行するシンプルなページのコードを紹介します。
概要
Razor Pagesの動作を確認するため、ボタンのクリックで処理を実行する非常にシンプルなページを作成します。
プロジェクトの作成手順は
こちらの記事を参照して下さい。
プログラム
事前準備
ASP.NET Core Web アプリケーションを作成します。
コード
下記のコードを準備します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace SimpleButton
{
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();
});
}
}
}
ページのコード
@page "/Button"
@model SimpleButton.ButtonModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Button1</title>
</head>
<body>
<div>Button Demo</div>
<form method="post">
<input type="submit" value="Button1" />
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace SimpleButton
{
public class ButtonModel : PageModel
{
public IActionResult OnGet()
{
return Page();
}
public IActionResult OnPost()
{
return Redirect("/ButtonComplete");
}
}
}
@page "/ButtonComplete"
@model SimpleButton.ButtonResultModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ButtonResult</title>
</head>
<body>
<div>ボタンがクリックされました。</div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace SimpleButton
{
public class ButtonResultModel : PageModel
{
public void OnGet()
{
}
}
}
作成したファイルとソリューションエクスプローラーでの配置は下図となります。
解説
Startup.csはRazor Pagesのための記述をします。ConfigureServices メソッド内の
services.AddRazorPages();の追記や、Configureメソッド内の
app.UseRouting(); app.UseEndpoints(); の記述を追加します。
/Pages/Button.cshtml にはページにSubmitボタンを配置します。Postで送信するボタンになります。(今回は送信する情報はありませんが)
/Pages/Button.cshtml.cs にはボタンのPost時に対応する処理を記述します。OnPostメソッドでページに対するPOST処理の動作を実装できます。今回のコードでは下記のコードを記述しており、RedirectメソッドでURLのリダイレクトを実行します。
public IActionResult OnPost()
{
return Redirect("/ButtonComplete");
}
/Pages/ButtonResult.cshtml はボタンがクリックされたことを画面に表示するページです。メッセージのテキストをページに記載しています。ページモデルクラスにはなにも実装していません。
/Button ページを表示し、ボタンをクリックすると、ボタンがクリックされたことを示すメッセージが記述されている /ButtonComplete ページに遷移する動作になります。
実行結果
プロジェクトを実行します。Webブラウザで
(アプリケーションルートURL)/Button のURLにアクセスします。下図のページが表示されます。
ページの[Button1]をクリックします。下図の「ボタンがクリックされました」のページに切り替わります。
ボタンクリックに反応する、シンプルなRazor Pagesを作成できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
