calling javascript function for ajax.actionlink

Question

I have the following ajax.actionlink. i want to add click event to this actionlink. How can i do that

<%= Ajax.ActionLink("text", "textaction", new { param = 1}, new AjaxOptions
                            {                                   
                                OnSuccess = "updatePlaceholder",                                
                                UpdateTargetId = "result"
                            })%>

Darin Dimitrov · Accepted Answer · 2011-05-30 13:08:40Z

5

The click event handler is already added to this link because you are using the Ajax.ActionLink helper method. This click event handler will cancel the default action and send an AJAX request to the address this link is pointing to. You may try setting the OnBegin option.

And if you use jquery in your project you could have a normal link (without all the javascript added to your markup by the Ajax.ActionLink helper):

<%= Html.ActionLink(
    "text", 
    "textaction",
    new { param = 1 },
    new { id = "mylink" })
%>

and then in a separate javascript file attach the click event handler:

$(function() {
    $('#mylink').click(function() {
        // here you could execute some custom code
        // before sending the AJAX request
        $('#result').load(this.href, function() {
            // success function
        });
        return false;
    });
});

This way will achieve a clear separation between your markup and javascript files. As javascript will be in separate files which will be cached by client browser you will reduce bandwidth.

edited May 30, 2011 at 13:08

answered Oct 1, 2010 at 9:57

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hector Correa Over a year ago

If you are interested, I've got a full example on how wire the click event of the link with jQuery (as Darin is suggested) in my blog: hectorcorrea.com/Blog/…

Zohaib Over a year ago

The above mentioned solution of ActionLink + jQuery is not working with me. It always navigate to the page and jQuery doesn't handle it properly. Any guess?

Darin Dimitrov Over a year ago

@Zohaib, in my original answer I forgot to cancel the default action of the link by returning false from the click callback. I've updated it to fix the problem.

rosta · Accepted Answer · 2015-05-26 05:11:20Z

0

You need to change the code:

$('#mylink').click(function(e) { e.preventDefault(); ....do what ever you want

answered May 26, 2015 at 5:11

rosta

9077 silver badges2 bronze badges

Collectives™ on Stack Overflow

calling javascript function for ajax.actionlink

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related