今天遇到了一个问题:怎么样才能做到只刷新页面中的Repeater控件中的数据,在不用UploadPannel的情况下?
试了好多方法,无意间在看jquery文件时发现,使用load()方法即可解决此问题。
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>当前页(WebForm1.aspx)局部数据刷新</title> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> function sdf() { var parendtId = $("#DropDownList1 option:selected").val(); $("#dataDiv").load("WebForm1.aspx #dataDiv", { parendtId: parendtId, R: Math.random() }, function () { $("#dataDiv").fadeIn(10000000); }); } </script> </head> <body> <form id="form1" runat="server"> <div> <div> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <input type="button" id="refreshData" onclick="sdf();" value="刷新" /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> <div id="dataDiv"> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr class="bold"> <th style="color: Black; font-weight: bold; 30%"> 所属分类 </th> <th style="color: Black; font-weight: bold; 30%"> 分类名称 </th> <th style="color: Black; font-weight: bold; 10%"> 状态 </th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td> <%#Eval("Pid")%> </td> <td> <%#Eval("Name")%> </td> <td> <%#Eval("Status")%> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </div> </div> </form> </body> </html>
从实现代码大家可以看出,其实使用jquery的load()方法实现的原理就是:重新加载当前页面中指定区域的所有信息。
注意:它会引起页面回发。