Ajaxing a link in a table

I have a table of results in an ASP.Net MVC page where the last column is an View Details link. I want to have the user click the View Details link and an AJAX method be called to open the results in floating dialog.

What I am struggling with is how to link the AJAX call to the link in the results table. I was using a link which embedded the ~/ControllerName/ViewDetails/InstanceId link directly in it. Clicking it t开发者_高级运维ook the user to a new page and it is this behaviour I want to replace with an AJAX call and a dialog window.

Now I want to attach a jQuery handler to the link to trigger the AJAX call and I can't see how to do this other than write an jQuery handler for each row in the results table. There must be a way to mark the link as an ViewDetails link (using a class?) and attach the jQuery click handler to all instances of type class ViewDetails.

Give all the links the same class.

$(".classname").click(function(){
    // use selectors like $(this).prev(), $(this).next(), $(this).parent() to get data from the particular row for in your ajax call.
});

You must use the jQuery class selector.

-- Style the rows with the same CSS class name, ex. '.myDetailCol' and then in Jquery you can bind their click event.

Now since you're going to have Rows, you'll need an identifier that recognizes which row it is. To do that you can either store some info in the ID attr and use it.

$('.myDetailCol').click(function(){
 var id = $(this).attr('id');

 $.post('myUrl', {myID: id}, function(result){
   //Show your data in the box
 });
});

There are other options too. Sometimes you might want to add a prefix to your id to make it different from the rest of the content.

Since you're using ASP.Net MVC you can easily return the data in either HTML (contentresult) or JSON (JsonResult) and consume it using Javascript.