views:

42

answers:

1

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);
}
A: 

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>
tvanfosson
Seems like this would add a bit of complexity for what would normally be a simple ajax call to retrieve 20 lines or so of markup. Though it is a clever solution.
R0MANARMY
@ROMANARMY - I understood that this was the markup being returned via the partial; that the image ids are supplied to the partial and rendered as the image viewer. Of course, I've omitted the code that makes the view actually rotate through the images.
tvanfosson
Well yeah, btw, my name has a 0 (zero) in it instead of an O (mostly for future reference so I actually see messages directed at me).
R0MANARMY
@R0MANARMY - you know, it appeared that way to me but they must use different fonts for preview and display. When I type a 0 in the editor it has a slash through it so I assumed that even though it looked like a zero in the display, it couldn't be since the display does not have the slash. Perhaps, it's only my browser, though.
tvanfosson
No....it was that way in my browser too, you're not crazy.
R0MANARMY
I might end up rendering all the code and then hiding/showing in javascript... What I wanted was clean HTML though..
Max Malmgren