在MVC3中将jQuery添加到具有相同模型的表单

Question

I am trying to have two submission forms with similar functionality on the same view, where each form is strongly typed to the same model. I then am trying to add a datepicker to the same input on both forms, but I am unsure of how to do this. Here is my code:

@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>
}

Both of these forms are in their own strongly-typed partial views. I naturally tried simply adding the datepicker in jQuery to both partial views, like so:

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

But it unsurprisingly only worked for one of the inputs. I have been trying to use the HTML id that I added to both Ajax form declarations (eg editScheduleForm and addScheduleForm), but am unsure of how to do this. Any suggestions?

Solution: As scottm suggested, I looked through documentation for using a custom editor template. I read this, detailing functionality I didn't know existed: http://msdn.microsoft.com/en-us/library/ee407399.aspx

Here, you can specify a template, and then add a parameter for the htmlFieldName, which is specifically designed to circumvent the problem I was happening.

Answer 1

You can add a class to the inputs in your editor template. Then you can then use the class as the jQuery selector.

Add a file called DateTime.cshtml under ~/Views/Shared/EditorTemplates , and add the following:

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

Then add this jQuery to the page.

$(function () {
    $(".date").datepicker();
});

Answer 2

The ID must be unique in a document.

Never rely on multiple ids on a page working correctly. Matter of fact, despite what most examples in blogs do, you should hardly ever use ids as jquery selectors.

Like @scottm said. You should use classes to tag items which you want to be widget-ized.

Here's a simplistic bit of code so you can create jq ui widgets declaratively:

$(function() {

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

});

Then in your html

<input name=startTime data-usewidget=datepicker />