asp.net mvc : Ajax actionlink or Jquery solution?

Question

Im trying to change images on click similar to what SO does with the vote arrows and checkmark.

Im thinking either to :

1- Have each image be an Ajax.ActionLink and return a different image when clicked.

2- Have the images be the background of a Hyperlink and use Ajax.ActionLink to replace the css class to get a new image.

3- Use JQuery instead.

WHich is best way to go and can you provide examples?

Answer 1

jquery is the best because if you use the actionlink in asp.net-mvc then you would have to handle a link for each image clicked(Action Method) which can get complicated down the line.

in jquery you have something like this that can minimize the difficulty

 $(document).ready(function() {
       //image is the name of the class of your images
     $(".image").click(function() {

     $(".image").hide(); //just an example..
        });
 }) ;

this will hide that image that is clicked..refer to jquery tutorials to get the image to do exactly what you want to do on click..either add a css to the image or change enlarge it or whatever..Keep in mund that since you are using asp.net that if you use the asp web controls and want to call the id in jquery instead of the class then it is a little different.without asp web controls it would be this way to call the id:

  ("#image1").click(function() {

but using an asp web control like asp:imagebutton it would be something like this:

   ("#ct100_******image1").click(function() {

the asterisks can be anything..you would have to view the source code first to see what the actual id name that is rendered,because asp.net changes controls id name for the ones that you set the attribute to runat=Server and by default you have to set runat=server for asp web controls to compile

Answer 2

Use jQuery. On click, perform the ajax call and toggle the class.