YanoRyuichi.com/
Wiki
Blog
GitHub
Sandbox
開始行:
* バリデーション - 日付（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.D...
*** 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=...
}
EditorForで"Date"を指定して自作テンプレートを呼び出す。
*** Views\Home\EditorTemplate\Date.cshtml [#t40764e0]
@model DateTime
@Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @c...
TextBox（IPUTタグ）にCSSクラスdateを指定する。
*** [#s6202051]
@model DateTime
@Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @c...
*** Views\Shared\_Layout.cshtml [#s3607d6f]
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, i...
<title>@ViewBag.Title - マイ ASP.NET アプリケーショ...
@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-...
<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/からダ...
*** Scripts\EditorHookup.js [#fdf4873a]
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "yy-mm-dd" });
});
CSSクラスにdateが指定されている要素に対してjQueryUIのdate...
** 参考 [#xd01b303]
: ASP.NET MVC 3: Integrating with the jQuery UI date pick...
: Using the HTML5 and jQuery UI Datepicker Popup Calendar...
: ASP.NET MVC入門 第6回 テンプレート機能でビュー開発を効...
終了行:
* バリデーション - 日付（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.D...
*** 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=...
}
EditorForで"Date"を指定して自作テンプレートを呼び出す。
*** Views\Home\EditorTemplate\Date.cshtml [#t40764e0]
@model DateTime
@Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @c...
TextBox（IPUTタグ）にCSSクラスdateを指定する。
*** [#s6202051]
@model DateTime
@Html.TextBox("", Model.ToString("yyyy/MM/dd"), new { @c...
*** Views\Shared\_Layout.cshtml [#s3607d6f]
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, i...
<title>@ViewBag.Title - マイ ASP.NET アプリケーショ...
@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-...
<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/からダ...
*** Scripts\EditorHookup.js [#fdf4873a]
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "yy-mm-dd" });
});
CSSクラスにdateが指定されている要素に対してjQueryUIのdate...
** 参考 [#xd01b303]
: ASP.NET MVC 3: Integrating with the jQuery UI date pick...
: Using the HTML5 and jQuery UI Datepicker Popup Calendar...
: ASP.NET MVC入門 第6回 テンプレート機能でビュー開発を効...
ページ名:
