Question

I’ve got a page that contains multiple links. These links should do an ajax post and callback. However, the link is doing a Get instead of a Post. This causes a 404 error since I do not have an action method to handle a get at the requested URL.

If I remove the HTTPPost attribute from my Action method, the link works, but the call back fails and the Json I return is rendered in a new page.

Here is the code I’m using in my view.

<td id="[e-mail]">@Ajax.ActionLink("Add", "AddToOrder", new { itemID = item.ItemID }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "actionCompleted" }, new { id = "add-" + item.ItemID })</td>

This ends up adding this HTML:

 <td id="action-012679"><a data-ajax="true" data-ajax-method="POST" data-ajax-success="actionCompleted" href="/mysite/neworder/AddToOrder?itemID=012679" id="add-012679">Add to Order</a></td>

My Controller has the following Action Method.

[HttpPost]
public JsonResult AddToOrder(string itemID) {
    return Json(new { id = itemID, Action = "Added", "Just getting this working"});
}

My callback method that is called on Success looks like this:

<script language="javascript" type="text/javascript">        
    function actionCompleted(response, status, data) {
        alert("We have returned");
    }

</script>

If I change the [HTTPPost] attribute on my action method to [HTTPGet] I get an Json error. I can fix this by adding the JsonRequestBehavior.AllowGet to my return value, but this doesn’t use the call back function defined on the page and fails.

Any help would be appreciated.

Answer 1

Probably you don’t have jquery.unobtrusive-ajax.js script attached to page and link is gracefully degraded to regular anchor.