1

私のサイトには、データのリストを表示するテーブルがあります。各データ項目には削除リンクがあります。クリック時にユーザーを削除ページに移動させたくありません。移動せずに、同じページで目の前でアイテムを削除したいだけです。削除用のコントローラー メソッドが必要ですか? 明らかに削除クリックでビューを返していないので、どうすればよいでしょうか? 削除のためにgetメソッドでredirecttoactionリターンを使用することを考えましたが、それは間違っていると思います。

削除メソッドに削除ビューを返させずに削除するための構文は何ですか?

4

4 に答える 4

2

あなたがそのようなテーブルを持っているなら

<table>
<tr>
<td>
<a id="delete" href="@Url.Action("Delete",new {Id=123})">delete</a>
</td>
</tr>
</table>

とコントローラーメソッド

public JsonResult Delete(int Id)
{
//do delete stuff
return Json(true??false);
}

次のようにajaxを使用します

$('#delete').click(function(){
$.post($(this).attr('href'),function(result){
if(result)
{
$(this).closest('tr').remove();
}
});
return false;
});
于 2012-08-02T16:35:30.373 に答える
1

アイテムを削除するコントローラーメソッドを作成します。JQuery（または好みのjavascriptライブラリ）を使用して、ボタンのクリックイベントに応答し、AJAX呼び出しを行います。

コントローラコード：

public ActionResult Delete(int id)
{
    bool success = this.businessLogic.Delete(id); // whatever your business logic is for deleting

    object result = success ? "OK" : "ERROR"; // have this be your object that you will return
    return this.Json(result, JsonRequestBehavior.AllowGet);
}

javascript：

$(function() {
    $("div.deleteButton").on("click", function() {
        var id = $(this).parent().attr("data-id"); // or wherever you've stored the id of the item you're trying to delete
        var url = "/Controller/Delete?id=" + id;
        $.getJSON(url, function (result) {
            if (result != "OK") {
                alert("delete failed!");
            }
            else {
                $("tr[data-id=" + id).remove(); // or however you need to remove the row from the UI
            }
        });
    });
});
于 2012-08-02T16:44:51.953 に答える
1

この目的のためにAjaxを使用できると思います。ボタンの onclick イベントで以下のコードのようなものを書くことができます。また、削除されたアイテムを非表示にするための js コードを提供する必要があります。

$.post("delete/{Id}")

フォーム データのシリアル化が必要になる場合がありますが、これも jQuery を使用して行うことができます。

$.post("delete/{Id}", $("#form-name").serialize());
于 2012-08-02T16:27:51.100 に答える
0

同じリストページから非同期操作を実行するためのユーザーjQueryajax。

このようなHTMLマークアップがあると仮定します。

<div class="divItem">
   <p>Item Desc 108</p>
   <a href="../Product/delete/108" class="ajaxAction">Delete</a>
</div>
<div class="divItem">
   <p>Item Desc 10p</p>
   <a href="../Product/delete/109" class="ajaxAction">Delete </a>
</div>

次に、jQueryコードをいくつか用意します。（このコードが機能するように、このビュー/レイアウトページにjQueryライブラリが含まれていることを確認してください）

<script type="text/javascript">
  $(function(){

     $("a.ajaxAction").click(function(e){

        e.preventDefault();  //prevent default click behaviour
        var item=$(this);
        $.post(item.attr("href"),function(data){
           if(data.Status=="Deleted")
           {
             //successsfully delete from db. Lets remove the Item from UI
              item.closest(".divItem").fadeOut().remove();
           }
           else
           {
               alert("Could not delete");
           }

        });

     });

  });

</script>

ここで、対応するコントローラー（この例ではProduct）にこのjQueryを処理し、操作後にクライアントにPOST戻るアクションメソッドがあることを確認します。JSON

[HttpPost]
public ActionResult Delete(int id)
{
  try
  {
     //delete the Item from the DB using the id
     // and return Deleted as the status value in JSON
     return Json(new { Status : "Deleted"});
  }
  catch(Exception eX)
  {
     //log exception
     return Json(new { Status : "Error"});
   }

}

Deleteアクションメソッドは、JSON次の形式で有効なものを返します（ステータスの値はDeleted / Errorのいずれかになります）

{
    "Status": "Deleted"
}

jQuery postのコールバックでは、JSONデータをチェックしており、ステータス値がDeletedの場合は、UIDOMからアイテムを削除しています。

于 2012-08-02T16:34:11.760 に答える