c# - 删除项目而不导航到新视图--mvc 3

Question

我的网站中有一个表格，其中显示了数据列表。每个数据项都有一个删除链接。我不想在点击时将我的用户带到删除页面；我只想在我眼前删除该项目，在同一页面上，而不是离开。我还需要一个控制器方法来删除吗？我该怎么做，因为我显然没有通过删除点击返回视图？我曾考虑在我的 get 方法上使用 redirecttoaction return 来进行删除，但我认为这是不正确的。

在不使删除方法返回删除视图的情况下进行删除的语法是什么？

Answer 1

好吧，如果您有这样的桌子

<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;
});

Answer 2

创建一个删除项目的控制器方法。使用 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
            }
        });
    });
});

Answer 3

我认为您可以为此目的使用 Ajax。你可以在按钮的 onclick 事件上编写类似下面的代码。您还需要提供一些 js 代码来隐藏已删除的项目。

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

您可能需要序列化表单数据，您也可以使用 jQuery 来执行此操作。

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

Answer 4

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

现在确保您在相应的控制器（本例中为 Product）中有一个操作方法来处理此 jQueryPOST并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以以下形式返回一个有效值（状态值将是已删除/错误）

{
    "Status": "Deleted"
}

在 jQuery post 的回调中，您正在检查 JSON 数据，如果状态值为 Deleted，则您正在从 UI DOM 中删除该项目。