views:

25

answers:

1

I'm having a bit of trouble using AJAX action links. Whenever a link is clicked, the UpdateTargetID container is not updated unless the link is clicked twice (which throws an exception on the 2nd click, since the item has already been deleted; after this exception, the page updates).

Also, on the first update, the entire page is reloaded into itself, sort of like an iframe. I have a simple 3 column layout (header, left menu, right content) and the entire web page gets re-rendered in the right content portion. But only once. Subsequent action link clicks do not recursively render the page in itself.

I'm using the following code for an AJAX image link (found here: http://stackoverflow.com/questions/341649/asp-net-mvc-ajax-actionlink-with-image):

 public static class ImageActionLinkHelper
{
    public static string ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions)
    {
        var builder = new TagBuilder("img");
        builder.MergeAttribute("src", imageUrl);
        builder.MergeAttribute("alt", altText);
        var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions);
        return link.ToString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing));
    }
}

This is my action link in .aspx:

<%= Ajax.ImageActionLink("../../content/imgs/delete_icon.png", "Delete error", "Delete", new { id = new Guid(item.ErrorId.ToString()) }, new AjaxOptions { Confirm = "Delete?", UpdateTargetId="errors" }) %>

"errors" is my id to update

        [HttpPost]
        public ActionResult Delete(Guid id)
    {
        var error = db.ELMAH_Error.FirstOrDefault(x => x.ErrorId == id);

        db.DeleteObject(error);
        db.SaveChanges();

        return PartialView();
    }
A: 

You seem to be rendering the whole view. As a result invalid markup would be generated - duplicate body tags etc. Use partial views instead when dealing with Ajax scenarios.

korchev
Thanks, looked into implementing partials. This did fix the duplication issue (now using return PartialView() in controller instead of RedirectToAction), however the page doesn't update asynchronously. The delete does happen asynchronously, though, it just isn't visually reflected. Any ideas on that?
bowlingforfish