CheckBoxList AJAX async postback issue
I have 2 CheckBoxList controls - chk1 and chk2. I need to use an async postback to clear the selections of a CheckBoxList if the other one is selected. T开发者_开发百科he following will not clear chk1 if it had selections, and an item chk2 was checked:
<asp:ScriptManager ID="sm1" runat="server" ></asp:ScriptManager>
<asp:UpdatePanel ID="upd" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chk1" />
<asp:AsyncPostBackTrigger ControlID="chk2" />
</Triggers>
<ContentTemplate>
<asp:Label ID="result" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<div style="overflow: auto; height: 150px;">
<asp:CheckBoxList runat="server" ID="chk1" OnDataBound="assignClickBehaviours" AutoPostBack="true">
<asp:ListItem Value="1" Text="One"></asp:ListItem>
<asp:ListItem Value="2" Text="Two"></asp:ListItem>
<asp:ListItem Value="3" Text="Three"></asp:ListItem>
<asp:ListItem Value="100" Text="..."></asp:ListItem>
<asp:ListItem Value="150" Text="One hundred and Fifty"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div style="overflow: auto;">
<asp:CheckBoxList runat="server" ID="chk2" AutoPostBack="true">
<asp:ListItem Value="1" Text="One"></asp:ListItem>
<asp:ListItem Value="2" Text="Two"></asp:ListItem>
<asp:ListItem Value="3" Text="Three"></asp:ListItem>
</asp:CheckBoxList>
</div>
code behind:
protected void Page_Load(object sender, EventArgs e)
{
processChecks();
}
private void processChecks()
{
if(chk2.SelectedIndex>-1)
chk1.ClearSelection();
}
If the whole thing was put in the update panel, it would work... but because there can be 150 items in the checkbox, the scrolling on the overflow:auto would flick back to the top if an item at the bottom was selected. I need the scroll state to stay put (hence the need for async postback). Any ideas or alternatives?
You can try this code ..
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server" ></asp:ScriptManager>
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chk1">
</asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="chk1">
</asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
<div style="overflow: auto; height: 150px;">
<asp:CheckBoxList runat="server" ID="chk1" AutoPostBack="true">
<asp:ListItem Value="1" Text="One"></asp:ListItem>
<asp:ListItem Value="2" Text="Two"></asp:ListItem>
<asp:ListItem Value="3" Text="Three"></asp:ListItem>
<asp:ListItem Value="100" Text="..."></asp:ListItem>
<asp:ListItem Value="150" Text="One hundred and Fifty"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div style="overflow: auto;">
<asp:CheckBoxList runat="server" ID="chk2" AutoPostBack="true">
<asp:ListItem Value="1" Text="One"></asp:ListItem>
<asp:ListItem Value="2" Text="Two"></asp:ListItem>
<asp:ListItem Value="3" Text="Three"></asp:ListItem>
</asp:CheckBoxList>
</div>
</form></body>
Please try with this code,
- Enable Auto post back on both the checkbox lists.
- Then embed both the checkbox lists inside an update panel.
- Include the C# code inside selected Index changed event of each checkboxes, In this case it is your
processChecks();
Please make the following changes, Notice the EventName 'SelectedIndexChanged'
<asp:ScriptManager ID="sm1" runat="server" ></asp:ScriptManager>
<asp:UpdatePanel ID="upd" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chk1" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="chk2" EventName="SelectedIndexChanged"/>
</Triggers>
<ContentTemplate>
<asp:Label ID="result" runat="server" />
<div style="overflow: auto; height: 150px;">
<asp:CheckBoxList runat="server" ID="chk1" AutoPostBack="true">
<asp:ListItem Value="1" Text="One"></asp:ListItem>
<asp:ListItem Value="2" Text="Two"></asp:ListItem>
<asp:ListItem Value="3" Text="Three"></asp:ListItem>
<asp:ListItem Value="100" Text="..."></asp:ListItem>
<asp:ListItem Value="150" Text="One hundred and Fifty"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div style="overflow: auto;">
<asp:CheckBoxList runat="server" ID="chk2" AutoPostBack="true">
<asp:ListItem Value="1" Text="One"></asp:ListItem>
<asp:ListItem Value="2" Text="Two"></asp:ListItem>
<asp:ListItem Value="3" Text="Three"></asp:ListItem>
</asp:CheckBoxList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
加载中,请稍侯......
精彩评论