How to change pictures by pressing the "forward" "back" buttons?

Question

HTML

Hello.
On the page there are 2 buttons "forward" "back", which should change the photo one to another. The pictures are stored in the img folder and are numbered from 1 to 10. (In my case, it shouldn't be just changing image1.imageUrl= "~/img/2.jpg" between two photos, since there are more of them) I have no idea how to implement the image change button click event. Would appreciate some help or some example as I just started learning how to build web pages with asp .net

Answer 1

Is it WebFroms or MVC ?
If WebFroms , then just make a click handler for a link/button, in which set the desired file in <asp:Image /> .
For example, the code on the page might look like this:

<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"
/>

Handler code might look like this:

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]));
    }
  }
}

Optionally, you can make one handler for both links/buttons using the 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]));
      }
    }
  }
}

For MVC it ​​will be completely different.
The most beautiful way to do this is from the client side, using JavaScript .

Answer 2

learn javascript, bro!