Question

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

如何删除而不使删除方法返回删除视图？

Answer 1

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

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

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

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

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

Answer 3

创建一个删除项目的控制器方法。使用JQuery（或您的首选javascript库）来响应按钮上的click事件，并进行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 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>

现在确保在相应的控制器（此示例中的产品）中有一个操作方法来处理此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"});
   }

}

删除操作方法返回以下格式的有效JSON（状态值将被删除/错误）

{
    "Status": "Deleted"
}

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

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

4 个答案: