ASP.NET Core-Razor編集フォーム

この章では、タグヘルパーについて引き続き説明します。また、アプリケーションに新しい機能を追加し、既存の従業員の詳細を編集できるようにします。最初に、HomeControllerの編集アクションに移動するリンクを各従業員の側に追加します。

@model HomePageViewModel
@{
   ViewBag.Title = "Home";
}
<h1>Welcome!</h1>

<table>
   @foreach (var employee in Model.Employees) {
      <tr>
         <td>@employee.Name</td>

         <td>
            <a asp-controller = "Home" asp-action = "Details"
               asp-routeid = "@employee.Id">Details</a>

            <a asp-controller = "Home" asp-action = "Edit"
               asp-routeid = "@employee.Id">Edit</a>

         </td>
      </tr>
   }
</table>

編集アクションはまだありませんが、編集できる従業員IDが必要です。したがって、まず Views→Home フォルダーを右クリックして、 Add→New Items を選択して、新しいビューを作成します。

ホームを表示

中央のペインで、MVCビューページを選択します。 Edit.cshtmlページを呼び出します。次に、追加ボタンをクリックします。

*Edit.cshtml* ファイルに次のコードを追加します。

@model Employee
@{
   ViewBag.Title = $"Edit {Model.Name}";
}
<h1>Edit @Model.Name</h1>

<form asp-action="Edit" method="post">
   <div>
      <label asp-for = "Name"></label>
      <input asp-for = "Name"/>
      <span asp-validation-for = "Name"></span>
   </div>

   <div>
      <input type = "submit" value = "Save"/>
   </div>
</form>

このページのタイトルについては、編集してから従業員名を指定することができます。

Edit の前のドル記号は、ランタイムがModel.Nameを従業員名のようなそのプロパティにある値で置き換えることを可能にします。
フォームタグ内では、asp-actionやasp-controllerなどのタグヘルパーを使用できます。ユーザーがこのフォームを送信すると、特定のコントローラーアクションに直接移動します。
この場合、同じコントローラーで編集アクションに移動し、このフォームのメソッドにはHttpPostを使用する必要があることを明示的に伝えます。
フォームのデフォルトのメソッドはGETであり、GET操作を使用して従業員を編集する必要はありません。
ラベルタグでは、これがモデルのNameプロパティのラベルであると言うasp-forタグヘルパーを使用しました。このタグヘルパーは、Html.For属性に正しい値を設定し、このラベルの内部テキストを設定して、従業員名などの必要なものを実際に表示することができます。

HomeControllerクラスに移動して、従業員を編集するフォームをユーザーに提供するビューを返す Edit アクションを追加します。次に、以下に示すように、HttpPostに応答する2番目のEditアクションが必要になります。

[HttpGet]
public IActionResult Edit(int id) {
   var context = new FirstAppDemoDbContext();
   SQLEmployeeData sqlData = new SQLEmployeeData(context);
   var model = sqlData.Get(id);

   if (model == null) {
      return RedirectToAction("Index");
   }
   return View(model);
}

まず、GETリクエストに応答する編集アクションが必要です。従業員IDが必要です。ここのコードは、Detailsアクションにあるコードに似ています。最初に、ユーザーが編集する従業員のデータを抽出します。また、従業員が実際に存在することを確認する必要があります。存在しない場合、ユーザーをインデックスビューにリダイレクトします。しかし、従業員が存在する場合、編集ビューをレンダリングします。

また、フォームが送信するHttpPostに応答する必要があります。

次のプログラムに示すように、HomeController.csファイルに新しいクラスを追加しましょう。

public class EmployeeEditViewModel {
   [Required, MaxLength(80)]
   public string Name { get; set; }
}

HttpPostに応答する編集アクションでは、Edit.cshtmlファイル内のフォームにあるアイテムのみをキャプチャするため、従業員自体ではなく、EmployeeEditViewModelを使用します。

以下は、編集アクションの実装です。

[HttpPost]
public IActionResult Edit(int id, EmployeeEditViewModel input) {
   var context = new FirstAppDemoDbContext();
   SQLEmployeeData sqlData = new SQLEmployeeData(context);
   var employee = sqlData.Get(id);

   if (employee != null && ModelState.IsValid) {
      employee.Name = input.Name;
      context.SaveChanges();
      return RedirectToAction("Details", new { id = employee.Id });
   }
   return View(employee);
}

編集フォームは、ルーティングルール（ /home/edit/1 など）に従って、URLにIDがあるURLから常に配信される必要があります。

フォームは常に同じURL/home/edit/1にポストバックします。
MVCフレームワークは、URLからそのIDを引き出して、パラメーターとして渡すことができます。
ModelStateが有効かどうかを常に確認する必要があります。また、データベースで更新操作を実行する前に、この従業員がデータベースに存在し、nullでないことを確認する必要があります。
いずれにも当てはまらない場合は、ビューを返し、ユーザーが再試行できるようにします。同時ユーザーを使用する実際のアプリケーションでは、従業員がnullである場合、従業員の詳細が誰かによって削除された可能性があります。
その従業員が存在しない場合は、従業員が存在しないことをユーザーに伝えます。
そうでない場合は、ModelStateを確認してください。 ModelStateが無効な場合、ビューを返します。これにより、編集を修正し、ModelStateを有効にすることができます。
入力ビューモデルからデータベースから取得した従業員に名前をコピーし、変更を保存します。 SaveChagnes（）メソッドは、これらのすべての変更をデータベースにフラッシュします。

以下は、HomeControllerの完全な実装です。

using Microsoft.AspNet.Mvc;

using FirstAppDemo.ViewModels;
using FirstAppDemo.Services;
using FirstAppDemo.Entities;
using FirstAppDemo.Models;

using System.Collections.Generic;
using System.Linq;
using System.ComponentModel.DataAnnotations;

namespace FirstAppDemo.Controllers {
   public class HomeController : Controller {
      public ViewResult Index() {
         var model = new HomePageViewModel();
         using (var context = new FirstAppDemoDbContext()) {
            SQLEmployeeData sqlData = new SQLEmployeeData(context);
            model.Employees = sqlData.GetAll();
         }
         return View(model);
      }
      public IActionResult Details(int id) {
         var context = new FirstAppDemoDbContext();
         SQLEmployeeData sqlData = new SQLEmployeeData(context);
         var model = sqlData.Get(id)

         if (model == null) {
            return RedirectToAction("Index");
         }
         return View(model);
      }
      [HttpGet]
      public IActionResult Edit(int id) {
         var context = new FirstAppDemoDbContext();
         SQLEmployeeData sqlData = new SQLEmployeeData(context);
         var model = sqlData.Get(id);

         if (model == null) {
            return RedirectToAction("Index");
         }
         return View(model);
      }
      [HttpPost]
      public IActionResult Edit(int id, EmployeeEditViewModel input) {
         var context = new FirstAppDemoDbContext();
         SQLEmployeeData sqlData = new SQLEmployeeData(context);
         var employee = sqlData.Get(id);

         if (employee != null && ModelState.IsValid) {
            employee.Name = input.Name;
            context.SaveChanges();
            return RedirectToAction("Details", new { id = employee.Id });
         }
         return View(employee);
      }
   }
   public class SQLEmployeeData {
      private FirstAppDemoDbContext _context { get; set; }
      public SQLEmployeeData(FirstAppDemoDbContext context) {
         _context = context;
      }
      public void Add(Employee emp) {
         _context.Add(emp);
         _context.SaveChanges();
      }
      public Employee Get(int ID) {
         return _context.Employees.FirstOrDefault(e => e.Id == ID);
      }
      public IEnumerable<Employee> GetAll() {
         return _context.Employees.ToList<Employee>();
      }
   }
   public class HomePageViewModel {
      public IEnumerable<Employee> Employees { get; set; }
   }
   public class EmployeeEditViewModel {
      [Required, MaxLength(80)]
      public string Name { get; set; }
   }
}

プログラムをコンパイルして、アプリケーションを実行しましょう。

プログラムのコンパイルと実行

編集リンクが利用可能になりました。 [編集]リンクをクリックして、ジョシュの詳細を編集します。

編集ジョシュ

名前をJosh Grobanに変更しましょう。

ジョシュ・グローバン

[保存]ボタンをクリックします。

保存ボタン

上記のスクリーンショットのように、名前がJosh Grobanに変更されていることがわかります。 [ホーム]リンクをクリックします。

名前が変更されました

ホームページに、更新された名前が表示されます。

Asp.net-core-razor-edit-form

ASP.NET Core-Razor編集フォーム