Hi. 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);
}