asp.net-mvc-3 - MVC3 での JQuery 日付ピッカーの奇妙な動作

Question

MVC3 で JQuery 日付ピッカーを使用するための完全なソリューションを見つけることができませんでした。さまざまなページで見つけたものから、思い通りに機能しないソリューションを思いつきました。私は次のものを持っています：

モデル:

public class Some
{
    [Display(Name = "DateCreated", ResourceType = typeof(Resources))]
    [Required(ErrorMessageResourceType = typeof(Resources), ErrorMessageResourceName =      "RequiredField")]
    [DataType(DataType.Date, ErrorMessage = "Date non valid.")]
    [DisplayFormat(NullDisplayText = "NotSpecified", DataFormatString = "{0:dd.MM.yyyy.}")]
    public DateTime DateCreated { get; set; }
}

クライアントとサーバー側の検証とテキストが必要なため、プロパティを装飾しています。

この例では Home コントローラーを使用しています。

    public ActionResult Index()
    {
        Some model = new Some { DateCreated = DateTime.Now };

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(Some model)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("Index");
        }

        return View(model);
    } 

景色：

@model TestDatePicker.Models.Some

@using (Html.BeginForm())
{
  <div class="editor-label">
      @Html.LabelFor(model => model.DateCreated)
  </div>
  <div class="editor-field">
      @Html.EditorFor(model => model.DateCreated)
      @Html.ValidationMessageFor(model => model.DateCreated)
  </div>

  <p>
      <input type="submit" value="Save" />
  </p>
}

DateTime 型のフィールドをレンダリングするためのカスタム テンプレート:

@model Nullable<System.DateTime>

@{
    string controlName = ViewData.TemplateInfo.HtmlFieldPrefix;
    string controlId = controlName.Replace(".", "_");

    if ( Model.HasValue ) {
        @Html.TextBox("", String.Format("{0:dd.MM.yyyy.}", Model.Value), new { @class = "textbox", name = controlName })
    }
    else {
        @Html.TextBox("", String.Format("{0:dd.MM.yyyy.}", DateTime.Now), new { @class = "textbox", name = controlName })
    }
  }

}
<script type="text/javascript">
  $(document).ready(function () {

      $(".textbox").datepicker
           ({
              dateFormat: 'dd.mm.yy.',
              showStatus: true,
              showWeeks: true,
              highlightWeek: true,
              numberOfMonths: 1,
              showAnim: "scale",
              showOptions: {
                  origin: ["top", "left"]
              },
              onClose: function () {
                  $(this).valid();
              }
          });
  });
</script>

このコードで何が起こっていますか? DateTime フィールドの値はカスタム テンプレートで割り当てられ、今日の日付として表示されます。

1. ただし、[保存] ボタンをクリックすると、[HttpPost] Index メソッドで、渡されたモデルが今日の日付値を保持していないことがわかりますが、0001/1/1 12:00:00 AM?
2. 次に、Model.IsValid はメッセージThe value '26.05.2012.'と共に渡されません。作成日には無効です。??? 私にはさらに奇妙に思えます！
3. 上記のメッセージは、カスタム メッセージの代わりにページに表示されます: [DataType(DataType.Date, ErrorMessage = "Date non valid.")]

興味深いことに、datepicker を使用してそこからデータを選択すると、モデル内のプロパティが入力されます。Model.IsValid は TRUE です。

入力コントロールの html は次のようになります。

<input class="textbox" data-val="true" data-val-required="Requred field" id="DateCreated" name="DateCreated" type="text" value="26.05.2012." />

JQueryUI の日付ピッカーは、ASP.NET MVC の最適な選択ではありませんか? ネット全体で見られるカスタム テンプレートのこのソリューションでは、基本的な MVC も機能していないようです。これを行うための完全なチュートリアルを知っている人はいますか? こうした問題に直面するのは私が初めてではありません。

ありがとうございました。

MVC3 と datepicker について話すときに誰もが参照するブログ投稿で作成されたコードをダウンロードしましたが、そこでも同じことが起こっています!

Answer 1

テンプレートには、モデルと提供している日時の値を結び付けるものは何もありません。
フォームが送信されると、mvcはSomeオブジェクトにフォームの値を入力する方法を知る必要があります。これは、バインドされたプロパティ名をクライアント側の入力のID /名として使用するため、標準のエディターで機能します。カスタムエディターでこれを行わなかったため、フォームが送信されたときに、mvcがカスタムエディターに実際にDateCreatedプロパティを提供していることを通知する方法はありません。
名前/ID属性をエディターの基になる入力に追加して、これを機能させます（または、標準で提供されるエディターを使用し、ブラウザー/任意の種類のネットワークスニファーでurページのhtmlソースを調べて、正確にどのように動作するかを確認します作品）

編集：モデルで動作するコードの私の完全なバージョン：

  public class Some 
{ 
    [Display(Name = "DateCreated")]     
    [Required(ErrorMessage="failed")]    
    [DataType(DataType.Date, ErrorMessage = "Date non valid.")]    
    [DisplayFormat(NullDisplayText = "NotSpecified", DataFormatString = "{0:dd.MM.yyyy.}")]     
    public DateTime DateCreated { get; set; } } 

コントローラ：

    public class DefaultController : Controller
{
    public ActionResult Index()
    { 
        Some model = new Some { DateCreated = DateTime.Now }; 
        return View(model); 
    }
    [HttpPost]
    public ActionResult Index(Some model) 
    { 
        if (ModelState.IsValid)
        { 
            return RedirectToAction("Index"); 
        }
        return View(model); 
    } 

}

インデックスビュー：

@model Some  
@using (Html.BeginForm())
{   
      <div class="editor-label">     
        @Html.LabelFor(model => model.DateCreated)  
      </div>   
      <div class="editor-field">     
        @Html.EditorFor(model => model.DateCreated)  
        @Html.ValidationMessageFor(model => model.DateCreated)   
      </div>    
       <p>     
         <input type="submit" value="Save" />  
      </p> 
}

日付エディター：

@model Nullable<DateTime>
@{     
  string controlName = ViewData.TemplateInfo.HtmlFieldPrefix;     
  string controlId = controlName.Replace(".", "_");      
  if ( Model.HasValue )
  {        
      @Html.TextBox("", String.Format("{0:dd.MM.yyyy.}", Model.Value), 
       new {@class "textbox", name = controlName })     
  }     
  else
  {         
     @Html.TextBox("", String.Format("{0:dd.MM.yyyy.}", DateTime.Now), 
     new { @class = "textbox", name = controlName })    
  }  
} 

          <script type="text/javascript">
              $(document).ready(function () {
                  $(".textbox").datepicker({
                      dateFormat: 'dd.mm.yy.',
                      showStatus: true,
                      showWeeks: true,
                      highlightWeek: true,
                      numberOfMonths: 1,
                      showAnim: "scale",
                      showOptions: { origin: ["top", "left"] },
                      onClose: function () { $(this).valid(); } 
                  });
              }); 
               </script> 

含まれているスクリプト：

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
    type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"
    type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" 
    type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" 
    type="text/javascript"></script>

jquery datepickerがなくても、私の側では100％動作します。属性の使用法を少し変更しましたが、それらにリソースを提供しませんでした。私が理解している限り、このシナリオではDataType属性は役に立ちません。