jQuery实现局部刷新页面数据绑定

时间：2021-04-14 23:23:31

今天遇到了一个问题：怎么样才能做到只刷新页面中的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(); });

        }

    </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="" cellpadding="" cellspacing="" width="100%">

                        <tr class="bold">

                            <th style="color: Black; font-weight: bold; width: 30%">

                                所属分类

                            </th>

                            <th style="color: Black; font-weight: bold; width: 30%">

                                分类名称

                            </th>

                            <th style="color: Black; font-weight: bold; width: 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()方法实现的原理就是：重新加载当前页面中指定区域的所有信息。

注意：它会引起页面回发。

相关文章