如何在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對話框進行確認。 如果/當您想要一個接一個地刪除多個項目時，這將跳過必須加載編輯頁面。