HTML.ActionLink to Controller using Ajax to prevent postback

Question

Here is the ASP MVC code in my view. It fires off to the controller and passes assetId and relationshipContext:

 @Html.ActionLink("Archive", "Archive", new { assetId = Model.ID, relationshipContext = assetTypeRelation.RelationshipContextID }, new { @class = "btn btn-mini btn-warning", id = "btnArchive" })

I am wanting to utilize Ajax with this HTML.ActionLink, but am a bit confused. Here is the jQuery I have started with. Basically I just need this actionlink to pass assetId and relationshipContext to the Archive method in my assetcontroller.

$('#btnArchive').click(function(){
                  $.ajax({
                      url: '@Url.Action("Archive", "Archive")',
                      type: 'POST',
                      dataType: 'json',
                      data: {
                          assetId: $(this).attr("assetId"),
                          relationshipContext: $(this).attr("relationshipContext"),
                      },
                      success: function(){
                          alert("success")
                      },
                      error: function () {
                          alert("error")
                      },

                  });

I didn't recognize that language at the top. I did a Google search and found it was part of asp.net, specifically the mvc part. I added the asp.net-mvc tag, but you might want to add a bit of explanation to the code. — Joshua Dwire, Feb 28 '13 at 21:31
Thanks for adding the additional tag, I updated the body of my question. — einsteinix, Feb 28 '13 at 21:36

score 1 · Answer 1 · answered Feb 28 '13 at 21:41

1

have a look at @Ajax.ActionLink

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx

answered Feb 28 '13 at 21:41

Peter

7,792
9
63
94

score 0 · Answer 2 · answered Feb 28 '13 at 22:13

What does your AssetController action method look like? I should look something like:

[HttpPost]
public ActionResult Archive(int assetId, string relationshipContext)
{
     //do some work
     return Content("true");
}

Also, you are calling the wrong Controller in the @Url.Action call. Your View code might need to be changed to

$('#btnArchive').click(function(){
                  $.ajax({
                      url: '@Url.Action("Archive", "Asset")',
                      type: 'POST',
                      dataType: 'json',
                      data: {
                          assetId: $(this).attr("assetId"),
                          relationshipContext: $(this).attr("relationshipContext"),
                      },
                      success: function(data){
                          alert(data)
                      },
                      error: function () {
                          alert("error")
                      },

                  });

HTML.ActionLink to Controller using Ajax to prevent postback

2 Answers2