MVC Html助手使標籤可編輯

我有一個html表生成在我的視圖中，沒有人知道任何助手可用，我可以使用，以便其中一個字段可以編輯內聯。MVC 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>

正如你可以看到有什麼特別在這裏，我想編輯欄會以類似的方式工作，以網頁形式的GridView。唯一要編輯的字段將是值，並且它始終是一個文本框。

我確信人們必須在已經這樣做了，但香港專業教育學院在網上看到的唯一的例子是爲MVC 1

我可以使用jQuery敲東西了，但我肯定有一定的例子已經負載和不想要重新發明輪子。

來源

2013-03-01 DavidB

香港專業教育學院做我自己，如果任何人的興趣：

@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-01 11:14:52 DavidB

MVC Html助手使標籤可編輯

回答

相關問題