AJAX异步回发问题

本文关键字：问题 异步 AJAX | 更新日期: 2023-09-27 18:09:58

我有2个CheckBoxList控件- chk1和chk2。我需要使用异步回发清除CheckBoxList的选择，如果另一个被选中。如果chk1有选择项，并且chk2已选中，则以下命令将不清除chk1: 

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

背后的代码:

protected void Page_Load(object sender, EventArgs e)
    {
        processChecks();
    }
    private void processChecks()
    {
        if(chk2.SelectedIndex>-1)
            chk1.ClearSelection();    
    }

如果整个东西放在更新面板，它会工作…但是由于复选框中可能有150个项目，如果选择了底部的项目，overflow:auto上的滚动将弹回顶部。我需要滚动状态保持不变(因此需要异步回发)。有什么想法或替代方案吗?

AJAX异步回发问题

您可以试试这段代码…

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

请尝试使用此代码，

  1. 在两个复选框列表上启用自动返回。
  2. 然后将这两个复选框列表嵌入到一个更新面板中。
  3. 将c#代码包含在每个复选框的选定索引更改事件中，在本例中是processChecks();

请做以下更改，注意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>
相关文章：