jqueryを使用してMVCで編集可能なテーブルを作成するには？

Question

私は最初のMVCアプリケーションを "データベースの最初の"アプローチで構築していますが、すべて正常に動作しますが、jQueryを使用してMVCテーブルを編集可能（インライン）にしています。

2-getの特定の行にリンクを1クリックして、この特定の行

編集可能な以下のような問題がある： - - ：
次のようにその リンクに、シナリオはする必要があります1 - 特定の行のリンクをクリックしたとき
2行すべてが編集可能になる!!!ここで

は、HTMLコードである： - ：どのように私は私がクリックしたリンクを持つ行を取得することができ、今

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

- ここ

<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> 

はedit()機能を含むjQueryのコードです編集可能にするには？あなた$("#my_table td")セレクタ全て<td>要素を選択し、したがって、すべての表のセルのcontenteditable状態をトグル予め

Answer 1

で
おかげ。また、それぞれの<a>要素に重複するid属性のため、無効なhtmlを生成しています。

回避行動であなたのマークアップを汚染し、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を参照）、コレクション内の1つの項目のフォームを含むjqueryダイアログを使用し、フォームコントロールに行データを転送し、ajaxを使用してデータを保存します。成功した場合は、行の値を更新します。