Using Ajax in .Net MVC 2

Question

Okay, so right now I'm trying to call an Ajax function from a normal text link, however I cannot get it to work properly(or at all). If I call it form a button, it will work fine.

Essentially I'm trying to reorder the items in a table.

how can I call Ajax from an ActionLink or Ajax?

Here is the script that works fine when called from a button:

<script type="text/javascript">

        $(document).ready(function() {

            $(".Name").click(function() {
                $.ajax({
                    url: '<%= Url.Action("MyAction") %>',
                    dataType: 'html',
                    success: function(result) { $("#tableToUpdate").html(result); }
                });
            });
        });
</script>

Answer 1

You need to cancel the default action of the anchor by returning false from the click handler;

$(".Name").click(function() {
    $.ajax({
        url: '<%= Url.Action("MyAction") %>',
        dataType: 'html',
        success: function(result) { 
            $("#tableToUpdate").html(result); 
        }
    });
    return false; // <-- that's important
});

But I would probably directly use the href of the link:

<%= Html.ActionLink("Foo", "MyAction", null, new { @class = "Name" }) %>

which I would unobtrusively AJAXify in a separate javascript file (progressive enhancement):

$(function() {
    $('.Name').click(function() {
        $('#tableToUpdate').load(this.href);
        return false;
    });
});