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

时间:2017-09-06 02:41:58

标签: c# asp.net asp.net-mvc razor asp.net-mvc-5

我是ASP.Net MVC Web开发的初学者。我被困在一个地方,我需要在同一页面上有编辑请求和编辑和删除请求。

行为:

我有一个页面,其中有许多行以表格格式显示,现在每行我想要“删除”,“编辑”和“详细信息”按钮。我成功地做到了。但我读到了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 View

@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?

1 个答案:

答案 0 :(得分:3)

首先要确保只有POST请求才能使用HttpPostAttribute来访问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),您可以使用它来挂钩到jQuery事件,如果您想通过AJAX处理它而不是允许表单提交。

任何其他行动,例如&#34;查看&#34;或&#34;编辑&#34;,仍然只是GET请求,您可以将其保留为锚点,或使用方法设置为GET的表单(最终结果相同)。