Razor によるフォーム作成の簡素化とその仕組み

Razor で強い型付けを行なったページを作ることによって、ページに関連付けされたモデルオブジェクトの表示が簡単に行なえることは既に説明しました。

ここでは、フォームの作成も大幅に簡略化されることを見ていきましょう。

既に入力されている情報を表示するだけではなく、ユーザーからの入力を受け取るのにも Razor はとても便利です。

しかしながら、確かに Razor はとても簡単に使えるビューエンジンと言えると思いますが、 C# の言語のバージョンアップに伴い、ちょっとわかりにくい箇所が出てきています。

「わかりにくい」程でなくても、理解するために基礎知識がたくさん要求されるのは事実でしょう。

簡単な例を用いて、実際に動作確認しながら説明します。

簡単な入力フォームの作成

まずは、ASP.NET MVC プロジェクトを作成してください。そして Models フォルダに次のモデル (Employee クラス) を作成します。

namespace mvc1.Models {
  public class Employee {
    public string FirstName { get; set; }
    public string LastName { get; set; }
  }
}

そして Controllers フォルダに EmployeeController.cs を作成します。

using mvc1.Models;
using System.Web.Mvc;

namespace mvc1.Controllers {
  public class EmployeeController : Controller {
    public ActionResult Index() {
      return View();
    }

    [HttpPost]
    public ActionResult Index(Employee emp) {
      return View(emp);
    }
  }
}

[HttpPost] 属性を指定したほうの Index メソッドが、フォームの POST 後に呼び出されます。

ビューは Views/Employee/Index.cshtml として、次を記述します。

@model mvc1.Models.Employee
<!DOCTYPE html>
<html>
<body>
@using (Html.BeginForm()) {
<table>
  <tr>
    <td>First name:</td>
    <td>@Html.TextBoxFor(a=>a.FirstName)</td>
  </tr>
  <tr>
    <td>Last name:</td>
    <td>@Html.TextBoxFor(a=>a.LastName)</td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="submit" value="OK" />
    </td>
  </tr>
</table>
}        
</body>
</html>