改变图像时，选择一个单选按钮列表中的选项 [英] Changing an Image When Selecting an Option in a Radio Button List

问题描述

注：这是一个重新利用问题，其目的是为了更清楚地说明这个问题，信息的

NOTE: THIS IS A RE-PURPOSED QUESTION, WHICH AIMS TO MORE CLEARLY STATE THE ISSUE AND INFORMATION.

好吧...我工作的一个网站矿井，有一个表格，并使用项目类别RadioButtonList控件的项目。在一个特定的类别，我的电台列表控件有4 vaules像这样：

Ok... I am working on a project for a site of mine that has a form, and uses the RadioButtonList control for item categories. On one particular category, my radio list control has 4 vaules like so:

<td>
<asp:RadioButtonList ID="radCPUType" RepeatDirection="Horizontal" runat="server">
  <asp:ListItem Value="AMD">AMD</asp:ListItem>
  <asp:ListItem Value="Intel">Intel</asp:ListItem>
  <asp:ListItem Value="AMD Dual (Server)">AMD Dual (Server)</asp:ListItem>
  <asp:ListItem Value="Intel Dual (Server)">Intel Dual (Server)</asp:ListItem>
</asp:RadioButtonList>
</td>

<td>
<asp:Image ID="Image6" runat="server" ImageUrl="~/Images/Icon_CPU.jpg" />
</td>

和旁边的列表控件，我有一个名为默认的图像控制图片6 。我有困难得到这一形象改变很大，当我选择一个单选按钮列表选项。在code不炸毁，但没有任何反应，图像仍然在一个电台选项的选择不变。我试着从类似的例子各种方法，其中没有一个是有帮助的。

And next to the list control, I have a default image control named Image6. I'm having a great deal of difficulty getting this image to change when I select a radio button list option. The code doesn't blow up, but nothing happens and the image remains unchanged on a radio option selection. I've tried various methods from similar examples, and none of them have been helpful.

我试过的JQuery我的剧本，和普通的旧JavaScript中，都无济于事。我知道我需要做的脚本中引用我在解决方案的Images目录的图像，但我无法弄清楚。默认图像 Icon_CPU.jpg 并为每个选择，比方说......一日2，它会改变为以下内容：

I've tried JQuery for my script, and plain old JavaScript, all to no avail. I know I need to make the script reference the images I have in the Images directory of the solution, but I can't figure it out. The default image is Icon_CPU.jpg and for each choice, say... the 1st two, it will change to the following:

1. AMD选择= AMD_CPU_1.jpg


2. 英特尔选择= Intel_CPU_2.jpg

1. AMD selection = AMD_CPU_1.jpg
2. Intel selection = Intel_CPU_2.jpg

...等等。我只是不能得到code在选择工作 - 如果硬codeD光盘的图像正确对齐。一些可以帮助我的剧本真正使这项工作？另外，你能告诉我，如果我需要重新命名我的控制，或在 pageLoad的服务器端控制的补充？目前，我没有什么在它下面会显示。

... and so on. The images will align properly if hard coded - I just can't get the code to work on selection. Can some help me with the script to actually make this work? Also, can you tell me if I need to rename my controls, or add anything in the PageLoad of the server-side control? Currently, I have nothing in it as below will show.

public partial class Controls_CPUBuilderForm : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnResetBuild_Click(object sender, EventArgs e)
    {
        // Clear radio button selections on the form

        radFormSelect.ClearSelection();
        radDriveType.ClearSelection();
        radDriveSpace.ClearSelection();
        radPSUSelect.ClearSelection();

        radRAMSelect.ClearSelection();
        radCPUType.ClearSelection();
        radOpticalCount.ClearSelection();
        radScreenCount.ClearSelection();

        // Reset drop down lists to original selection

        ddlDriveCount.SelectedIndex = -1;
        ddlScreenOrient.SelectedIndex = -1;
    }
}

感谢大家的耐心和放大器;知识在帮助我，以便将来更好地了解！

Thank you all for your patience & knowledge in helping me gain better understanding for future purposes!

推荐答案

感谢所有为您的建议。 非常感谢KENT ANDERSON - 谁提供的框架在这​​我能扩大来获得我一直在寻找的功能。

Thanks to all for your suggestions. A BIG THANKS TO "KENT ANDERSON" -- whom provided the framework upon which I was able to expand on to get the functionality I was looking for.

这是说，答案是创建一个事件处理程序瓦特/控件的codeBehind像这样的：

That said, the answer was to create an Event Handler w/in the control's CodeBehind like thus:

protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e)
{
   // This was Kent's suggestion, and also to setup the ImageUrl as needed.

   Image6.ImageUrl = "~/Images/MyDefault.jpg";
}

我的设置的ImageUrl 来选择控件上的选项之前，最初持有的默认图像。接下来，我需要一种方法来选择上填充图像。由于许多建议已经实现这一目标的不同的和可能更复杂的方式，我发现我可以通过将控件作为参数W /指定的值，通过的if-else 结构瓦特/事件处理程序：

I setup the ImageUrl to initially hold the default image before selecting the option on the control. Next, I needed a way to populate the images on selection. As many suggestions had differing and maybe more complex ways of achieving this, I found that I could do this by passing the control as a parameter w/ an assigned value, through an if-else structure w/in the event handler:

protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e)
{
   // Setup the ImageUrl.

   Image6.ImageUrl = "~/Images/MyDefault.jpg";


   // Setup the if-else structure to assign images w/ the selections.

   if (radCPUType.SelectedValue == "A selected option value")
   {
      Image6.ImageUrl = "~/Images/Associated Image.jpg";
   }
   else if (radCPUType.Selectedvalue == "Another selected option value")
   {
      Image6.ImageUrl = "~/Images/Another Associated Image.jpg")
   }
   else
   {
      Image6.ImageUrl = "~/Images/The Default Image.jpg";
   }
}

由于该单选按钮列表控件使用的基于价值指数的的SelectedValue 类是所以需要控制可容纳选项的选择，如无线电列表的HTML分配。

Because the RadioButtonList control uses a value-based index, SelectedValue class was needed so the control could hold the option selection, as assigned in the HTML of radio list.

在如果部分控制等于选择了单选按钮列表的选项;下一条语句，然后分配与选项的选择到相关的图像的ImageUrl ，我用否则，如果课程去通过剩余的无线列表选项，在结束其他的结构部分中的默认图像结束。这是成功的！所以，再一次，因为我敢肯定有其他的方式来达成一个解决方案，这个最适合我。

The control in the if portion equals the option chosen on the radio button list; the next statement then assigns the image associated with option selection to the ImageUrl, and I used else if of course to go through the remaining radio list options, ending with the default image in the closing else portion of the structure. It is a success! So again, as I'm sure there other ways to achieve a solution, this works best for me.

再次感谢您的投入，又拍了肯特·安德森，谁的意见提供给建立在一个基础。

Thanks again for all your inputs, and another shot out to Kent Anderson, who's advice provided a foundation to build upon.

这篇关于改变图像时，选择一个单选按钮列表中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！