刪除項目，無需導航到新視圖 - mvc 3

我在我的網站中有一張表格，顯示數據列表。每個數據項都有一個刪除鏈接。我不想讓用戶進入點擊刪除頁面;我只希望在我的眼睛之前，在同一頁面上刪除該項目，而不用導航。我是否還需要一個控制器方法來刪除？我將如何去解決這個問題，因爲我顯然不會用刪除點擊返回視圖？我想在我的get方法上使用redirecttoaction返回來刪除，但我認爲這是不正確的。刪除項目，無需導航到新視圖 - mvc 3

什麼是刪除而不刪除方法返回刪除視圖的語法？

來源

2012-08-02 Skitterm

無論答案你一起去，記住，只能做一個HTTP POST，否則的WebCrawler會抓取您的網頁，並刪除每個項目在這些鏈接的數據庫中。 – Oblivion2000 2012-08-02 17:02:34

@ Oblivion2000 - 大聲笑，這是一個很好的觀點。此外，（at）Skitterm，請記住，這隻能通過某種Ajax實現完成。 – 2012-08-02 19:20:49

我認爲你可以使用Ajax fot這個目的。你可以在按鈕的onclick事件上寫下類似下面的代碼。您還需要提供一些js代碼來隱藏已刪除的項目。

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

你可能需要序列化表單數據，你也可以用jQuery來做到這一點。

$.post("delete/{Id}", $("#form-name").serialize());

來源

2012-08-02 16:27:51 user854301

用戶jQuery ajax從同一列表頁面執行異步操作。

假設你有一些這樣的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>

現在確保您有（在這個例子中產品）相應的控制器的操作方法來處理這個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"}); } }

刪除操作方法返回follwing形式的有效JSON（狀態的值將是要麼刪除/錯誤）

{ "Status": "Deleted" }

在jQuery中的回調後要檢查的JSON數據和如果狀態值爲已刪除，則將從UI DOM中刪除項目。

來源

2012-08-02 16:34:11 Shyju

好吧，如果你有一臺這樣

<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-02 16:35:30 Qpirate

這看起來不錯。我對MVC相當陌生 - Json在哪裏走？這是我創建的腳本，我告訴視圖使用？ – Skitterm 2012-08-02 16:39:03

如果你喜歡或者可以屬於你的腳本文件之一，那麼腳本可以進入你的視圖，這真的是你的選擇。 json通過JsonResult對象返回。在t腳本中，post函數的參數是返回的json值。它可以是一個對象或只是一個價值（如shyju的回答）。 mvc給你所有類型的靈活性。 – Qpirate 2012-08-02 18:33:31

創建一個控制器方法刪除該項目。使用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-02 16:44:51 Dan

刪除項目，無需導航到新視圖 - mvc 3

回答

相關問題