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

今天遇到了一个问题：怎么样才能做到只刷新页面中的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; 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()方法实现的原理就是：重新加载当前页面中指定区域的所有信息。

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

posted @ 2014-05-06 17:34  stevejson  阅读(2885)  评论(0)  编辑  收藏  举报