Question

我已完成创建，修改功能＆amp;尝试执行删除功能，但默认情况下，我的页面会重定向到Delete.aspx以进行删除确认。我想在尝试删除记录时发生以下步骤。目前我在 index.aspx并希望保持同一页面＆amp;从数据库中删除记录。

图片1 enter image description here

图片2

enter image description here

图3

enter image description here

我不希望从URL中删除此内容。对于前 http://localhost:53402/Project/Delete/11 ，任何人都可以轻松删除任何提供ID的记录。

Answer 1

为了使用javascript和弹出窗口执行删除，您需要： 1）在控制器中创建一个动作，如下所示：

[HttpPost]
public void DeleteItem(int id)

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

2）如果delete-item是项目列表的一部分，则需要使用自定义HTML5属性绑定到View a of id中的项目，如下所示：

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

3）以jQuery为例，点击页面中的删除按钮点击弹出窗口

$().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>

处理删除按钮单击并将对话框绑定到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帖子是异步的，我们需要一个回调来处理结果

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

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

Answer 2

你必须通过某种身份来做这件事，没有别的办法。

如果您不希望用户操纵URL，则需要某种登录/权限系统。

Answer 3

尝试使用jquery：

<script type="text/javascript">

    $(function () {
        $(".delete").live("click", function (e) {
            e.preventDefault();
            if (confirm("Are you sure you wish to delete this article?")) {
                $.post(this.href);
            }
        });
    });
</script>

<a href="/Project/Delete/11" class="delete">Delete</a>

Answer 4

如果您正在尝试实现真正的MVC，正如您的问题所暗示的那样，事件事务将提交给控制器，如index.aspx - 该控制器将具有指定您所在的当前视图页面的事件，喜欢

event =“displayGui”将包含视图文件“frmCreate.aspx”或“frmEdit.aspx”

当视图文件“frmCreate.aspx”或“frmEdit.aspx”提交时，它会调用控制器中的另一个事件，如

event =“submitAndConfirm”

事件submitAndConfirm将包含一个处理删除操作的指令，方法是包含一个名为actDelete.aspx的文件。当actDelete.aspx完成工作时，控制器将回调event =“displayGui”。

这是一个概念性示例，需要特定于aspx的实现。

Answer 5

我不希望从URL中删除此内容。对于前http://localhost:53402/Project/Delete/11，任何人都可以轻松删除任何提供ID的记录。

如果您不希望用户猜测id，请使用Guid而不是int

http://localhost:53402/Project/Delete/30D4AAF1-3CF1-4514-A025-2DDE1C770CD5

使用Javascript弹出MVC删除记录

5 个答案: