[ASP.NET UpdatePanel] RadioButtonList的SelectedIndexChanged事件失效

2014-03-06

4498
0

場景描述:

我有一個RadioButtonList的控制項放在WebForm的網頁裡面，接著我想透過切換將TextBox隱藏或是顯示，預設為顯示．

WebForm1.aspx的內容如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="UpdatePanelDemo.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:RadioButtonList ID="RadioButtonList_ShowTextBox" runat="server" RepeatDirection="Horizontal"
            AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList_ShowTextBox_SelectedIndexChanged">
            <asp:ListItem Text="顯示" Selected="True" Value="0"></asp:ListItem>
            <asp:ListItem Text="隱藏" Value="1"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="RadioButtonList_ShowTextBox" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

WebForm1.aspx.cs的內容如下：


using System;

namespace UpdatePanelDemo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void RadioButtonList_ShowTextBox_SelectedIndexChanged(object sender, EventArgs e)
        {
            bool currentStatus = RadioButtonList_ShowTextBox.SelectedItem.Text == "顯示";
            TextBox1.Visible = currentStatus;
        }
    }
}

問題:

因為預設就是顯示TextBox，所以UI操作的行為如下：

按下隱藏的RadioButton
TextBox隱藏
按下顯示的RadioButton
TextBox還是隱藏

原因:

由於Trigger的事件是由Client端觸發，所以先看一下原始碼．

原來當RadioButton有透過Selected="True"的語法時，原始碼裡面會發現『顯示』的選項並沒有註冊onclick的javascript事件．

接著比對一下當沒有使用Selected="True"的語法時，原始碼長甚麼樣子．

解決方式:

1.既然找到原因了就把少掉的javascript onclick語法補回去．


javascript:setTimeout('__doPostBack(\'RadioButtonList_ShowTextBox$0\',\'\')', 0)

這邊要注意地方是因為我預設選擇第一個RadioButton，所以會看到註冊控制項的javascript語法是使用RadioButtonList_ShowTextBox$0...


using System;

namespace UpdatePanelDemo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void RadioButtonList_ShowTextBox_SelectedIndexChanged(object sender, EventArgs e)
        {
            bool currentStatus = RadioButtonList_ShowTextBox.SelectedItem.Text == "顯示";
            TextBox1.Visible = currentStatus;
        }

        public void Page_PreRender(object sender, EventArgs e)
        {
            string js = @"javascript:setTimeout('__doPostBack(\'RadioButtonList_ShowTextBox$0\',\'\')', 0)";
            RadioButtonList_ShowTextBox.Items[0].Attributes.Add("onclick", js);
        }
    }
}

2.把RadioButtonList控制項移進UpdatePanel裡面去就不需要註冊javascript的語法了．

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="UpdatePanelDemo.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:RadioButtonList ID="RadioButtonList_ShowTextBox" runat="server" RepeatDirection="Horizontal"
                    AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList_ShowTextBox_SelectedIndexChanged">
                    <asp:ListItem Text="顯示" Selected="True" Value="0"></asp:ListItem>
                    <asp:ListItem Text="隱藏" Value="1"></asp:ListItem>
                </asp:RadioButtonList>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="RadioButtonList_ShowTextBox" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

參考:

RadioButtonList (with a default value) SelectedIndexChanged doesn't work with ASP.NET Ajax

回首頁