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字段的值在自定义模板中指定，并显示为今天的日期。

但是，单击“保存”按钮时，在[HttpPost]索引方法中，我看到传入的模型不能保存今天的日期值，而是1/1/0001 12:00:00 AM？
然后，Model.IsValid没有传递消息 值'26 .05.2012。'对于创建的日期无效。 ???对我来说似乎更陌生！
以上消息显示在页面上而不是我的自定义消息： [DataType（DataType.Date，ErrorMessage =“Date non valid。”）]

有趣的是，如果您使用日期选择器并从中选择数据，则会获得填充模型中的属性。而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." />

This is on page load

This is when just clicking Save after page loads

This is the result, not taking my custom error message assigned to Model

JQueryUI日期选择器不是ASP.NET MVC的最佳选择吗？看来，我在网上看到的自定义模板的解决方案，基本的MVC东西甚至没有工作？有没有人知道有关这方面的任何完整教程？我不能成为第一个面临这些问题的人。

谢谢。

我已经下载了the blog post中创建的代码，每个人在谈论MVC3和datepicker时都会引用这些代码，并且那里发生了相同的事情！

Answer 1

您的模板中没有任何内容可以绑定您的模型和您提供的日期时间值。
提交表单时，mvc需要知道如何使用表单中的值填充Some对象。这适用于标准编辑器，因为它们使用绑定的propety名称作为客户端输入的id / name。您没有使用自定义编辑器执行此操作，因此当表单被提交时，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>

它在我身边100％工作，我们没有jquery datepicker。我稍微改变了属性的用法，并没有为它们提供资源。据我所知，顺便说一句，DataType属性在这种情况下是无用的。

MVC3中的JQuery datepicker奇怪行为

1 个答案: