Ajax ActionLink

I had user control in MVC ASP.NET which list the comments for particular image. I had given delete link with every comment. Now i want to delete that comment using Ajax link. Please tell me how can I use Ajax?

This is my user control and I am calling controller action on delete link:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ListComment.ascx.cs" Inherits="gConnect.Views.Shared.ListComment" %>
<li>
            <div class="question-info">
                <div class="votes count"></span><span><% Response.Write("<img src=../../images/" + ViewData.Model.Logo_url.ToString() + " width=75 height=100 >");%> </div>

                <div class="views "><span><%= ViewData.Model.Username.Substring(ViewData.Model.Username.IndexOf("-")+1)     %></span></div>
                <div class ="deletem" ><span><%= Ajax.ActionLink("Delete", "DeleteComment/" + ViewData.Model.Username.Substring(0, 2) + "." + ViewData.Model.Id, new AjaxOptions(UpdateTargetId = "comments"))%></span></div>
                <div class="question">
                    <h3 class="title"><%= Html.Encode(ViewData.Model.Comment  )%></h3>
                </div>
            </div>
        </li>

Use an Update Panel. It will capture the post back from your delete link and asyncronously reload the content.

Take a look at http://www.asp.net/ajax/documentation/live/Tutorials/CreatingPageUpdatePanel.aspx for an example.

Hope that helps.

Gavin

First, make sure that your delete link posts a form. Your question is not clear about this, but since you say that you are using a delete link I am guessing that you are doing this with a GET. Actions that modify resources should be done via POST, not GET.

Once you've done that, you can use the jQuery AJAX form plug-in to do the post via AJAX. It's quite simple, and once you have a working form to do that delete, you will find converting its to use the AJAX plug-in to submit the form instead very straightforward. Just follow the examples on the site.

Use jQuery:

<script type="text/javascript">
    function deleteComment(id) {
        $.post(
            "/MyController/DeleteAction",
            { id : id }
            function (data) {
                // do some gui updates
            });
     }
</script>

And use in a link:

<a onclick="deleteComment(<%= CommentId %>); return false;" href="#">Delete</a>