javascript - MVC 使用 Javascript 弹出窗口删除记录

Question

我已经完成了创建、编辑功能并尝试执行删除功能，但默认情况下我的页面重定向到Delete.aspx进行删除确认。我希望在尝试删除记录时执行以下步骤。目前我正在index.aspx 并希望留在同一页面并从数据库中删除记录。

图片1

图片2

图片 3

我不想从 URL 中删除此内容。对于前。 <强> http://localhost:53402/Project/Delete/11 ，任何人都可以很容易地删除任何给出 id 的记录。

Answer 1

为了使用 JavaScript 和弹出窗口执行删除，您需要:1)在 Controller 中创建一个如下所示的操作:

[HttpPost]
public void DeleteItem(int id)

通过使用 [HttpPost] 注释修饰操作方法，可以避免用户键入 URL/Home/Delete/1 时出现的不良行为，因为只有 POST 才会调用该操作。

2)如果您删除的项目是项目列表的一部分，则需要使用自定义 HTML5 属性将某种 id 绑定(bind)到 View 中的项目，如下所示:

@for (int i = 0; i < Model.Items.Count; i++)
{                            
     <a href="#" class="delete-button" data-id="@Model.Items[i].Id">Delete</a>        
}

3)以 jQuery 为例，将页面中的删除按钮绑定(bind)到点击弹出窗口

$().ready(function () {
    $(".delete-button").click(null, DeleteItem);  //DeleteItem is the callback      
    return false;
});

我们需要指定一个回调来处理删除按钮点击

4) 使用 jQuery UI 对话框组件为例:

为弹出文本创建 HTML

<div id="dialog-confirm" style="display:none;" title="Confirm">
<p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Are you sure you want to proceed?
</p>
</div> 

处理删除按钮单击并将对话框绑定(bind)到 html 文本，以便弹出窗口告诉用户您想要什么

function confirmDeleteVersion() {        
    var recordToDelete = $(this).attr("data-id"); // now we need the data-id to retrieve the identifier for the item to delete              
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 200,
        modal: true,
        buttons: {
            "Delete": function () {         
                $(this).dialog("close");        
                $.post("/Home/Delete", { id : recordToDelete}, DeleteSuccessfull);
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }             
    });     
};

这样，我们就得到了按钮的 id

var recordToDelete = $(this).attr("data-id");

其中“this”是导致事件触发的 HTML 元素

下面一行实际上是我们要求Controller执行删除操作的地方，我们使用记录的id

$.post("/Home/Delete", { id : recordToDelete}, DeleteSuccessfull);

5) 因为 jQuery post 是异步的，所以我们需要一个回调来处理结果

function DeleteSuccessfull()
{
    //Do what you want...
};

就是这样...请记住，这只是一个示例，我使用的是 jQuery 对话框组件，而您可以使用不同的东西。