* バリデーション - 日付（Datepicker） [#k431bf75]
** 実装例 [#eac7eaa0]
*** Controller [#y626b402]
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 [#s7640d4b]
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 [#h2a877c6]
public class FooEditModel
{
public string Message { get; set; }
public Foo Foo { get; set; }
}
*** Views\Home\Edit.cshtml [#w4e87a6a]
@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 [#t40764e0]
@model DateTime
@Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @class = "date" })
TextBox（IPUTタグ）にCSSクラスdateを指定する。
*** [#s6202051]
@model DateTime
@Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @class = "date" })
*** Views\Shared\_Layout.cshtml [#s3607d6f]
<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 [#fdf4873a]
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "yy-mm-dd" });
});
CSSクラスにdateが指定されている要素に対してjQueryUIのdatepicker()を指定する。
** 参考 [#xd01b303]
: 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
