Rewrite an asp.net mvc ajax actionlink as a jquery/ajax statement

Question

How would you rewrite this statement using Jquery + Ajax only? This code displays a link. When I click on it a view is returned into the StuffPanel id.

@{ AjaxOptions options = new AjaxOptions
           {
               InsertionMode = InsertionMode.Replace,
               UpdateTargetId = "StuffPanel",
               OnBegin = "OnBeginWork",
               OnComplete = "OnCompleteWork",
           };}
<p>@Ajax.ActionLink("show stuff", "Index", "Stuff", options)</p>

Evan Davis · Accepted Answer · 2012-04-30T21:14:48.407

3

Here you go:

<a href="/Index/Stuff" id="action">show stuff</a>

$(function() {
    $('#action').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            beforeSend: OnBeginWork,
            complete: OnCompleteWork,
            success: function(html) {
                $('#StuffPanel').html(html);
            }
        });
    });
});

I'd recommend you keep the actionLink as all it's doing is getting the correct routing for you. Add an ID to it so that you can bind the click event easier, and then use the click event callback to fire the ajax call. Use the success function to replace the contents of #StuffPanel with the response.

edited Apr 30 '12 at 21:14

answered Apr 30 '12 at 20:01

Evan Davis

35,493
6
50
57

If I keep the Ajax.ActionLink why should I add an Id ? to fire the ajax call? its already an Ajax Link... – msfanboy Apr 30 '12 at 20:11
Sorry, I meant you should replace it with a standard action link: `@Html.Action("show stuff", "Index", "Stuff", new { @id = "action" })` – Evan Davis Apr 30 '12 at 20:20
Do you think there is a reason to favor the Html.ActionLink over your – msfanboy Apr 30 '12 at 20:33
Yes, because it gives you a properly-routed, application-relative link every time. Slightly less maintenance/stuff to think about. If you don't want to use it, by all means, don't. I find it helpful, YMMV. – Evan Davis Apr 30 '12 at 20:37
please correct the $(this).href(); in your solution because I get en error. it should be called url: this.href, more is not needed! – msfanboy Apr 30 '12 at 20:56
@msfanboy it should actually be `$(this).attr('href')` in jQuery. `this.href` will fetch the absolute URL; `$(this).attr('href')` will fetch the contents of the href attribute (in this case either one is likely OK.) – Evan Davis Apr 30 '12 at 21:15
ah yes absolute url should be avoided. Since I do not use Ajax.ActionLink anymore I experience 2 new problems in my code which I have to solve in a new post. Thanks for all. – msfanboy Apr 30 '12 at 21:45

arb · Answer 2 · 2012-04-30T20:07:43.507

Based on the limited amount of information you have provided, something like this should get you going in the right direction:

$(function(){   
    $('#id-to-link').on('click',function(e){
        e.preventDefault();
        $.ajax('Index/Stuff',{
            type: 'POST',
            data: '{}',
            dataType: 'html',
            contentType: 'application/json; charset=utf-8',
            success: function(data){
                $('#StuffPanel').html(data);
            }
        });
    });
}

You'll have to check the data variable in the success callback. The HTML from the view will either be in data or in some property of data like data.d or data.message or something similar. Also, you should give your link a unique ID so you can bind your click event to it easily.

Rewrite an asp.net mvc ajax actionlink as a jquery/ajax statement

2 Answers2

Linked