はじめに
前回の記事では、モデルを追加して、住所録アプリを完成させました。
しかし、表示される名称は、「ZipCode」や「State」など、モデルクラスで定義した変数名が表示されるため、実用的ではありません。
そこで今回は、これらの表示名を任意の名称が表示されるように編集していきます。
モデルの編集
前回作成したモデルクラスの振り返り
前回作成したモデルクラス 「AddressItem」 は、以下の通りです。
住所録に必要な、ZipCode, State, StreetAdress などのプロパティがあります。
using System.ComponentModel.DataAnnotations;
namespace AddressBookApp.Models
{
public class AddressItem
{
// Id（主キー用）
public int Id { get; set; }
// 郵便番号
public string? ZipCode { get; set; }
// 州（県）
public string? State { get; set; }
// 番地
public string? StreetAdress { get; set; }
// 名前
public string? FirstName { get; set; }
// 苗字
public string? LastName { get; set; }
// 電話番号
public string? PhoneNumber { get; set; }
// メールアドレス
public string? Email { get; set; }
}
}
実行するとわかりますが、一覧表示のヘッダー部分には、このプロパティ名が表示されています。
データ追加後の画面
任意の名称が表示されるように修正する
それでは、任意の名称が表示されるように修正をしてみましょう。
モデルクラス「AddressItem」を開いたら、以下のように編集します。
プロパティの前にDisplay属性を付けます。フォーマットは [Display(Name=”表示名”)] です。
using System.ComponentModel.DataAnnotations;
namespace AddressBookApp.Models
{
public class AddressItem
{
// Id（主キー用）
public int Id { get; set; }
// 郵便番号
[Display(Name ="住所録")]
public string? ZipCode { get; set; }
// 州（県）
[Display(Name = "都道府県")]
public string? State { get; set; }
// 番地
[Display(Name = "番地")]
public string? StreetAdress { get; set; }
// 名前
[Display(Name = "名前")]
public string? FirstName { get; set; }
// 苗字
[Display(Name = "苗字")]
public string? LastName { get; set; }
// 電話番号
[Display(Name = "電話番号")]
public string? PhoneNumber { get; set; }
// メールアドレス
[Display(Name = "メールアドレス")]
public string? Email { get; set; }
}
}
編集完了後に実行してみると、下図のようにヘッダーが指定した名称になっていることを確認できます。
任意の名称を表示する
一覧表示の Create New, Edit, Details, Delete, の表示名を変更する
一覧表示の左上にある Create New を任意の名称にするには、Views/AddressItems/Index.cshtml ファイルを編集します。
ファイルを開いたら、以下のように編集します。
@* 編集前 *@ <p> <a asp-action="Create">Create New</a> </p> @* 編集後 *@ <p> <a asp-action="Create">新規作成</a> </p>
同様にして、一覧表示の Edit, Details, Delete の表示名も変更してみましょう。
<a asp-action="Edit" asp-route-id="@item.Id">編集</a> | <a asp-action="Details" asp-route-id="@item.Id">詳細</a> | <a asp-action="Delete" asp-route-id="@item.Id">削除</a>
実行してみると、下図のように任意の表示名に変更されます。
表示名の変更
そのほかのページも編集する
新規作成ページの表示名を変更する
新規作成ページは、Views/AddressItems/Create.cshtml ファイルを編集します。
編集例を以下に示します。
<a asp-action="Edit" asp-route-id="@item.Id">編集</a> |
<a asp-action="Details" asp-route-id="@item.Id">詳細</a> |
<a asp-action="Delete" asp-route-id="@item.Id">削除</a>@model AddressBookApp.Models.AddressItem
@{
ViewData["Title"] = "新規住所登録";
}
<h1>新規住所登録</h1>
<hr />
<div class="row">
<div class="col-md-4">
:省略
</div>
</div>
<div>
<a asp-action="Index">一覧表示に戻る</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}じ
実行例を以下に示します。
新規作成ページ
編集ページの表示名を変更する
編集ページは、Views/AddressItems/Edit.cshtml ファイルを編集します。
編集例を以下に示します。
z@model AddressBookApp.Models.AddressItem
@{
ViewData["Title"] = "住所の編集";
}
<h1>住所の編集</h1>
<hr />
<div class="row">
<div class="col-md-4">
:省略
</div>
</div>
<div>
<a asp-action="Index">一覧表示に戻る</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
実行例を以下に示します。
編集ページ
詳細ページの表示名を変更する
編集ページは、Views/AddressItems/Details.cshtml ファイルを編集します。
編集例を以下に示します。
@model AddressBookApp.Models.AddressItem
@{
ViewData["Title"] = "住所詳細";
}
<h1>住所詳細</h1>
<div>
<h4>AddressItem</h4>
<hr />
<dl class="row">
:省略
</dl>
</div>
<div>
<a asp-action="Edit" asp-route-id="@Model?.Id">編集</a> |
<a asp-action="Index">一覧表示に戻る</a>
</div>
実行例を以下に示します。
詳細ページ
削除ページの表示名を変更する
編集ページは、Views/AddressItems/Delete.cshtml ファイルを編集します。
編集例を以下に示します。
@model AddressBookApp.Models.AddressItem
@{
ViewData["Title"] = "住所の削除";
}
<h1>住所の削除</h1>
<h3>このデータを削除してもよろしいですか？</h3>
<div>
<hr />
<dl class="row">
:省略
</dl>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
<input type="submit" value="削除" class="btn btn-danger" /> |
<a asp-action="Index">一覧表示に戻る</a>
</form>
</div>
実行例を以下に示します。
削除ページ
まとめ
今回は、任意の名称を表示する方法について説明をしました。
ぜひマスターして、自分好みの表示名に変更してみてください。
コメント