Question

I am trying to create a partial view I call ImageViewer. It will be called supplying a list of image ids (simplified). I then want to return this partial view, something like

imagecontroller.ImageViewer(new int[] { 5, 6, 7 }); 

yields the following:

<div>
  <img grayuparrow />
  <img source="image/getimage5" />
  <img blackdownarrow />
</div>

Clicking the downarrow then uses jQuery to access the next image (6 in this example). I should have no problem using jQuery to get the image, but how do I store information in the DOM from a PartialView? I want to store the list supplied to the action method, and the current index.

Or should I consider completely different ways to achieve this scroll image viewer?

UPDATE:

I guess what I am asking is, is there any way to annotate an element in the DOM with extra data from an MVC view?

right now I’ve got this code:

<script type="text/javascript">
   $(document).ready(function() {
    var images = [];
    <% foreach(ImageGroup group in Model)
    { %>
    images.push(imageGroup(<%= group.Description %>, [<%= Html.FormatArgs(group.ImageIDs) %> ])); 
<% } %>
    setImageGroups(images, $(".imageviewer"));
   }
</script>

imageGroup is a javascript function that returns an imageGroup object.

Which should work, but is not in any way clean. Is there some way to easily translate .Net objects to javascript objects, or annotate a DOM element with extra data?

function setImageGroups(imagegroups, element) {
$(element).data("imageGroups", imagegroups);
$(element).data("imageIndex", 0);
$(element).children(".upnav").click(previousImageGroup);
$(element).children(".downnav").click(nextImageGroup);
renderImageGroup(element);
}

Answer 1

Why not consider letting your partial view render the code for all the images, but with only one visible? Or, if loading time is an issue, you could simply store the urls in a javascript array and rotate through them.

 <div>
    <img src="<%= Url.Content( "~/content/images/grayuparrow.png" ) %>" />
    <%  var display = true;
        foreach (int id in Model.ImageIDs)
        { %>
            <img src="<%= Url.Action( "get", "image", new { id = id } ) %>"
            <%= !display ? "style='display: none;' : "" %>
             />
    <%     display = false;
        } %>
    <img src="<%= Url.Content( "~/content/images/blackdownarror.png" ) %>" />
</div>

or

 <script type="text/javascript">
      var images = [];
      var currentImage = 0;
      <% foreach (int id in Model.ImageIDs)
         {  %>
             images.push( '<%= Url.Action( "get", "image", new { id = id } ) %>' );
      <% } %>
 </script>
 <div>
    <img src="<%= Url.Content( "~/content/images/grayuparrow.png" ) %>" />
    <img src="<%= Url.Action( "get", "image", new { id = Model.ImageIDs.First() } ) %>" />
    <img src="<%= Url.Content( "~/content/images/blackdownarror.png" ) %>" />
</div>