c# - Razor Jquery UI 日期选择器不工作

Question

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

型号:

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

Controller :

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>

然后在“ View ”->“共享”中添加了一个 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 都会得到处理。