C# 如何在MVC3中动态更改标签的值？

我正在开发一个MVC3（CRUD）项目。。。我想预订一个网球场

页面：

因此，当我键入“开始时间”（“heure de début”（法语）时，我想动态地增加红色的“FinishTime”（“heure de fin”）值。。。如果是简单匹配，则增加1:00，如果不是，则增加2:00

我是MvC3的初学者，所以我不知道怎么做。。。当然，我不是要求你做我的工作，而是正确的方法，如果可能的话，举个例子

视图：

@使用（Html.BeginForm（））{
@Html.ValidationSummary（true）
预订
@LabelFor（model=>model.Date）
@EditorFor（model=>model.Date）
@Html.ValidationMessageFor（model=>model.Date）
@LabelFor（model=>model.StartTime）
@EditorFor（model=>model.StartTime）
@Html.ValidationMessageFor（model=>model.StartTime）
@LabelFor（model=>model.Simple）
@EditorFor（model=>model.Simple）
@Html.ValidationMessageFor（model=>model.Simple）
@LabelFor（model=>model.FinishTime）
@DisplayFor（model=>model.FinishTime）
@Html.ValidationMessageFor（model=>model.FinishTime）
@LabelFor（model=>model.Customer.Name）
@EditorFor（model=>model.Customer.Name）
@Html.ValidationMessageFor（model=>model.Customer.Name）
@Html.Label（“地形N°”）
@Html.DropDownListFor（c=>c.TennisCourtID，ViewBag.TennisCourtID作为SelectList）


}
@ActionLink（“返回列表”、“索引”）

---

我忘了说所有的俱乐部都有不同的时间表例如：

俱乐部1: 简单：1:00 双人房：2:00

Club2: 简单：1:30 双人房：2:30

---

所以在我数据库的TennisClub表中，我有一个属性SimpleGameTime和DoubleGameTime。。。抱歉：（

绑定到

输入

的

更改

事件的开始时间（在呈现的HTML中检查其ID）：

定义一个解析时间的函数，见下文

在

onStartTimeChanged

函数中，获取复选框状态（使用控件的正确jQuery选择器更新）：

然后只需添加具有适当偏移量的已解析日期，并使用

toLocaleTimeString（）

将其写回结束时间控件

注意：我假设您将使用JavaScript在客户端执行计算。如果您喜欢在服务器端执行所有操作，则必须在控制器中添加启用AJAX的方法，并将开始时间和标志作为参数。在

onStartTimeChanged

函数中，您必须调用它并异步更新当函数返回时结束。如果有很多逻辑（或者它不是琐碎的），我更喜欢使用AJAX的服务器端解决方案

例如（我没有检查代码，所以使用它和grano-salis）通过POST调用服务器端方法（您必须传递参数，或者您可以使用getJson和GET-only，但必须使用路由）：

---

如果您想动态地执行此操作，即不发布表单，唯一的解决方案是Javascript。我不完全确定脚本中的值是如何处理的，字符串？无论如何，使用jQuery您可以这样做：

$（document）.ready（function（）{$（“#StartTime”）.keyup（function（）{var value=$（this.val（）}}）；

，然后可能增加此值并设置为FinishTime。我忘记了精确说明所有俱乐部都可以有不同的时间表…例如：Club 1:Simple:1:00 Double:2:00 Club2:Simple:1:30 Double:2:30所以在我的数据库的表TennisClub中我有一个属性SimpleGameTime和DoubleGameTime…抱歉：（感谢您的回复，我将用一个服务器端处理的小示例来检查更新。

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

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

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

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 });
}