How to change dynamically the value of a label in MVC 3?

Question

I'm developing a project in MVC 3 (CRUD)... I want to create a reservation for a tennis court...

Page:

So, when I type a "Start time" ("heure de début" in French) I want to increase the "FinishTime" in red ("heure de fin" in French) dynamically... If it's a simple match increase by 1:00 and if not by 2:00...

I'm beginner in MvC3 so I have no idea how to do that... Of course, I'm not request that you make my work but the right method to do that and if it's possible an example...

View:

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

I've forget to precise that all clubs can have different schedule... For example:

Club 1: Simple: 1:00 Double: 2:00

Club2: Simple: 1:30 Double: 2:30

So in my database's table TennisClub I have an attribute SimpleGameTime and DoubleGameTime... Sorry :(

Answer 1

Bind to the change event of the Input for Start time (check its ID in rendered HTML):

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

Define a function to parse a time, see this post here on SO.

In the onStartTimeChanged function get the check box state (update with correct jQuery selector for the control):

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

Then simply add the parsed date with the proper offset and write that back to the End Time control using toLocaleTimeString().

Note: I assumed you'll use JavaScript to perform calculations on client-side. If you prefer to do everything on server-side you have to add an AJAX-enabled method in your controller with the start time and the flag as parameters. In your onStartTimeChanged function you have to call it and asynchronously update the end time when the function return. If there's a lot of logic (or it's not trivial) I prefer the server-side solution with AJAX.

For example (I didn't check the code so use it cum grano salis) to call a server-side method with POST (you have to pass parameters, as alternative you may use getJson with GET only but you have to work with routing):

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

And your server side function:

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

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