14

考虑以下标记：

<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" />
}

我希望Delete按钮与Edit. 但是，它并没有让我有嵌套的表单。处理这种情况的适当方法是什么？

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

4

7 回答 7

17

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

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

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

于 2013-07-15T20:11:58.050 回答
15

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

<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 请求
  • 编辑按钮下方的删除按钮，当您在允许您编辑某些内容的视图上时更有意义。
于 2013-07-15T20:25:14.517 回答
2

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

于 2013-07-16T05:59:26.583 回答
1

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

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

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

更新

还有第三种选择，更简洁：使用两个具有相同名称属性和不同值的提交按钮。

您的表单将有两个按钮：

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

有关更多详细信息，请查看此答案：https ://stackoverflow.com/a/443047/439427

于 2013-07-15T20:08:41.900 回答
0

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

我认为大多数浏览器都支持这个，除了 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 样式。

于 2015-03-06T16:30:03.833 回答
0

这样做但仍然适用的旧方法是使用一个表单标签并使用多个提交按钮更改操作。

<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';" />
于 2019-05-30T15:19:03.190 回答
-1

编辑：这是使用 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 对话框进行确认。如果/当您想要一个接一个地删除多个项目时，这将跳过加载编辑页面。

于 2013-07-15T20:04:53.337 回答