Cannot Delete with [HttpPost] in MVC4

Question

when I define my Delete method below with [HttpPost], the Delete method cannot be called from the View. However, when deleting [HttpPost] line, it works normally. I tried lots of the things and actually it may be related to wrong usage of @Html.Hidden or @using (Html.BeginForm() in my View. So, could you please clarify me about these points below?

1) I do not open a View after clicking delete button on my WebGrid. After a confirmation method the Delete method in the Controller should be called and the record should be deleted by staying on the same page.So, is it wrong not using [HttpPost] for my Delete method below?

2) If it is possible, how should I do in order to use [HttpPost] for the Delete method? Which changes do I have to do on my View i.e. using form or hidden property?

View:

@model IEnumerable<MyProject.Domain.Entities.Applicant>
@using PRMeetingReg.WebUI.HtmlHelpers

@{
    var grid = new System.Web.Helpers.WebGrid(
        source: Model,
        columnNames: new List<string>() { "Title" },
        ajaxUpdateContainerId: "myGrid",
        defaultSort: "Name",
        canPage: true,
        canSort: true,
        rowsPerPage: 5
        );
    grid.SortDirection = SortDirection.Ascending;
}

<div class="Grid">
    @grid.GetHtml(
          tableStyle: "table", 
          headerStyle: "webgrid-header",
          footerStyle: "webgrid-footer", 
          rowStyle: "webgrid-row-style",
          alternatingRowStyle: "webgrid-alternating-row",
          selectedRowStyle: "webgrid-selected-row",
   firstText: "<<",
   lastText: ">>",
   mode: WebGridPagerModes.All,
   fillEmptyRows: true,
   numericLinksCount: 5,

   columns: grid.Columns(
    grid.Column("ApplicantID", "No", canSort: true),
    grid.Column("Name", "Name", canSort: true),
    grid.Column("Surname", "Surname", canSort: true),

    //for using multiple Html.ActionLink in a column using Webgrid
    grid.Column("Actions", format: (item) =>
     new HtmlString(
          @Html.ActionImage("../../Content/icons/detail.png", "Detail", "icon-link", "Detail", "Admin", new { applicantId= item.ApplicantID }).ToString() +
          @Html.ActionImage("../../Content/icons/edit.png", "Edit", "icon-link", "Edit", "Admin", new { applicantId= item.ApplicantID }).ToString() +
          @Html.ActionImage("../../Content/icons/delete.png", "Delete", "icon-link", "Delete", "Admin", new { applicantId= item.ApplicantID }).ToString()
     )
    )
    )
    )


<p>
    <input id="add" type="submit" value="Yeni Ekle" class="button" />   
</p>

</div>

Controller:

[HttpPost]
public ActionResult Delete(int applicantId)
{
    Applicant deletedApplicant = repository.DeleteApplicant(applicantId);
    if (deletedApplicant != null)
    {
        TempData["message"] = string.Format("{0} was deleted",
        deletedApplicant.Name);
    }
    return RedirectToAction("Index");
}

My HTML Helper:

public static MvcHtmlString ActionImage(this HtmlHelper html, string imagePath, string alt, string cssClass,
       string action, string controllerName, object routeValues)
{
    var currentUrl = new UrlHelper(html.ViewContext.RequestContext);
    var imgTagBuilder = new TagBuilder("img"); 
    imgTagBuilder.MergeAttribute("src", currentUrl.Content(imagePath));
    imgTagBuilder.MergeAttribute("title", alt);
    imgTagBuilder.MergeAttribute("class", cssClass);
    string imgHtml = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
    var anchorTagBuilder = new TagBuilder("a"); 
    anchorTagBuilder.MergeAttribute("href", currentUrl.Action(action, controllerName, routeValues));
    anchorTagBuilder.InnerHtml = imgHtml; 
    string anchorHtml = anchorTagBuilder.ToString(TagRenderMode.Normal);
    return MvcHtmlString.Create(anchorHtml);
}

Thanks in advance.

Answer 1

Your ActionImage custom helper generates an image containing an anchor tag inside (<a>). In HTML an anchor sends GET request. Your controller action is decorated with the HttpPost request which explains why it is never called.

One possibility to make this work is to use an AJAX request and perform a POST request instead of GET when clicking on the Delete link.