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

Question

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

我有一个图像按钮列表。我希望当我单击一个按钮时，单击事件应该更改其图像 URL，比方说从 "aseat.png" 到 "sseat.png"。但是当我点击任何其他按钮时，之前点击的按钮的图像 URL 应该恢复到之前的状态，而新点击的按钮的图像 URL 现在应该改变。

我已经创建了布局，当我点击一个图像按钮时，我可以改变它的图像 URL 如果点击同一个按钮，我可以再次改变它，但无法制作它的工作方式就像我上面描述的那样。

我的布局前端代码片段：

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

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

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

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

c#

asp.net

imagebutton

imageurl