0

我试图在同一个视图上有两个具有相似功能的提交表单，其中每个表单都被强输入到同一个模型。然后，我尝试将日期选择器添加到两个表单的相同输入中，但我不确定如何执行此操作。这是我的代码：

@using (@Ajax.BeginForm(...
                        new { id = "editScheduleForm" }))
{
    <div class="editor-label">
        @Html.LabelFor(model => model.StartTime)
    </div>
    <div class="editor-field">
        <input 
        @Html.EditorFor(model => model.StartTime)
        @Html.ValidationMessageFor(model => model.StartTime)
    </div>
}

...

@using (@Ajax.BeginForm(...
                        new { id = "addScheduleForm" }))
{
    <div class="editor-label">
        @Html.LabelFor(model => model.StartTime)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartTime)
        @Html.ValidationMessageFor(model => model.StartTime)
    </div>
}

这两种形式都在它们自己的强类型部分视图中。我自然地尝试简单地将 jQuery 中的 datepicker 添加到两个部分视图中，如下所示：

$(function () {
    $("#StartTime").datepicker();
});

但不出所料，它只适用于其中一种输入。我一直在尝试使用我添加到两个 Ajax 表单声明（例如 editScheduleForm 和 addScheduleForm）的 HTML id，但不确定如何执行此操作。有什么建议么？

解决方案： 正如 scottm 建议的那样，我查看了使用自定义编辑器模板的文档。我读了这个，详细介绍了我不知道存在的功能：http: //msdn.microsoft.com/en-us/library/ee407399.aspx

在这里，您可以指定一个模板，然后为 htmlFieldName 添加一个参数，这是专门为规避我正在发生的问题而设计的。

4

2 回答 2

3

您可以向编辑器模板中的输入添加一个类。然后，您可以使用该类作为 jQuery 选择器。

添加一个名为DateTime.cshtmlunder的文件~/Views/Shared/EditorTemplates，并添加以下内容：

@model DateTime
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "date" })

然后将此 jQuery 添加到页面中。

$(function () {
    $(".date").datepicker();
});
于 2012-07-23T16:28:22.843 回答
0

ID 在文档中必须是唯一的。

永远不要依赖页面上的多个 id 正常工作。事实上，尽管博客中的大多数示例都是这样做的，但您几乎不应该将 ids 用作 jquery 选择器。

就像@scottm 说的。您应该使用类来标记您想要小部件化的项目。

这是一段简单的代码，因此您可以以声明方式创建 jq ui 小部件：

$(function() {

  $('[data-usewidget]').each(function() {
    var $this = $(this), widget = $this.data('usewidget');
    $.fn[widget] && $this[widget]();
  });

});

然后在你的html中

<input name=startTime data-usewidget=datepicker />
于 2012-07-23T16:34:26.350 回答