3

MVC では、ビューモデルの「リスト」を反復処理して、ビュー内にテーブルを作成しました。 

@foreach(var item in Model)
{
<tr id="row-@item.name">
    <td>
        @item.type
    </td>
    <td >
        @Html.ActionLink((string)item.name, "Download", "FileUpload", new { rout = item.rout, fileName = item.name }, null)
    </td>
    <td>
        @item.size
    </td>
    <td>
        <a href="#" id="delete-file" del-url="@item.delete_url">Delete</a>
    </td>
</tr>

}

ページを読み込むと、ファイルのリストが表示され、それぞれに「削除」リンクが表示されます。

基本的な「行の削除」メソッドをjQueryで実装しました：

$('#delete-file').click(function() {
    var delUrl = $(this).attr('del-url');
    $.post(delUrl, null, removeRow(),'json')
});

function removeRow() {
   $($('#delete-file').closest('tr')).fadeOut('slow');
}

ファイル行の 1 つで「削除」をクリックすると、うまく機能しますが、別の行 (削除) をクリックしても何も起こりません。サーバー上でファイルは削除されず、行は完全に無視されているかのように削除されません。

4

4 に答える 4

4

これがあなたの解決策です：

http://jsfiddle.net/irpm/enEAt/1/

javascriptは次のとおりです。

$('.delete-file').click(function(e) {
    $(this).closest('tr').remove();
});​
于 2012-05-20T14:52:20.307 に答える
4

class="delete-file"- の代わりに使用する必要がid="delete-file"あり、もちろん対応する$(".delete-file")セレクターも使用する必要があります。

ID はドキュメントごとに一意であることを意図しており、コードはハンドラーを最初のid="delete-file"要素にバインドします。

于 2012-05-20T14:48:53.937 に答える
3

要素のデフォルトのアクションを防止し<a>、正しいセレクターを使用する必要があります

$('.delete-file').click(function(e) {
    e.preventDefault();
    var self=this,
        delUrl = $(this).attr('del-url');
    $.post(delUrl, function() {
        $(self).closest('tr').fadeOut('slow');
    },'json');
});
于 2012-05-20T14:53:22.403 に答える
3

この行：

$.post(delUrl, null, removeRow(),'json');

これと単に同等です：

$.post(delUrl, null, undefined, 'json');

asremoveRow()関数は何も返しません。その行を次のように変更します。

$.post(delUrl, null, removeRow,'json');   //Without '()' after 'removeRow'

そして、あなたのremoveRow機能は、私が推測するように機能しません。その関数はすべての行を非表示にしますが、「delete-file」がクリックされた行だけを非表示にする必要があります。removeRowしたがって、その行の参照を関数に渡す必要があります。これを行う1つの方法を次に示します。

$('#delete-file').click(function() {
   var delUrl = $(this).attr('del-url');
   var $row = $(this).closest('tr');
   $.post(delUrl, null, function(){
       removeRow($row);
   },'json')
});

function removeRow($row) {   $row.fadeOut('slow');   }
于 2012-05-20T14:54:05.633 に答える