How to change the Image URL of an ImageButton after clicking them based on conditions?

Question

I am working on seating layout for a bus booking system using ASP.NET (C#). I want to allow user to select only one seat in a session.

I have a list of Image buttons. I want that when I click a button then that click event should change its image URL, let's say from "aseat.png" to "sseat.png". But when I click any of the other buttons then the image URL of the previously clicked button should be back to what it was before and the newly clicked button's image URL should be changed now.

I have created the layout already and when I click on an image button then I am able to change its image URL and change it back again if the same button is clicked, but not been able to make it work like the way I have just described above.

A snippet from my front end code for the layout:

<ul class="row1">    
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat44" ToolTip ="44" Width="25" Height="25"/></li>           
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat39" ToolTip="39" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat34" ToolTip="34" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat29" ToolTip="29" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat24" ToolTip="24" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat19" ToolTip="19" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat14" ToolTip="14" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat9" ToolTip="9" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/rseat.png"  OnClick="seat1_Click" ID="seat4" ToolTip="4" Width="25" Height="25"/></li>
    <li><asp:ImageButton runat="server" ImageUrl="Images/rseat.png"  OnClick="seat1_Click" ID="seat1"  ToolTip="1" Width="25" Height="25"/></li>
</ul>

C# code:

protected void seat1_Click(object sender, ImageClickEventArgs e)
{   
  ImageButton button = (ImageButton)sender;

  if(button.ImageUrl == "Images/aseat.png")
  {
    button.ImageUrl = "Images/sseat.png";
  }
  else
  {
     button.ImageUrl = "Images/aseat.png";
  }
}

Any help would be appreciated.

Answer 1

Please try this.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="seat._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<ul class="row1" runat="server" id="Seats">
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat44" ToolTip ="44" Width="25" Height="25"/></li>           
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat39" ToolTip="39" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat34" ToolTip="34" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat29" ToolTip="29" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat24" ToolTip="24" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat19" ToolTip="19" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat14" ToolTip="14" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/aseat.png" originalUrl="Images/aseat.png"  OnClick="seat1_Click" ID="seat9" ToolTip="9" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/rseat.png" originalUrl="Images/rseat.png"  OnClick="seat1_Click" ID="seat4" ToolTip="4" Width="25" Height="25"/></li>
<li><asp:ImageButton runat="server" ImageUrl="Images/rseat.png" originalUrl="Images/rseat.png"  OnClick="seat1_Click" ID="seat1"  ToolTip="1" Width="25" Height="25"/></li>
</ul>
</asp:Content>

Default.aspx.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace seat
{
public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
protected void seat1_Click(object sender, ImageClickEventArgs e)
    {
        ImageButton button = (ImageButton)sender;
        foreach (var item in Seats.Controls)
        {
            if (item.GetType() == typeof(ImageButton) && ((ImageButton)item).ImageUrl == "Images/sseat.png" && ((ImageButton)item).ID != button.ID)
            { 
                ((ImageButton)item).ImageUrl = ((ImageButton)item).Attributes["originalUrl"];
                break;
            }
        }
        if (button.ImageUrl == "Images/sseat.png")
        {
            button.ImageUrl = button.Attributes["originalUrl"];
        }
        else
        {
            button.ImageUrl = "Images/sseat.png";
        }
    }
   }
 }