Question

注意：这是一个重新提出的问题，旨在更明确地解决问题和信息 。

好的......我正在为我的一个拥有表单的网站开发一个项目，并对项目类别使用RadioButtonList控件。在一个特定类别中，我的收音机列表控件有4个如下：

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

在列表控件旁边，我有一个名为Image6的默认图像控件。当我选择一个单选按钮列表选项时，我很难让这个图像发生变化。代码没有爆炸，但没有任何反应，图像在无线电选项选择上保持不变。我尝试过类似例子中的各种方法，但没有一个方法有用。

我已经为我的脚本尝试过JQuery，并且使用普通的旧JavaScript，但都无济于事。我知道我需要让脚本引用我在解决方案的Images目录中的图像，但我无法弄明白。默认图片为Icon_CPU.jpg，对于每个选项，例如......前两个，它将更改为以下内容：

AMD选择= AMD_CPU_1.jpg
英特尔选择= Intel_CPU_2.jpg

......等等。如果硬编码，图像将正确对齐 - 我只是无法获得用于选择的代码。有些人可以通过脚本帮我实际完成这项工作吗？另外，您能否告诉我是否需要重命名控件，或者在服务器端控件的PageLoad中添加任何内容？目前，我没有任何内容，如下所示。

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

感谢大家的耐心等待。帮助我更好地理解未来目的的知识！

Answer 1

要使用C＃解决您的问题，请在代码隐藏中为SelectedIndexChanged创建一个事件处理程序。

 protected void radCPUType_SelectedIndexChanged(object sender, EventArgs e)
    {
        // Set the ImageUrl however you like
        Image6.ImageUrl = "~/Images/Icon_CPU.jpg";
    }

接下来，优化您的单选按钮列表以设置AutoPostBack =“True”和OnSelectedIndexChanged =“radCPUType_SelectedIndexChanged”

<asp:RadioButtonList ID="radCPUType" RepeatDirection="Horizontal" runat="server" AutoPostBack="True" OnSelectedIndexChanged="radCPUType_SelectedIndexChanged">
                        <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>

Answer 2

感谢大家的建议。 非常感谢“KENT ANDERSON” - 谁提供了我能够扩展的框架，以获得我正在寻找的功能。

那就是说，答案是在控件的CodeBehind中创建一个事件处理程序，如下所示：

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以便在选择控件上的选项之前初始保留默认图像。接下来，我需要一种方法来填充选择的图像。由于许多建议有不同的，也许更复杂的方法来实现这一点，我发现我可以通过将控件作为参数传递给指定值，通过事件处理程序中的if-else结构来实现这一点： / p>

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

由于RadioButtonList控件使用基于值的索引，因此需要SelectedValue类，因此控件可以保留选项选择，如在广播列表的HTML中指定的那样。

if部分中的控件等于单选按钮列表中选择的选项;然后，下一个语句将与选项选择相关联的图像分配给ImageUrl，当然我使用else if来查看剩余的单选列表选项，以结束{{1}中的默认图像结束结构的一部分。这是成功的！再说一遍，因为我确信还有其他方法可以实现解决方案，这对我来说效果最好。

再次感谢您的所有投入，以及对肯特安德森的另一个投射，他的建议提供了建立基础。

Answer 3

首先让我们在代码隐藏

中附加JS事件

radCPUType.Attributes.Add("onclick", "changeImage();");

然后我们需要创建JS函数。

 <script type="text/javascript">
    function changeImage() {

        var img = $('#<%=radCPUType.ClientID %>');

        switch ($('#<%=radCPUType.ClientID %> input[type=radio]:checked').val())
        {
            case 'AMD':
                img.src = 'newimage.png';
                break;
        }
    }
</script>

我没有对此进行测试，但如果出现问题，请告诉我。

Answer 4

直接解答上一个问题：

<强> ASPX

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

<强>的javascript

$(document).ready(function () {
    $("#<%= yourID.ClientID %> input").click(function () {
        var value = $(this).val();
        var image_name;
        var image_path = "/Images/"; 
        //If the images directory isn't at the website root you could use asp.nets
        //resolveURL method instead

        switch (value)
        {
            case "AMD":
            image_name = '"AMD_CPU_1.jpg";
            break;

            case "Intel";
            image_name = "Intel_CPU_2.jpg"
            break;

            case "AMD Dual (Server)";
            image name = "" // Insert your image here
            break;

            case "Intel Dual (Server)";
            image name = "" // Insert your image here
            break;
       }

        /*************************************
        *Old  Ineeficient code
        if (value == 'AMD') {
            image_name = "AMD_CPU_1.jpg";
        } else {
            if (value == 'Intel') {
                image_name = "Intel_CPU_2.jpg";
            } else {
                image_name = "Icon_CPU.jpg";
            }
        }
        *************************************************/

        //console.log(image_name);
         $("#<%= Image6.ClientID %>").attr('src', image_path + image_name);
    });
});

<% %>是服务器代码块，应该在aspx页面中谨慎使用。 <%= %>是<% Response.Write() %>的简写。如果您在浏览器中查看页面的源HTML代码，您将看到单选按钮列表的放大器的ASP.net客户端ID。 jQuery选择器中的图像控件。

如果您获得意外结果，也应该使用FireBug for Firefox或Chrome开发人员工具等工具检查图像的路径。另请注意第//console.log(image_name);行。从此行删除注释会将image_name的值转储到控制台，这对调试很有用。在此处查看更多信息：http://blogs.msdn.com/b/cdndevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

旁注

我在这里看不到图像控制。一个普通的旧HTML图像标记可以工作。如果你使用图片标签，你将不会得到你在原始问题中所做的asp.net名称修改，并且只能使用$("#Image6")

来引用它

switch语句的更多信息，如果您不熟悉它：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

在单选按钮列表中选择选项时更改图像

4 个答案: