CODEWITHSUNDEEP
asp.net-mvcjqueryactionlink
msfanboy
msfanboy

Reputation: 5291

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

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>

Upvotes: 3

Views: 5097

Answers (2)

Evan Davis
Evan Davis

Reputation: 36592

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.

Upvotes: 3

arb
arb

Reputation: 7863

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.

Upvotes: 0

Related Questions