Razor Jquery UI 日期选择器不工作

Question

我在 stackoverflow 上阅读了很多关于此的问题，尝试了一些示例，但仍然不知道为什么这不起作用。所以我问社区。

型号：

public class UploadModel
{
    public string PatientID { get; set; }
    public DateTime DrawDate { get; set; }
}

控制器：

public class FileManagementController : Controller
{

    [HttpGet]
    public ActionResult UpLoad()
    {
        ViewData["message"] = String.Empty;
        UploadModel model = new UploadModel
        {
            PatientID = String.Empty,
            DrawDate = DateTime.Now,
        };
        return View(model);
    }
    [HttpPost]
    public ActionResult Upload(UploadModel model, HttpPostedFileBase MyFile)
    {
        if (ModelState.IsValid)
        {
            //Do Validation and Save here

        }
        UploadModel newmodel = new UploadModel
        {
            PatientID = model.PatientID,
            DrawDate = model.DrawDate,
        };

        ViewData["message"] = "data submitted";

        return View(newmodel);
    }

查看：

<form action="" method="post" enctype="multipart/form-data" id="MyForm">
        @Html.EditorFor(m => m)
        <label for="MyDateTime">My Date Time:</label>
        <label for="MyFile">File:</label>
        <input type="file" name="MyFile" id="MyFile" /><br />
        <input id="submit" name="submit" type="submit" value="Save" />                       
    </form>

从那里，我在 _Layout.cshtml 页面中添加了以下代码（所有代码都正确映射）

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css" />
    <script src='@Href("~/Scripts/jquery-1.7.1.js")' type="text/javascript"  ></script>
    <script src='@Href("~/Scripts/jquery-ui-1.8.1.custom.min.js")'  type="text/javascript" ></script>
    <script type="text/javascript" src='@Href("~/Scripts/jquery.alphanumeric.pack.js")'></script>
    <script type="text/javascript" src='@Href("~/Scripts/jquery.watermark.min.js")'></script>

然后在 Views -> Shared 我添加了一个 EditorTemplates 文件夹并创建了一个 DateTime.cshtml 页面，该页面具有：

@model DateTime

@Html.TextBox("", Model.ToString("dd/MM/yyyy"), 
new { @class = "date" })


<script type="text/javascript" >
 $(document).ready(function () {
     //set the date picker
     var dtp = '@ViewData.TemplateInfo.GetFullHtmlFieldId("")';
     dtp = dtp.replace("[", "_");
     dtp = dtp.replace("]", "_");
     //window.alert($(dtp).attr("value"));
     var hid = ($(dtp).attr("type") == "hidden");
     if (!hid) {
         $(dtp).datepicker({
             showOn: 'button', buttonImage: '@Href("~/Content/images/calendar.gif")%>', buttonImageOnly: true
           , changeMonth: true, changeYear: true
           , dateFormat: 'dd M yy'//, numberOfMonths: 2
         });
     }

 });

</script>

这似乎是大多数教程的风格，但似乎不起作用。没有图标出现。在 Chrome 中，我得到了 html5 日历弹出窗口，但从来没有 jquery 一个。任何建议都将不胜感激。

Answer 1

选择器对我来说看起来不正确。你是代码：

var dtp = '@ViewData.TemplateInfo.GetFullHtmlFieldId("")';

会产生一个字符串：'my_id'，但你仍然需要告诉 jQuery 字符串是一个 ID，使用 # 符号，如下所示：

var dtp = '#@ViewData.TemplateInfo.GetFullHtmlFieldId("")';

附带说明一下，您真的要为模型中每个渲染的 DateTime 导出整个 Script 标签吗？对我来说似乎没有必要，但您可能已经考虑过这一点。我的建议是将您的 DateTime.cshtml 修改为：

@model DateTime

@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "date-picker" })

然后在您的页面或布局中的某个位置，例如：

<script type="text/javascript" >
 $(function () {
   $('.date-picker').datepicker({
             showOn: 'button', buttonImage: '@Href("~/Content/images/calendar.gif")%>', buttonImageOnly: true
           , changeMonth: true, changeYear: true
           , dateFormat: 'dd M yy'//, numberOfMonths: 2
   });
 });
</script>

这样，只渲染一个脚本，所有的 DateTime 都得到处理。

Answer 2

由于我是菜鸟，我无法发表评论（抱歉！），但我能给出的唯一建议是确保从 @Html.EditorFor(m => m) 派生的 html 正是您需要（此 html 因型号而异）。以下是有关此的更多信息：http://msdn.microsoft.com/en-us/library/ee402949(v=vs.98).aspx

另外，我注意到在 javascript 部分的末尾有一个 %>：“@Href("~/Content/images/calendar.gif")%>”，它看起来像一个错误。