Question

I want to create a Date, Time and DateTime EditorTemplate using MVC3 and Razor.

For now, let’s focus on the Time (I can fix the remaining templates later).

@model DateTime?

@using MyMvcApp.Properties

@Html.DropDownListFor(model => model.Value.Hour, new SelectList(new[] {"00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23" },
    Model.HasValue ? Model.Value.Hour.ToString("D2") : "00"), null, new { style = "width: auto; margin-left: 5px;" })
:
@{
    List<string> availableMinutes = new List<string>();
    for (int minute = 0; minute < 60; minute += 1)
    {
        availableMinutes.Add(minute.ToString("D2"));
    }

    @Html.DropDownListFor(model => model.Value.Minute, new SelectList(availableMinutes, Model.HasValue? Model.Value.Minute.ToString("D2") : "00"), null, new { style = "width: auto" });
}


<img alt="@Resources.SelectTime" src="../../../images/icon_clock_2.gif" style="margin-right: 5px" />

<input id="clearDate" type="button" value="@Resources.Clear" class="ui-state-default" />

The point is: how do I clear values of this editor template only? I can add a script that clears the values of the ID’s, but then all the editortemplates of the same type would be cleared.

So my question: how can I clear all the values (hour and minute) of this template only when the clearDate button is clicked?

Thanks in advance!

Answer 1

You could wrap the entire template in a div container and simply walk the DOM with jQuery in context to the clearDate button. I’m doing this from memory, but it would be something like:

$(this).parent().children().contents().find("#hourElement").val("");