1

我找不到在 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. 但是，单击 Save 按钮时，在 [HttpPost] Index 方法中，我看到传入的模型不包含今天的日期值，而是 1/1/0001 12:00:00 AM？
  2. 然后 Model.IsValid 不会传递消息The value '26.05.2012'。对创建日期无效。？？？对我来说似乎更陌生！
  3. 上面的消息显示在页面上，而不是我的自定义消息：[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." />

这是页面加载

这是在页面加载后单击保存时

这是结果，没有将我的自定义错误消息分配给模型

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

谢谢你。

我已经下载了每个人在谈论 MVC3 和 datepicker 时都提到的博客文章中创建的代码，并且那里正在发生同样的事情！

4

1 回答 1

2

您的模板中没有任何内容可以绑定您的模型和您提供的日期时间值。
提交表单时，mvc 需要知道如何用表单中的值填充 Some 对象。这适用于标准编辑器，因为它们使用绑定的属性名称作为客户端输入的 id/名称。您没有使用自定义编辑器执行此操作，因此在提交表单时，mvc 无法告诉您的自定义编辑器实际上提供了 DateCreated 属性。
将名称/id 属性添加到编辑器中的底层输入以使其工作（或使用标准提供的编辑器，并在浏览器/任何类型的网络嗅探器中查看您的页面的 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 属性在这种情况下是无用的。

于 2012-05-26T09:40:29.213 回答