Как динамически изменить значение метки в MVC 3?

Question

Я разрабатываю проект в MVC 3 (CRUD) ... Я хочу создать резервирование для теннисного корта ...

Страница:

Итак, когда я набираю «Время начала» («heure de début» по-французски), я хочу увеличить «FinishTime» на красный («heure de fin»"по-французски) динамически ... Если это простое увеличение совпадения на 1:00, а если нет, то на 2:00 ...

Я новичок в MvC3, поэтому я понятия не имею, как это сделать... Конечно, я не прошу, чтобы вы делали мою работу, но правильный способ сделать это и, если возможно, пример ...

Просмотр:

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Reservation</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Date)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Date)
        @Html.ValidationMessageFor(model => model.Date)
    </div>

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


    <div class="editor-label">
        @Html.LabelFor(model => model.Simple)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Simple)
        @Html.ValidationMessageFor(model => model.Simple)
    </div>


    <div class="editor-label">
        @Html.LabelFor(model => model.FinishTime)
    </div>
    <div class="editor-fieldFinishTime">
        @Html.DisplayFor(model => model.FinishTime)
        @Html.ValidationMessageFor(model => model.FinishTime)
    </div>

    <div class="editor-label">
         @Html.LabelFor(model => model.Customer.Name)
    </div>
    <div class="editor-field">
         @Html.EditorFor(model => model.Customer.Name)
        @Html.ValidationMessageFor(model => model.Customer.Name)
    </div>


    <div class="editor-label">
        @Html.Label("Terrain N°")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(c=>c.TennisCourtID,ViewBag.TennisCourtID as SelectList)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

Я забыл уточнить, что у всех клубов может быть разное расписание ... Например:

Клуб 1: Простой: 1:00 Двухместный: 2:00

Club2: Простой: 1:30 Двухместный: 2:30

Так в моей базе данныхУ меня есть атрибут SimpleGameTime и DoubleGameTime ... Извините: (

Answer 1

Привязка к событию change Input для времени начала (проверьте его идентификатор в отображаемом HTML):

$("input#TheId").bind("onchange", onStartTimeChanged);

Определение функции для анализа времени, см. в этом посте здесь, на SO.

В функции onStartTimeChanged получите состояние флажка (обновите с помощью правильного селектора jQuery для элемента управления):

var checked = $('input[type=checkbox]').is(':checked');

Затем просто добавьте проанализированную датус правильным смещением и запишите его обратно в элемент управления End Time, используя toLocaleTimeString().

Примечание: Я предполагал, что вы будете использовать JavaScript для выполнения вычислений на стороне клиента.Если вы предпочитаете делать все на стороне сервера, вам нужно добавить в контроллер метод с поддержкой AJAX с указанием времени запуска и флажка в качестве параметров.В вашей функции onStartTimeChanged вы должны вызывать ее и асинхронно обновлять время окончания при возврате функции.Если есть много логики (или это не тривиально), я предпочитаю серверное решение с AJAX.

Например (я не проверял код, поэтому использую его cum grano salis), чтобы вызвать сервер-метод side с POST (вы должны передать параметры, в качестве альтернативы вы можете использовать getJson только с GET, но вам нужно работать с маршрутизацией):

function ComputeEndTime(matchStartTime, isSimpleMatch) {
   var url = '<%= Url.Action("ControllerName", "ComputeEndTime") %>';
   $.post(url, { startTime: matchStartTime, isSimple: isSimpleMatch },
      function(data) {
         return data.endTime;
      }
   );
}

И ваша функция на стороне сервера:

[AcceptPost]
public ActionResult ComputeEndTime(string startTime, bool isSimple)
{
   // Perform your calculations then convert to string
   string calculatedEndTime = "";

   return Json(new { endTime = calculatedEndTime });
}