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

Question

[alexandrtym]

Здравствуйте.
На страницы имеются 2 кнопки "вперёд" "назад", которые должны сменять фотографию одна на другую. Картинки хранятся в папке img и пронумерованы от 1 до 10. ( в моём случае это не должна быть просто смена image1.imageUrl= "~/img/2.jpg" между двумя фотографиями, так как их больше) Не представляю как реализовать смену картинки событием нажатия на кнопку. Был бы признателен за помощь или какой-нибудь пример, так как только начал изучать создание веб-страниц с помощью asp .net

Answer 1

[Алексей Немиро]

Это 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.

Comments

[alexandrtym]

Спасибо, очень помогли.

Answer 2

[Максим Гречушников]

learn javascript, bro!

Comments

[Максим Гречушников]

а вообще в чем смысл изучать мертвый язык? я про АСП не слышал со времен перла. Нет, он довольно известный и много где применяется. Но он же мееееертвый!

[Иван]

Максим Гречушников, Не думаю что он мертвый,многие компании такие как EPAM,Micosoft и другие используют данную технологию

[Максим Гречушников]

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