Как я могу обновить список изображений в частичном просмотре при нажатии на одно из изображений?

Question

У меня есть частичное представление, содержащееся на веб-странице, которая загружает несколько миниатюрных изображений в установленном порядке. При нажатии на миниатюру я хочу перезагрузить список с миниатюрой, на которую щелкнули, став первым изображением, за которым следует остальная часть списка по порядку, без перезагрузки остальной части веб-страницы.

My PartialView содержит следующий код, который загружает миниатюры и присваивает каждому Url.Action.

<% foreach (var image in (ImageModel)ViewData.Model) { %>
    <a href='<%= Url.Action("ImageList", "ImageView", new { imageFolderName = image.Folder, imageFile = ImageHelper.GetImageName(image.Path) }, null) %>'>
    <img src="/images/<%= image.Path %>" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt=""  /></a>
<% }%>

Мой контроллер имеет ActionResult для первоначальной загрузки частичного представления при загрузке содержащей страницы. Я также включил метод, возвращающий PartialViewResult.

открытый класс ImageViewController: Controller

    public ActionResult ImageView(string imageFolderName, string imageFile)
    {
        return View(new ImageModel(imageFolderName, imageFile));
    }

    public PartialViewResult ImageList(string imageFolderName, string imageFile)
    {
        return PartialView(new ImageModel(imageFolderName, imageFile));
    }

Если я установлю Url.Action в («ImageList», «ImageList» ... миниатюры обновляются именно так, как я хочу, но обновляется вся страница, а не только частичное представление.

Когда я устанавливаю Url.Action в ("ImageList", "ImageView" ... вместо частичного просмотра обновленной содержащей страницы, содержащая страница исчезает, а частичная страница загружается без него. Я вижу все свои эскизы в правильном порядке на пустой белой веб-странице.

Я новичок, и я не смог разобраться в jQuery или Ajax Q и A о PartialViews таким образом, чтобы это применимо к этому сценарию.

Что хорошего в методе контроллера, который возвращает PartialView, если он загружает новую веб-страницу, вместо того, чтобы просто обновить частичное представление внутри содержащей его страницы?

И есть ли какие-либо документы или объяснения, которые показывают, как это можно сделать?

Answer 1

То, что я нашел, является частичным представлением, не помогает в этом случае.Когда все, что я хочу сделать, это повернуть список миниатюр, все, что мне нужно сделать, это добавить верхнюю миниатюру к нижней части контейнера, используя jQuery, и продолжать делать это, пока нажатие на миниатюру не окажется вверху.

На мой взгляд, я загружаю миниатюры при первой загрузке страницы.

<div id="thumbnails">
    <% foreach (var image in (ImageModel)ViewData.Model) { %>
        <img src="/images/<%= image.Path %>" class="thumbnail" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt=""  />
    <% }%>

</div>

, затем я нашел код jQuery для поворота миниатюр, которые работали, чтобы быть

$('.thumbnail').live('click', function() {

var imageSrc = $(this).attr('src');
var n = 0;

$('img.thumbnail').each(function(n) {
    if ((imageSrc == $(this).attr('src')) && (n == 0)) {
        $('div#thumbnails').append(this);
        return false;
    }
    if (imageSrc == $(this).attr('src')) {
        return false;
    }
    else {
        $('div#thumbnails').append(this);
    }
    n++;
});

Это простовырезает верхнюю миниатюру из div и добавляет ее к нижней части с помощью цикла, который останавливается при достижении миниатюры, на которую нажимали, и оставлял миниатюру, на которую нажимали, как верхнюю миниатюру.

Первый оператор if проверяет, является ли нажатой миниатюра первой миниатюрой в списке и поворачивает ли она миниатюры на 1. В действительности, нажатие на первую или вторую миниатюру в списке приводит к перемещениюсписок по одному.Нажатие на любую другую миниатюру в списке приводит к тому, что первая миниатюра и вращается соответственно.

Answer 2

Ссылки обычно приводят к обновлению всей страницы, вам нужно использовать ajax для обновления только части страницы.

Я бы сделал следующее:

Это будетбыть почти таким же кодом, изменения здесь в том, что он вызывает ваше оригинальное ImageView действие.И я добавил класс CSS под названием image.Также я добавил div, окружающий изображения (возможно, у вас это уже есть) и назвал его allmypics

<div id="allmypics">
<% foreach (var image in (ImageModel)ViewData.Model) { %>
    <a class="image" href='<%= Url.Action("ImageView", "ImageView", new { imageFolderName = image.Folder, imageFile = ImageHelper.GetImageName(image.Path) }, null) %>'>
    <img src="/images/<%= image.Path %>" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt=""  /></a>
<% }%>
</div>

Теперь вам нужно использовать jQuery для подключения события click.

<script type="javascript">
    //use the live method to listen to future clicks
    $('a.image').live('click', function(e) {
        e.preventDefault(); // prevent following the link
        $('#allmypics').load($(this).attr('href')); // load the result of the link into the 'allmypics' element. Use the href attribute of the link as address.
    } );
</script> 

Я добавил комментарии, чтобы вы могли их понять.

Теперь нам нужно только изменить action:

public ActionResult ImageView(string imageFolderName, string imageFile)
{
    if (Request.IsAjaxRequest())
        return PartialView(new ImageModel(imageFolderName, imageFile));
    else
        return View(new ImageModel(imageFolderName, imageFile));
} 

Контроллер знает, является ли это запросом ajax, так что если это так, мы возвращаем частичное представление (не забудьте переименовать ImageList.ascx в Imageview.ascx), в противном случае мы возвращаем всю страницу.

Теперь это также будет работать, если браузер не '• не поддерживает javascript (он просто переходит по ссылке в обычном режиме)

Я не тестировал его, поэтому могут быть некоторые синтаксические ошибки.