Предоставить данные доступны через Jquery в .Net MVC 2

Question

Я пытаюсь создать частичное представление, которое я называю ImageViewer.Это будет называться предоставление списка идентификаторов изображений (упрощенно).Затем я хочу вернуть это частичное представление, что-то вроде

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

дает следующее:

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

Нажатие вниз, затем использует jQuery для доступа к следующему изображению (6 в этом примере),У меня не должно возникнуть проблем с использованием jQuery для получения изображения, но как мне сохранить информацию в DOM из PartialView?Я хочу сохранить список, предоставленный методу действия, и текущий индекс.

Или мне следует рассмотреть совершенно другие способы создания этого средства просмотра изображений с прокруткой?

ОБНОВЛЕНИЕ:

Я предполагаю, что я спрашиваю: есть ли способ аннотировать элемент в DOM дополнительными данными из представления MVC?

сейчас у меня есть этот код:

<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 - это функция javascript, которая возвращает объект imageGroup.

Что должно сработать, но никак не чисто.Есть ли способ легко преобразовать объекты .Net в объекты javascript или аннотировать элемент DOM дополнительными данными?

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

Почему бы не рассмотреть возможность частичного просмотра для отображения кода для всех изображений, но только с одним видимым?Или, если время загрузки является проблемой, вы можете просто сохранить URL-адреса в массиве javascript и поворачивать их.

 <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>

или

 <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>