Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <pre><code>[HttpPost] public PartialViewResult DisplayGalleryThumbs(string galleryId) { int pageNumber = Convert.ToInt32(galleryId.Split('_')[2]); Guid feedId = new Guid(galleryId.Split('_')[1]); var images = _feedDomain.ShowPostById(feedId.ToString()).Images; int totalNumberOfPages = CountNumberOfPages(images); string action = galleryId.Split('_')[3]; var dict = new Dictionary&lt;int, List&lt;FeedImage&gt;&gt;(); var pagedImages = new List&lt;FeedImage&gt;(); int i = 1; int a = 1; foreach (FeedImage image in images) { pagedImages.Add(image); if (i % NumberOfImagesPerPage == 0) { dict.Add(a, pagedImages); a++; pagedImages=new List&lt;FeedImage&gt;(); } if (i &gt;= images.Count()) dict.Add(a, pagedImages); i++; } if (action=="next") { pageNumber += 1; } else { pageNumber -= 1; } var galleryModel = new FeedThumbGalleryModel { Images = dict.FirstOrDefault(c =&gt; c.Key == pageNumber).Value, FeedId = feedId, PageNumber = pageNumber, NumberOfPages = totalNumberOfPages, NumberOfImagesPerPage = NumberOfImagesPerPage, TotalNumberOfImages = images.Count() }; return PartialView("~/Views/Feed/_DisplayGalleryThumbs.cshtml", galleryModel); } @helper Render(FeedThumbGalleryModel model) </code></pre> <p>{</p> <pre><code>if (model.Images != null) { string linkNext = "linkNext_" + model.FeedId + "_" + model.PageNumber + "_next"; string linkPrev = "linkPrev_" + model.FeedId + "_" + model.PageNumber + "_prev"; string thumbFeedId = "feedThumbDiv_" + model.FeedId; &lt;div id="@thumbFeedId"&gt; &lt;table&gt; &lt;tr&gt; &lt;td style="width: 30px;vertical-align: top;"&gt; @if (model.NumberOfPages &gt; 1) { if (model.PageNumber &lt;= model.NumberOfPages &amp;&amp; model.PageNumber &gt; 1 || model.PageNumber == model.NumberOfPages) { &lt;a class="page-action" href="#" id="@linkPrev"&gt;Prev&lt;/a&gt; } } &lt;/td&gt; &lt;td style="width: 120px;vertical-align: top"&gt; @if (model.NumberOfPages&gt;1) { for (int a = 1; a &lt;= model.NumberOfPages; a++) { int currentPage = a - 1; string pageLink = "linkNext_" + model.FeedId + "_" + currentPage + "_next"; string classname = a==model.PageNumber ? "page-number-list" : "page-number-list1"; &lt;a href="#" id="@pageLink" class="@classname"&gt;@a&lt;/a&gt; } } &lt;/td&gt; &lt;td style="width: 220px;vertical-align: top;"&gt; @if (model.PageNumber &lt; model.NumberOfPages) { &lt;a class="page-action" href="#" id="@linkNext"&gt;Next&lt;/a&gt; } &lt;/td&gt; &lt;td style="width: 150px;vertical-align: top;"&gt; @{var thisId = "SeeAll_" + model.FeedId;} @if (model.TotalNumberOfImages &gt; 12) { &lt;a id="@thisId" class="view-all"&gt;View All&lt;/a&gt; } &lt;/td&gt; &lt;td style="vertical-align: top"&gt; &lt;div class="number-of-images"&gt; @model.TotalNumberOfImages images &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="5"&gt; &lt;div style="width: 660px;padding-top: 10px"&gt; @{int i = 1;} @foreach (FeedImage m in model.Images) { string thumbThumb = ConfigurationManager.AppSettings["DisplayThumbPath"] + m.ImageId; string imageUrl = "/feed/DisplayImage/" + model.FeedId + "_" + m.ImageId; &lt;div class="thumbnail image"&gt; &lt;a class='show-image' href="@imageUrl"&gt; &lt;img border="0" class="image" src="@thumbThumb" width="125" height="125" alt="" /&gt; &lt;/a&gt; &lt;/div&gt; if (i % model.NumberOfImagesPerPage == 0) { break; } i++; } &lt;br/&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; } </code></pre> <p>}</p> <pre><code>public class FeedImage { public Guid ImageId { get; set; } public string ImageUrl { get; set; } public string ImageName { get; set; } public double ImageSize { get; set; } public string FileExtension { get; set; } public string ImageType { get; set; } public FeedPost Post { get; set; } public List&lt;FeedLike&gt; Likes { get; set; } public List&lt;FeedComment&gt; Comments { get; set; } public DateTime DateCreated { get; set; } public string DateCreatedIso8601 { get; set; } } private int CountNumberOfPages(List&lt;FeedImage&gt; images) { if (images == null) return 0; return (images.Count() + NumberOfImagesPerPage - 1) / NumberOfImagesPerPage; } $("[class='page-action']").live('click', function () { var feedArr = $(this).attr('id').split('_'); var thisDivId = '#feedThumbDiv_' + feedArr[1]; $.post('/Feed/DisplayGalleryThumbs', { galleryId: $(this).attr('id') }, function (html) { $(thisDivId).replaceWith(html); }); return false; }); </code></pre> <p>This is an ajax solution for thumbnail paging preview using MVC3. Im using this for my news feed to list through image gallery. Dont mind heavy use of tables in the view, my UI is a bit limited.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload