Как сделать редактируемую таблицу в MVC с помощью jquery?

Question

Я создаю свое первое приложение MVC, используя подход «база данных первым», все работает отлично, однако я застрял в точке использования jQuery, чтобы сделать таблицы MVC доступными для редактирования (inline), каждая строка имеет ссылку при нажатии на этой ссылке, сценарий должен выглядеть следующим образом: -

1 клик по ссылке в конкретной строке
2-получить эту конкретную строку редактируемого

проблема заключается в следующем: -
1-когда я нажимаю на ссылку определенной строки
2-все строки становятся редактируемыми !!!

Вот HTML код: -

<table id="my_table"> 
      <tr> 
       <th> 
        @Html.DisplayNameFor(model => model.AFECode) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.Remarks) 
       </th> 
       <th></th> 
      </tr> 

      @foreach (var item in Model) 
      { 
       <tr contenteditable="false"> 
        <td contenteditable="false"> 
         @Html.DisplayFor(modelItem => item.AFECode) 
        </td> 
        <td contenteditable="false"> 
         @Html.DisplayFor(modelItem => item.Remarks) 
        </td> 
        <td contenteditable="false"> 
         <a id="edit_link" href="#" onclick="edit()" >edit</a> 
      } 

     </table> 

Вот код Jquery включая edit() функции: -

function edit() { 
    $("#my_table td").attr("ContentEditable") == "false" ? $("#my_table td").attr("ContentEditable", "true") : $("#my_table td").attr("ContentEditable", "false") 
} 

Теперь, как я могу получить только строку, которая имеет ссылку я щелкнул на редактирование?
заранее спасибо

Answer 1

Вашего селектор выбирает $("#my_table td")всех<td> элементов и, следовательно, переключает contenteditable состояния всех ячеек таблицы. Также вы генерируете недопустимый html из-за дубликатов атрибутов id в каждом элементе <a>.

Избегайте загрязняющих разметку с поведением и использовать Unobtrusive Javascript и использовать относительные селекторы, чтобы получить <td> элементы, связанные со связью

<a class="edit" href="#">edit</a> <!-- use a class name--> 

$('.edit').click(function() { 
    // to get the associated row 
    var row = $(this).closest('tr'); 
    // or to get the associated cells 
    var cells = $(this).closest('tr').children('td'); 
    // or just the sibling cells 
    var siblings = $(this).closest('td').siblings('td'); 
}); 

Там нет причин, чтобы добавить contenteditable изначально, и вы, вероятно, хотите предоставить обратную связь пользователю, чтобы они знали, какую строку они редактируют, например, ваш код может быть

@foreach (var item in Model) 
{ 
    <tr> 
     <td>@Html.DisplayFor(modelItem => item.AFECode)</td> 
     <td>@Html.DisplayFor(modelItem => item.Remarks)</td> 
     <td><a class="edit" href="#">edit</a></td> 
    </tr> 
} 

$('.edit').click(function() { 
    var row = $(this).closest('tr'); 
    row.toggleClass('isediting'); // add a style to highlight the row 
    var isediting = row.hasClass('isediting'); 
    $(this).parent('td').siblings('td').prop('contenteditable', isediting); 
    if (isediting) { 
     $(this).text('update'); 
    } else { 
     $(this).text('edit'); 
    } 
}) 

Обратите внимание, что это не способ редактирования вашей модели. Либо сгенерируйте элементы управления формы для всех элементов цикла for, либо используя EditorTemplate внутри формы и отправляйте метод контроллера (см. this example) или используйте диалог jquery, содержащий форму для одного элемента в вашей коллекции, и при нажатии кнопки «Изменить» , перенесите данные строк в элементы управления формы и сохраните данные с помощью ajax, и в случае успеха обновите значения в строке.