ajax中updatepanel的小应用

我想大家遇到过如下情况:

在一个表格中有两个dropdownlist和一个button,都想实现无刷新效果。如下:

<table width="90%" style="font-size: medium; line-height: 28px;">
        <tr>
            <td style="width: 200px;" align="right">
                大类名称:
            </td>
            <td style="width: 300px;">
                <asp:DropDownList ID="DDL_cate" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DDL_cate_SelectedIndexChanged">
                </asp:DropDownList>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td align="right">
                小类名称:
            </td>
            <td>
                    <asp:DropDownList ID="DDL_smallCate" runat="server">
                        </asp:DropDownList>
                    
            </td>
            <td>
            </td>
        </tr>
<tr>
            <td>
            </td>
            <td>
                <asp:Button ID="btn_addSb" Text="添加设备" runat="server" onmouseover="this.style.backgroundColor='#53667B';this.style.color='white';"
                    Height="30px" Width="90px" onmouseout="this.style.backgroundColor='#1C3345';this.style.color='white';"
                    BorderStyle="None" CausesValidation="False" BackColor="#1C3345" Font-Bold="True"
                    ForeColor="White" OnClick="btn_addSb_Click" />
            </td>
            <td>
            </td>
        </tr>
    </table>

 

就是说要添加一个updatepanel该添加到哪儿呢,显然一个很难解决这dropdownlist和button都不刷新即可更新数据的效果,所以不能把updatepanel放到table外层。

这就需要把update放到dropdownlist外,但是这是两行该放到那个dropdownlist外呢,这就需要利用updatepanel自身带有的触发器功能来实现了。

我们要实现第一个d1选择后d2更新那只能把updatepanel放到d2外然后利用Triggers》asp:AsyncPostBackTrigger来实现了。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:DropDownList ID="DDL_smallCate" runat="server">
                        </asp:DropDownList>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="DDL_cate" />
                    </Triggers>
                </asp:UpdatePanel>

 

posted @ 2012-05-16 10:46  aspneteye  阅读(199)  评论(0编辑  收藏  举报