0

同じビューに同様の機能を持つ 2 つの送信フォームを作成しようとしています。各フォームは同じモデルに厳密に型指定されています。次に、両方のフォームで同じ入力に日付ピッカーを追加しようとしていますが、これを行う方法がわかりません。これが私のコードです：

@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 の日付ピッカーを追加するだけでした。

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

しかし、当然のことながら、入力の 1 つに対してしか機能しませんでした。両方の Ajax フォーム宣言 (editScheduleForm と addScheduleForm など) に追加した HTML ID を使用しようとしていますが、これを行う方法がわかりません。助言がありますか？

解決策: scottm が示唆したように、カスタム エディター テンプレートの使用に関するドキュメントを調べました。これを読んで、存在を知らなかった機能の詳細を説明しました： http://msdn.microsoft.com/en-us/library/ee407399.aspx

ここでは、テンプレートを指定してから、htmlFieldName のパラメーターを追加できます。これは、発生していた問題を回避するために特別に設計されています。

4

2 に答える 2

3

エディター テンプレートの入力にクラスを追加できます。次に、そのクラスを jQuery セレクターとして使用できます。

DateTime.cshtmlの下に というファイル~/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 に依存しないでください。実際のところ、ブログのほとんどの例が行っていることにもかかわらず、id を 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 に答える