如何在ASP.NET MVC中处理同一表单上的编辑和删除按钮？

Question

考虑以下标记：

<h2>Edit SAS Program</h2>
@using (Html.BeginForm("Edit", "SasProgram", FormMethod.Post))
{
    <label for="Name">Name</label>
    @Html.TextBoxFor(model => model.Name)

    using (Html.BeginForm("Delete", "SasProgram", FormMethod.Post))
    {
        <input type="submit" class="button" value="Delete" />
    }
    <input type="submit" class="button" value="Save Changes" />
}

我想在“ Edit的同一视图上显示“ Delete按钮。 但是，它不会让我有嵌套的表单。 处理这种情况的适当方法是什么？

我尝试利用这个答案， 如何处理ASP.NET MVC中的嵌套表单 ，但现在它已经是一个破碎的链接。

Answer 1

我会以相同的形式为按钮名称使用不同的值：

@using (Html.BeginForm("Edit", "SasProgram", FormMethod.Post))
{
    <label for="Name">Name</label>
    @Html.TextBoxFor(model => model.Name)

    <button name="action" value="delete">Delete</button>
    <button name="action" value="save">Save Changes</button>
}

然后切换控制器：

[HttpPost]
public ActionResult Edit( SomeModel model, string action )
{
    switch( action ) {
        case "delete":
            // delete action
            break;
        case "save":
            // save action
            break;
    }
}

代码是从内存中编写的，但它可以在生产中使用。 请注意，按钮是默认类型 - 提交。

Answer 2

最好和最简单的方法是使用两种形式但不嵌套它们：

<h2>Edit SAS Program</h2>
@using (Html.BeginForm("Edit", "SasProgram", FormMethod.Post))
{
    <label for="Name">Name</label>
    @Html.TextBoxFor(model => model.Name)

    <input type="submit" class="button" value="Save Changes" />
}

@using (Html.BeginForm("Delete", "SasProgram", FormMethod.Post))
{
    <input type="submit" class="button" value="Delete" />
}

这样你就有：

• 两种不同的形式
• 没有GET请求
• 编辑按钮下方的删除按钮，当您在允许编辑内容的视图上时更有意义。

Answer 3

首先。 每个修改请求都应该使用post方法。
我在wiki中进行了一些研发并构建了多提交按钮处理程序的基础知识在ASP.NET MVC中使用多个提交按钮的干净解决方案 。
我认为它可以解决你的问题。

Answer 4

首先，您不能嵌套<form>元素。 规范不允许。 由于您使用的是MVC模式，因此我想到了两个选项：

1. 您可以将保存按钮保留为表单的提交按钮，并将删除按钮设置为HTML链接。 然后删除按钮将定位到不同的路线，它可能是： GET /program/delete/{id} 。

2. 您可以在同一表单中使用两个按钮，然后在单击其中一个按钮后使用JavaScript，您将更改表单的操作属性。

更新

还有第三个选项，它更干净：使用两个具有相同名称属性和不同值的提交按钮。

您的表单将有两个按钮：

public ActionResult MyAction(string submitButton) {
    switch (submitButton) {
        case "save":
            // ...
        case "delete":
            // ...
    }
}

有关详细信息，请查看以下答案： https ： //stackoverflow.com/a/443047/439427

Answer 5

您还可以使用html 5功能从输入按钮定位表单。 下面我创建了一个删除和保存表单，并在表单外部提交了按钮，但是通过form属性定位它们。

我认为大多数浏览器都支持IE，除了IE。

不需要JavaScript。

@using (Html.BeginForm("Edit", "SasProgram", FormMethod.Post, new { id = "editForm" }))
{
    <label for="Name">Name</label>
    @Html.TextBoxFor(model => model.Name)
}

@using (Html.BeginForm("Delete", "SasProgram", FormMethod.Post, new { id = "deleteForm" }))
{
    <input type="submit" class="button" value="Delete" />
}

<input type="submit" class="button" value="Save" form="editForm"/>
<input type="submit" class="button" value="Delete" form="deleteForm" />

这允许一个漂亮的按钮布局，没有任何花哨的JavaScript或CSS风格。

Answer 6

执行此操作但仍然适用的旧方法是使用一个表单标记并使用多个提交按钮更改操作。

<input class="btn btn-default" type="submit" value="Save" />
<input class="btn btn-default" type="submit" value="Delete" onclick="this.form.action='/SasProgram/delete/@Model.Id';" />

Answer 7

编辑：以下是使用HttpPost使用ajax的方法。

//
// POST: /Divisions/Delete
[HttpPost, ActionName("Delete"), Authorize]
public ActionResult DeleteConfirmed(int id)
{
    Division division = _db.Divisions.Single(x => x.DivisionId == id);

    string errorMessage;
    if (DbRelationEnforcer.CanDelete(_db, division, out errorMessage))
    {
        division.SetDeleted(User.Identity.Name);
        _db.SaveChanges();
        return Json(new JsonResponseCreatePartial { Success = true }, JsonRequestBehavior.AllowGet);
    }

    return Json(new JsonResponseCreatePartial { Success = false, Message = errorMessage }, JsonRequestBehavior.AllowGet);
}

然后，在视图上，您​​必须使用<input type="submit">Save changes</input>来保存更改（在表单中），并使用一个简单的链接/按钮进行删除，如下所示：

<h2>Edit SAS Program</h2>
@using (Html.BeginForm("Edit", "SasProgram", FormMethod.Post))
{
    <label for="Name">Name</label>
    @Html.TextBoxFor(model => model.Name)

    <input id='delete-btn' type="button" class="button" value="Delete" />
    <input type="submit" class="button" value="Save Changes" />
}

最后，当用户单击“删除”时，您必须使用JS从视图发布到您的操作。

<script type='text/javascript'>
    $(function() {
        $("input#delete-btn").click(function(){
            $.post('@Url.Action("Delete")', '@Model.Id', function(data) {
                if(data.Success) {
                    ' ... handle the success case
                } else {
                    ' ... error management
                }
            });
        });
    });
</script>

这将有效，但为了获得更好的用户体验，最好在索引/列表视图中使用“删除”按钮，并在执行ajax发布之前使用JQuery UI对话框进行确认。 如果/当您想要一个接一个地删除多个项目时，这将跳过必须加载编辑页面。