バリデーション - 日付(Datepicker)

実装例

Controller

 namespace WebApplication1.Controllers
 {
     public class HomeController : Controller
     {
         [HttpGet]
         public ActionResult Edit()
         {
             FooEditModel model = new FooEditModel
             {
                 Foo = new Foo
                 {
                     Name = "Taro",
                     Date = new DateTime(2010,12,15)
                 }
             };
             return View(model);
         }
 
         [HttpPost]
         public ActionResult Edit(Foo foo)
         {
             string message = null;
             if (ModelState.IsValid)
             {
                 Debug.WriteLine(foo.Date.ToString());
                 message = "Saved " + DateTime.Now;
             }
 
             FooEditModel model = new FooEditModel
             {
                 Foo = foo,
                 Message = message
             };
             return View(model);
         }
     }
 }

コントローラでは特別な事はしない。

Entity

 public class Foo
  {
      public string Name { get; set; }
      [DataType(DataType.Date)]
      [DateRange("2010/12/01","2010/12/16")]
      public DateTime Date { get; set; }
  }

時間を切り捨てて日付のみを表示する為にDateType(DateType.Date)アノテーションを設定する。

ViewModel

  public class FooEditModel
  {
      public string Message { get; set; }
      public Foo Foo { get; set; }
  }

Views\Home\Edit.cshtml

 @Model.Message
 @using (Html.BeginForm()) {
    @Html.TextBoxFor(m => m.Foo.Name)
    @Html.EditorFor( m => m.Foo.Date, "Date")
    <input id="submit" name="submit" type="submit" value="Save" />
 }

EditorForで"Date"を指定して自作テンプレートを呼び出す。

Views\Home\EditorTemplate\Date.cshtml

 @model DateTime
 @Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @class = "date" })

TextBox(IPUTタグ)にCSSクラスdateを指定する。

 @model DateTime
 @Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @class = "date" })

Views\Shared\_Layout.cshtml

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/bootstrap")
     @RenderSection("scripts", required: false)
     <link href="~/Content/themes/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
     <script src="~/Scripts/jquery-ui-1.10.4.js"></script>
     <script src="~/Scripts/EditorHookup.js"></script>
 </head>
  • jQueryをインクルードするのを@Renderbodyより先にする。
  • さらにEditorHookup.jsをインクルードする。
  • jQuery UIのCSSはhttp://jqueryui.com/themeroller/からダウンロードして、COntent\themes以下に配置する。

Scripts\EditorHookup.js

 $(document).ready(function () {
    $('.date').datepicker({ dateFormat: "yy-mm-dd" });
 });

CSSクラスにdateが指定されている要素に対してjQueryUIのdatepicker()を指定する。

参考

ASP.NET MVC 3: Integrating with the jQuery UI date picker and adding a jQuery validate date range validator
http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx
Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
http://www.asp.net/mvc/tutorials/javascript/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4
ASP.NET MVC入門 第6回 テンプレート機能でビュー開発を効率化
http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_07/aspnetmvc3_07_01.html

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2014-02-09 (日) 05:23:08