如何在我的ASP.Net MVC 5应用程序的同一页中进行编辑和删除POST请求

Question

我是ASP.Net MVC Web开发的初学者。 我被困在需要在同一页面中具有POST请求以进行EDIT和Delete Requests的地方。

行为：

我有一个页面，其中有许多以表格格式显示的行，现在我想为每一行都具有“删除”，“编辑”和“详细信息”按钮。 我已经成功地做到了。 但是我读到， we should never have a "GET" Request for Deleting and Editing资源。

问题：

我知道如何使用@Html.BeginForm(....FormMethod.POST,..)制作POST表单，但是我感到困惑，因为我有很多行，每一行都有“编辑”和“删除”。

以下是我的尝试：

父视图：

@model IEnumerable<Bridge.Models.Resume>
@using Bridge.ViewModels
<table class="table">
        foreach (var item in Model)
        {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.datetime)
                    </td>
                    @Html.Partial("_TableButtonsPartial", new SmallButtonViewModel
                   {
                       ResumeId = item.ResumeId
                   })
                </tr>
        }
</table>

TableButtonPartial视图：

@model Bridge.ViewModels.SmallButtonViewModel
@using Bridge.ViewModels

    <td style="width: 120px;">
        <div class="btn-group" role="group">
            @Html.Partial("_SmallButtonPartial",
                   new SmallButtonViewModel
                   {
                       Action = "Edit",
                       ButtonType = "btn-primary",
                       Glyph = "pencil",
                       Text = "Edit button",
                       ReferralId = Model.ReferralId,
                   })
            @Html.Partial("_SmallButtonPartial",
                  new SmallButtonViewModel
                  {
                      Action = "Details",
                      ButtonType = "btn-success",
                      Glyph = "list",
                      Text = "Detail button",
                      ResumeId = Model.ResumeId,
                  })
            @Html.Partial("_SmallButtonPartial",
                   new SmallButtonViewModel
                   {
                       Action = "Delete",
                       ButtonType = "btn-danger",
                       Glyph = "trash",
                       Text = "Delete button",
                       ResumeId = Model.ResumeId,
                   })
        </div>
</td>

SmallButtonPartial视图

@model Bridge.ViewModels.SmallButtonViewModel    
    <a type="button" class="btn @Model.ButtonType btn-sm"
         href="@Url.Action(Model.Action)@Model.ActionParameters">
           <span class="glyphicon glyphicon-@Model.Glyph">
        </span><span class="sr-only">@Model.Text</span>
    </a> 

SmallButton ViewModel

public class SmallButtonViewModel
{
    public string Action { get; set; }
    public string Text { get; set; }
    public string Glyph { get; set; }
    public string ButtonType { get; set; }
    public int? ResumeId { get; set; }
    public string ActionParameters
    {
        get
        {
            var param = new StringBuilder("?");
            if (ResumeId != null & ResumeId > 0)
                param.Append(string.Format("{0}={1}&", "resumeId", ResumeId));
            return param.ToString().Substring(0, param.Length - 1);
        }
    }
}

控制者

public FileContentResult Details(int? resumeId)
    {
        var temp = _context.Resumes.Where(f => f.ResumeId == resumeId).SingleOrDefault();
        var fileRes = new FileContentResult(temp.Content.ToArray(), temp.ContentType);
        fileRes.FileDownloadName = temp.FileName;

        return fileRes;
    }

// Todo: Need to make it a POST Request
public ActionResult Delete(int? resumeId)
{
    var r = _context.Resumes.Where(c => c.ResumeId == resumeId);
    _context.Resumes.RemoveRange(r);
    _context.SaveChanges();
    return RedirectToAction("ResumeCenter");
}

我的想法

• 我希望能够在SmallButtonView中执行以下操作 ：

  @model Bridge.ViewModels.SmallButtonViewModel @Html.BeginForm(..,FormMethod.POST,..) // but I am not sure how to achieve it?

Answer 1

首先，请使用HttpPostAttribute确保POST请求只能执行Delete操作：

[HttpPost]
public ActionResult Delete(int? resumeId)
{
    var r = _context.Resumes.Where(c => c.ResumeId == resumeId);
    _context.Resumes.RemoveRange(r);
    _context.SaveChanges();
    return RedirectToAction("ResumeCenter");
}

添加该属性后，任何尝试向该操作发出GET请求的尝试都将导致404（未找到）响应。

然后，替换为：

@Html.Partial("_SmallButtonPartial",
   new SmallButtonViewModel
   {
       Action = "Delete",
       ButtonType = "btn-danger",
       Glyph = "trash",
       Text = "Delete button",
       ResumeId = Model.ResumeId,
   })

与类似：

@using(Html.BeginForm("delete", "your controller name", FormMethod.Post, new { @class="delete-form" }))
{
    <input type="hidden" name="ResumeId" value="@Model.ResumeId" />
    <button type="submit" class="btn btn-danger">
        <span class="glyphicon glyphicon-trash"></span>
        Delete
    </button>
}

只要页面没有嵌套，您就可以在页面上拥有任意数量的表单-这会在每一行上生成一个表单。 我在这里添加了一个类（ delete-form ），如果您想通过AJAX处理此问题而不是允许表单提交，则可以使用该类来挂钩jQuery事件。

其他任何操作，如“查看”或“编辑”，仍将只是GET请求，您可以将其保留为锚，也可以使用将方法设置为GET的表单（最终结果是相同的）。