asp.net-mvc - MVC Html 帮助器使标签可编辑

Question

我在我的视图中生成了一个 html 表，有没有人知道我可以使用的任何可用助手，以便可以在线编辑其中一个字段。

看法：

 <table>
  <caption>Configuration values for current management group</caption>
    <thead>
      <tr>
        <th scope="col">Device Type</th>
        <th scope="col">Section</th>
        <th scope="col">Name</th>
        <th scope="col">Value</th>
        <th scope="col">Operation</th>
      </tr>
    </thead>
    <tbody>
    @foreach (var param in Model.ParamData)
    {
      <tr>
        <td>@param.DeviceType</td>
        <td>@param.Group</td>
        <td>@param.Name</td>
        <td>@param.Value</td>
        <td>@(param.IsMerge ? "Merge" : "Delete")</td>
      </tr>
    }
    </tbody>
  </table>

正如您所看到的，这里没有什么特别之处，我想要一个编辑列，它的工作方式与 Web 表单网格视图类似。唯一要编辑的字段是值，它总是一个文本框。

我确定人们以前一定做过这个，但我在网上看到的唯一例子是 mvc 1。

我可以使用 jquery 敲出一些东西，但我确信已经有很多示例并且不想重新发明轮子。

Answer 1

我自己做了，如果有人感兴趣：

  @foreach (var param in Model.ParamData)
    {
      <tr>
        <td>@param.DeviceType</td>
        <td>@param.Group</td>
        <td>@param.Name</td>
        <td>
        <div class="@("ViewValueDiv_" + param.ParamaterValueId)">
          @param.Value
        </div>
        <div class="@("EditValueDiv_" + param.ParamaterValueId)" style="display:none;">
         <input type="text" name="@("EditValue_" + param.ParamaterValueId)" value="@param.Value" class="@("Input_" + param.ParamaterValueId)" />
        </div>
        </td>
        <td>@(param.IsMerge ? "Merge" : "Delete")</td>
        <td>
        <div class="@("EditButtonDiv_" + param.ParamaterValueId)">
          <input type="button" value="Edit" class="EditButton" Id="@param.ParamaterValueId" />
        </div>
        <div class="@("UpdateCancelButtonDiv_" + param.ParamaterValueId)" style="display:none;">
          <input type="button" value="Update" class="UpdateButton" id="@("U" + param.ParamaterValueId)"  />
          <input type="button" value="Cancel" class="CancelButton" id="@("C" + param.ParamaterValueId)"  />
        </div>
        </td>
      </tr>
    }


$(document).ready(function () {
  $(".EditButton").click(function () {
    var id = $(this).attr('id');
    $(".ViewValueDiv_" + id).hide();
    $(".EditValueDiv_" + id).show();
    $(".EditButtonDiv_" + id).hide();
    $(".UpdateCancelButtonDiv_" + id).show();
    oldvalue = $(".Input_" + id).val();
  });

  $(".CancelButton").click(function () {
    var id = $(this).attr('id').substr($(this).attr('id').indexOf("C") + 1);
    $(".ViewValueDiv_" + id).show();
    $(".EditValueDiv_" + id).hide();
    $(".EditButtonDiv_" + id).show();
    $(".UpdateCancelButtonDiv_" + id).hide();
    $(".Input_" + id).val(oldvalue);
  });

  $(".UpdateButton").click(function () {
    var id = $(this).attr('id').substr($(this).attr('id').indexOf("U") + 1);

    NewValue = $(".Input_" + id).val();

    if (NewValue) {

      $.ajax({
        url: "/Terminals_configuration/UpdateConfigValue",
        data: { valueId: id, newValue: NewValue },
        dataType: "json",
        type: "POST",
        error: function () {
          alert("An error occurred.");
        },
        success: function (data) {
          $(".ViewValueDiv_" + id).show();
          $(".EditValueDiv_" + id).hide();
          $(".EditButtonDiv_" + id).show();
          $(".UpdateCancelButtonDiv_" + id).hide();
          $(".ViewValueDiv_" + id).html(NewValue);
        }
      });
    } else {
      alert("You didn't supply a new value");
    }

  });
});