Question

我正在尝试创建一个名为ImageViewer的局部视图。它将被称为提供图像ID列表（简化）。然后我想返回这个局部视图，比如

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

产生以下结果：

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

单击downarrow然后使用jQuery访问下一个图像（本例中为6）。我应该没有问题使用jQuery来获取图像，但是如何从PartialView中存储DOM中的信息？我想存储提供给action方法的列表和当前索引。

或者我应该考虑使用完全不同的方法来实现此滚动图像查看器吗？

更新：

我想我要问的是，有没有办法用MVC视图中的额外数据来注释DOM中的元素？

现在我已经有了这段代码：

<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是一个返回imageGroup对象的javascript函数。

哪个应该有效，但绝不干净。有没有办法轻松地将.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>

通过.Net MVC 2中的Jquery提供数据

1 个答案: