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>