Shared Views

You will need a couple of files in the Views/shared folder

· _Layout.cshtml

· _PhotosPartial.cshtml

_Layout.cshtml

This is your own layout page. This is typically generated when you create a new MVC application and you craft it to your needs.

One thing you do need to do, otherwise the autocomplete jquery will break is to enclose RenderBody with a section that has the same classes as this…

@RenderBody()

</section>

_PhotosPartial.cshtml

This is nested inside Photos/Index.cshtml inheriting the PhotoListViewModel which it iterates through to display photo items in rows and columns using bootstrap.

Refer to the source code for details. Here are some details to take on board

A photo item displays the medium resolution version of the image file with some clickable icons below.
Photo items are arranged in (bootstrap) rows three columns wide - so are responsive when the screen is resized
If you click on an image another (larger version) of the file pops up inside a modal window
The icons allow you to zoom, see details, or inspect metadata. If the user is in admin role they can also edit or delete
The JavaScript at the bottom of the page adds the modal functionality and truncates the description text to a value you can set
Everything inside the div with the id downloadlist is replaced from an Ajax call from search. Do not remove it!
The paged list control displays as classic first and last. You can change the style with PagedListRenderOptions refer to PagedList documentation

@using PagedList.Mvc

@using PagedList

@model IPagedList<Ben.Models.PhotoListViewModel>

@*Do not edit this tag, or the Ajax paging will break*@

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, currentFilter = ViewBag.CurrentFilter, sortOrder = ViewBag.sortOrder }),

PagedListRenderOptions.ClassicPlusFirstAndLast)

</div>

@*Do not edit this tag, or the Ajax paging will break*@

<tr>

<td>

int currentitemnumber = 0; // track the current item number to close the row div

int columncount = 3; // the number of columns you want to display per row

}

@foreach (var item in Model)

{

currentitemnumber++;

if (currentitemnumber % columncount == 0) // must be the start of a row

{

@:<div class="row" style="">

}

</picture>

</a>

<div>

</div>

<img src="~/P/photos/@item.Id.ToString()@(".jpg")"

alt="" class="img-responsive" style=" margin-left: auto; margin-right: auto;" />

@item.Description

</div>

<a href="#" rel="modal:close">Close</a>

</span>

</div>

if (item.Count == currentitemnumber || (currentitemnumber % columncount) == 0) // must be the end of a row

{

@:</div><br />

}

</td>

</tr>

</table>

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, currentFilter = ViewBag.CurrentFilter, sortOrder = ViewBag.sortOrder }),

PagedListRenderOptions.ClassicPlusFirstAndLast)

</div>

// add properties to the modal divs

$('a.open-modal').click(function (event) {

$(this).modal({

fadeDuration: 250

});

return false;

});

//for read more text truncation

$(document).ready(function () {

var showChar = 230;

var ellipsestext = "...";

var moretext = "more";

var lesstext = "less";

$('.more').each(function () {

var content = $(this).html();

if (content.length > showChar) {

var c = content.substr(0, showChar);

var h = content.substr(showChar - 1, content.length - showChar);

var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';

$(this).html(html);

}

});

$(".morelink").click(function () {

if ($(this).hasClass("less")) {

$(this).removeClass("less");

$(this).html(moretext);

} else {

$(this).addClass("less");

$(this).html(lesstext);

}

$(this).parent().prev().toggle();

$(this).prev().toggle();

return false;

});

</script>

Next >>>