如何根据条件单击 ImageButton 后更改其图像 URL？

Question

我正在使用 ASP.NET (C#) 为巴士预订系统设计座位布局。我想允许用户在会话中只选择一个座位。

我有一个图像按钮列表。我希望当我单击一个按钮时，该单击事件应该更改其图像 URL，例如从“aseat.png”到“sseat.png”。但是，当我单击任何其他按钮时，之前单击的按钮的图像 URL 应该恢复到以前的状态，并且现在应该更改新单击的按钮的图像 URL。

我已经创建了布局，当我单击图像按钮时，我可以更改其图像 URL，如果单击相同的按钮，我可以再次将其更改回来，但无法使其像我一样工作上面已经介绍过了。

我的前端代码中的一个 sn-p 布局：

<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#代码：

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";
  }
}

任何帮助将不胜感激。

Answer 1

请试试这个。

<%@ 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>

默认.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";
        }
    }
   }
 }