html - How can I refresh a list of images in a partialview when one of the images is clicked? -

i have partial view contained on webpage loads number of thumbnail images in set order. when thumbnail clicked want reload list clicked thumbnail becoming first image followed rest of list in order, without reloading rest of webpage.

my partialview contains following code loads thumbnails , assigns each url.action.

<% foreach (var image in (imagemodel)viewdata.model) { %>     <a href='<%= url.action("imagelist", "imageview", new { imagefoldername = image.folder, imagefile = imagehelper.getimagename(image.path) }, null) %>'>     <img src="/images/<%= image.path %>" height="<%=(image.height/4).tostring() %>" width="<%=(image.width/4).tostring() %>" alt=""  /></a> <% }%> 

my controller has actionresult loading partial view when containing page loaded. included method returning partialviewresult.

public class imageviewcontroller : controller

    public actionresult imageview(string imagefoldername, string imagefile)     {         return view(new imagemodel(imagefoldername, imagefile));     }      public partialviewresult imagelist(string imagefoldername, string imagefile)     {         return partialview(new imagemodel(imagefoldername, imagefile));     } 

if set url.action ("imagelist", "imagelist"... thumbnails refreshed way want, whole page refreshed instead of partial view.

when set url.action ("imagelist", "imageview"... instead of partial view of containing page getting refreshed, containing page gone , partial page loaded without it. is, see thumbnails in correct order on blank white web page.

i'm noob , haven't been able make sense of jquery or ajax q , partialviews in way apply scenario.

what controller method returns partialview if loads new webpage instead of refreshing partial view within containing page?

and, there documentation or explanation show how can done?

links in general cause whole page refresh, you'll need use ajax refresh part of page.

i go doing following:

this same code, changes here calls original imageview action. , added css class called image. added div surrounding images (probably have that) , called allmypics

<div id="allmypics"> <% foreach (var image in (imagemodel)viewdata.model) { %>     <a class="image" href='<%= url.action("imageview", "imageview", new { imagefoldername = image.folder, imagefile = imagehelper.getimagename(image.path) }, null) %>'>     <img src="/images/<%= image.path %>" height="<%=(image.height/4).tostring() %>" width="<%=(image.width/4).tostring() %>" alt=""  /></a> <% }%> </div> 

now you'll have use jquery hook click event.

<script type="javascript">     //use live method listen future clicks     $('a.image').live('click', function(e) {         e.preventdefault(); // prevent following link         $('#allmypics').load($(this).attr('href')); // load result of link 'allmypics' element. use href attribute of link address.     } ); </script>  

i added comments understand.

now have change action:

public actionresult imageview(string imagefoldername, string imagefile) {     if (request.isajaxrequest())         return partialview(new imagemodel(imagefoldername, imagefile));     else         return view(new imagemodel(imagefoldername, imagefile)); }  

the controller knows if ajax request, if is, return partial view (don't forget rename imagelist.ascx imageview.ascx), otherwise return whole page.

now work if browser doesn't support javascript (it follow link normally)

i didn't test there might syntax errors.