0

ビューで生成された html テーブルがあります。フィールドの 1 つをインラインで編集できるように使用できるヘルパーを知っている人はいますか。

意見：

 <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を使って何かをノックアップすることができましたが、すでにたくさんの例があり、車輪を再発明したくないと確信しています.

4

1 に答える 1

0

興味のある人がいれば、私は自分でそれをしました：

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

  });
});
于 2013-03-01T11:14:52.767 に答える