встроенная таблица редактирования/сетка для MVC

Question

Что такое самый простой способ создать таблицу, где пользователи могут редактировать данные напрямую (например, как) с минимальными усилиями?

Существует множество библиотек и пользовательского элемента управления, но я ищу что-то, что легко реализовать и не требует много кодирования.

Answer 1

В контроллере создать метод для добавления, где вы передаете параметр, чтобы с ГЭТ:

public bool EditData(int pkId, int statusID, string Comments) 
{ 
    // logic to edit 
} 

На ваш взгляд добавить таблицу данных с вашим управления добавить первичный ключ, идентификатор элемента управления, так что вы можете использовать его в JQuery

<table class="table"> 
    <tr> 
     <th>Status</th> 
     <th>Comments</th>  
     <th></th> 
    </tr> 
    @foreach (var item in Model) 
    { 
     <tr class="searchable"> 
      <td> 
       @Html.DropDownList("StatusID" + @Html.DisplayFor(modelItem => item.pkID), new SelectList(ViewBag.Status, "StatusID", "StatusTitle", item.StatusID), htmlAttributes: new { @class = "form-control", style = "width:100px" }) 
      </td> 
      <td> 
       <textarea id="Comments_@Html.DisplayFor(modelItem => item.pkID)" rows="5" cols="20">@Html.DisplayFor(modelItem => item.Comments)</textarea> 
      </td> 
      <td> 
       <input type="button" class="btn btn-default" value="save" onclick='updateData("@Html.DisplayFor(modelItem => item.pkID)")' /> 
      </td> 
     </tr> 
    } 
</table> 

в JavaScript добавить вызов в методе редактирования

function updateData(pkID) { 
    // the id of the drop down list is AssetEffectiveness + effectivnessid 
    var Status = $("#StatusID" + pkID).val(); 
    var Comments= $("#Comments_" + pkID).val(); 
    $.ajax({ 
     url: "YOU_CONTROLLER_URL/EditData?pkId=" + pkID + "&statusID=" + Status + "&Comments=" + Comments, 
     cache: false 
    }) 
    .done(function (data) { 
     if (data == 'True') { 
      // change bg of the tr 
      $("#Commects_" + pkID).closest('tr').css('background-color', '#eeffee'); 
      // animate to indicate the save 
      $("#Commects_" + pkID).closest('tr').fadeOut(500).fadeIn(500); 
      // return color back after 2 seconds 
      setTimeout(function() { $("#Commects_" + pkID).closest('tr').css('background-color', ''); }, 1000); 
     } 
     else { 
      alert('not saved'); 
      $("#Commects_" + pkID).closest('tr').css('background-color', '#ffcccc'); 
     } 
    });  
}