【課題6-01】割り切れるかチェック

プロジェクトタイプ	ASP.NET Core Web アプリ(Model-View-Controller)
プロジェクト名	`Prac_6_01`
ソリューション名	`PIT6x`
ターゲットフレームワーク	.NET 8.0(長期的なサポート)
最上位レベルのステートメントを使用しない	使用する(チェックオフ)

今回の課題について

作業成果物とは別のソリューションとなるので注意すること！！
- 作業成果物とはソリューション名が異なる．
  - 作業成果物→PIT6
  - プログラミング課題→PIT6x
今回の課題はWebClassに提出場所があるのでそちらに提出すること．
- 今までの課題と異なり今回の課題はリアクションペーパーに記載するものではないことに注意せよ．
これらはすべて課題点として成績に算入される課題である．
- 加点要素ではなく 必須の課題である ことに注意せよ．

二つの整数X，Yを入力して，XがYで割り切れるかどうかを表示する Web アプリケーションを作成せよ． 画面の挙動については_をよく見て実装すること

注意

やりかたによらず 自分以外(他の学生，学外の協力者，生成AIなど)が作成したソースコードを自身の成果物として提出してはならない ．
- 違反が発覚した場合，その課題の評点と同じだけ成績から引くこととする．他の学生と回答を共有した場合は，元がどちらであるかに関わらず両者とも同じ処分とする． 課題は独力で取り組みむこと ．

全ての処理はデフォルトで作成されるHomeコントローラーで行う．各アクションの処理内容を_に示す¹．

Homeコントローラーのアクション

アクション	GET メソッドでアクセスした際の機能	POST メソッドでアクセスした際の機能
`Index`	CheckDividable アクションへのリンクを表示する．備考: ビューのテンプレートあり(後述)	(POSTでのアクセスはしない)
`CheckDividable`	フォームの表示備考1 :ビューのテンプレートあり(後述) 備考2 : 入力欄にはあらかじめ以下のように入力されている状態とすること．・数値1→`0` ・数値2→`0`	計算結果の表示．以下のフォーマットで表示すること． ■割り切れる場合「`結果: 数値1 は数値2 で割り切れます！`」 ■割り切れない場合「`結果: 数値1 は数値2 で割り切れません(余り余り )`」ここで`余り`は数値1を数値2で割った際の剰余である．備考1 : GETとビューは共通備考2 : 入力欄にはあらかじめ以下のように入力されている状態とすること．・数値1→以前に入力した値・数値2→以前に入力した値
`AccessError`	アクセスエラーの表示	(POSTでのアクセスはしない)

このアプリでは_に示す情報を取り扱う必要がある．このために _に示すクラスをもとにしたデータモデルを使用すること． 必要なデータアノテーションは自分で設定すること．

このアプリで扱う情報

項目名(表示名)	必須/任意	データ型	備考
数値1	必須	整数	0以上，上限なし(ヒント参照) ．
数値2	必須	整数	1以上，上限なし(ヒント参照) ．

データモデル

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
using System.ComponentModel.DataAnnotations;

namespace Prac_6_01.Models
{
    public class CalcData
    {
        public int X { get; set; } // 数値1

        public int Y { get; set; } // 数値2
    }
}

準備作業

プロジェクトを作成したら以下の準備作業を行こと

【作業Ⅰ】 作業対象：プロジェクトPrac_6_01
- 必要なパッケージをインストールする(後述)．
【作業Ⅱ】 作業対象：Views/Shared/_Layout.cshtml(ファイル)
- レイアウトページの簡易化(リスト4a-4-2)
【作業Ⅲ】 作業対象：wwwroot/css/site.css(ファイル)
- 必要なスタイル指定を追記する(後述)．
【作業Ⅳ】 作業対象：Homeコントローラー&ビュー
- AccessErrorアクションを作成する(参考:リスト4b-6-3)．
- ↑に対応するビューを作成する(参考:リスト4b-6-4)．
- Indexアクションのビューに追記する(後述)．
【作業Ⅴ】 作業対象：Program.cs(ファイル)
- 検証メッセージの日本語化(参考:リスト4a-7-1)
- アクセスエラーページの有効化(参考:リスト4b-5-5)

【作業Ⅰ】

NuGetを使って以下のパッケージを探してプロジェクトにインストールする．バージョンが選択可能な場合は「 最新の安定板 」を選択するのを忘れないようにしよう．

パッケージソース	パッケージ名	本校執筆時の安定版
knzw.tech	`KnzwTech.AspNetCore.ResourceBasedLocalization.ja`	6.0.1

【作業Ⅰ】 : 閉じる

【作業Ⅱ】

チュートリアル【T4a】を参考に以下のことを行う．

Views/Shared/_Layout.cshtml をリスト4a-4-2に示すように変更する．
↑の6行目の T4aをPrac_6_01 に変更し，サイトタイトルの部分を 【課題6-01】 に変更する．

【作業Ⅱ】 : 閉じる

【作業Ⅲ】

wwwroot/css/site.css の末尾に_を追記する．

wwwroot/css/site.cssの追記内容

1
body { padding : 1em; }

【作業Ⅲ】 : 閉じる

【作業Ⅳ】

チュートリアル【T4b】を参考に以下のことを行う．

Home コントローラーにリスト4b-6-3のアクションメソッド AccessError を追記する．
プロジェクト内の Views フォルダの Home フォルダに新規に AccessError という名前のビュー(.cshtmlファイル)を追加し，リスト4b-6-4の内容を書き込む
Views/Home/Index.cshtml を_の通りに書き換える．

Views/Home/Index.cshtmlの内容

1
2
3
4
5
@{
    ViewData["Title"] = "Home Page";
}

<a asp-action="CheckDividable">割り切れるかチェック</a>

【作業Ⅳ】 : 閉じる

【作業Ⅴ】

チュートリアル【T4b】を参考に Program.cs を_に示すように編集する．

Program.csの内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
using KnzwTech.AspNetCore.ResourceBasedLocalization;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews(opt => opt.EnableDefaultErrorMessagesFromResource());

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();

app.UseStatusCodePagesWithReExecute("/Home/AccessError/{0}");

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

【作業Ⅴ】 : 閉じる

各種テンプレート

いくつかのファイルに関しては以下のテンプレートを使用すること．

Views/Home/CheckDividable.cshtml

Views/Home/CheckDividable.cshtml は_を使用すること．

Views/Home/CheckDividable.cshtml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@model CalcData

@{
    ViewData["Title"] = "割り切れるかチェック";

    if (Model is null) throw new ArgumentNullException(nameof(Model));
}

@if (ViewData["result"] != null)
{
    <p>結果: @ViewData["result"]</p>
}

<form asp-action="CheckDividable" method="POST">
    <label asp-for="@Model.X"></label>:
    <input asp-for="@Model.X" />
    <span asp-validation-for="@Model.X"></span>
    <br />

    <label asp-for="@Model.Y"></label>:
    <input asp-for="@Model.Y" />
    <span asp-validation-for="@Model.Y"></span>
    <br />

    <input type="submit" value="チェック" />
</form>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

Views/Home/CheckDividable.cshtml : 閉じる

実行結果

正しく実装できた場合，実行結果は_のようになる (制作の都合上，動画ではプロジェクト名などが異なるが提出物では冒頭の指定を守ること)．

実行結果

ヒント

上限をなしにしたい場合は，上限の数値を正の無限大に設定すればよい．正の無限大はdouble.PositiveInfinityフィールドから得ることができる．
整数xが整数yで割り切れるかどうかは，剰余すなわちxをyで割ったときの余りを計算すれば調べることができる．
- xをyで割ったときの余りがゼロならば，整数xが整数yで割り切ることができると判定できる．
- 剰余の計算はC#では %演算子 で行うことができる．_は%演算子の使用構文である．
  - たとえば「5 % 3」のように書くと，その結果として5を3で割った余り，つまり2という数値が計算される．
  - 整数型の定数・変数・式1，整数型の定数・変数・式2は(書いてある通り)整数型の変数でもよい．
    - たとえば事前にint型の変数hogeが宣言されていたとすれば「hoge % 3」と書けば，変数hogeに入っている値を3で割った余りが計算される．
    - _は%演算子の使用例である．

%演算子の使用方法

整数型の定数・変数・式1 % 整数型の定数・変数・式2

%演算子の使用例

1
2
3
4
5
6
7
int hoge = /* 何らかの整数 */;

// 変数 hoge の値を 3 で割った余りを変数 ret に格納する．
int ret = hoge % 3; 

// 定数 10 を変数 hoge の値で割った余りを文字列に組み込む．
string foo = $"ほげほげ: { 10 % hoge }";

これら以外のアクションに関しては削除してもよいし，デフォルトのまま残してもよい． ↩︎

Last updated on 2024-06-10
Published on 2024-06-10