@alexandrtym

Как изменять картинки нажатием на кнопки «вперёд» "назад"?

Здравствуйте.
На страницы имеются 2 кнопки "вперёд" "назад", которые должны сменять фотографию одна на другую. Картинки хранятся в папке img и пронумерованы от 1 до 10. ( в моём случае это не должна быть просто смена image1.imageUrl= "~/img/2.jpg" между двумя фотографиями, так как их больше) Не представляю как реализовать смену картинки событием нажатия на кнопку. Был бы признателен за помощь или какой-нибудь пример, так как только начал изучать создание веб-страниц с помощью asp .net
59e4c02168a79621494777.png
  • Вопрос задан
  • 380 просмотров
Решения вопроса 1
AlekseyNemiro
@AlekseyNemiro
full-stack developer
Это WebFroms или MVC?

Если WebFroms, то просто сделать обработчик нажатия по ссылке/кнопке, в котором установуть нужный файл в <asp:Image />.

Например, код на странице может быть таким:
<asp:LinkButton ID="lnkPrev" 
  Text="Назад" 
  RunAt="server"
  OnClick="lnkPrev_Click"
/>

<asp:Image ID="Image1" 
  ImageUrl="~/img/1.jpg"
  RunAt="server"
/>

<asp:LinkButton ID="lnkNext" 
  Text="Вперёд" 
  RunAt="server"
  OnClick="lnkNext_Click"
/>

Код обработчиков может быть таким:

protected void lnkPrev_Click(object sender, EventArgs e)
{
  // получаем список файлов в папке ~/img
  var files = System.IO.Directory.GetFiles(Server.MapPath("~/img"));
  // текущий путь берем из Image1.ImageUrl
  var currentPath = Server.MapPath(Image1.ImageUrl);

  // ищем текущий путь среди полученных файлов
  int index = Array.IndexOf(files, currentPath);

  // проверяем, нашлось что-то или нет
  if (index != -1)
  {
    // проверяем, можно получить предыдущий файл или нет
    if (index - 1 > 0)
    {
      // можно, берем его
      Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[index - 1]));
    }
    else
    {
      // нельзя, берем последний из списка
      Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[files.Length - 1]));
    }
  }
}

protected void lnkNext_Click(object sender, EventArgs e)
{
  var files = System.IO.Directory.GetFiles(Server.MapPath("~/img"));
  var currentPath = Server.MapPath(Image1.ImageUrl);
      
  int index = Array.IndexOf(files, currentPath);

  if (index != -1)
  {
    // проверяем, есть файлы впереди или нет
    if (files.Length > index + 1)
    {
      // есть, берем следующий файл
      Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[index + 1]));
    }
    else
    {
      // нет, берем первый из списка
      Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[0]));
    }
  }
}


При желании, можно сделать один обработчик для обоих ссылок/кнопок с помощью CommandArgument.
<asp:LinkButton ID="lnkPrev" 
  Text="Назад" 
  RunAt="server"
  CommandArgument="-1"
  OnClick="LinkButton_Click"
/>

<asp:Image ID="Image1" 
  ImageUrl="~/img/1.jpg"
  RunAt="server"
/>

<asp:LinkButton ID="lnkNext" 
  Text="Вперёд" 
  RunAt="server"
  CommandArgument="1"
  OnClick="LinkButton_Click"
/>

protected void LinkButton_Click(object sender, EventArgs e)
{
  var lnk = (LinkButton)sender;
  var files = System.IO.Directory.GetFiles(Server.MapPath("~/img"));
  var currentPath = Server.MapPath(Image1.ImageUrl);
      
  int index = Array.IndexOf(files, currentPath);

  // если подумать, то этот блок кода можно уменьшить
  if (index != -1)
  {
    if (lnk.CommandArgument == "1")
    {
      if (files.Length > index + 1)
      {
        Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[index + 1]));
      }
      else
      {
        Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[0]));
      }
    }
    else
    {
      if (index - 1 > 0)
      {
        Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[index - 1]));
      }
      else
      {
        Image1.ImageUrl = String.Format("~/img/{0}", System.IO.Path.GetFileName(files[files.Length - 1]));
      }
    }
  }
}


Для MVC будет совсем по-другому.

Красивее всего это делать со стороны клиента, с помощью JavaScript.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@maxyc_webber
Web-программист
learn javascript, bro!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы