• 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;  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()方法实现的原理就是:重新加载当前页面中指定区域的所有信息。

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

  • 相关阅读:
    Eclipse中插件的运用
    AES加密解密 Java中运用
    DES加密解密 Java中运用
    Chrome中的插件运用
    JqueryEasyUI教程入门篇
    SEO入门教程
    屏幕取色工具
    gif处理
    java 实现序列化的两种方式
    重定向输出 > 1>&2 2>&1
  • 原文地址:https://www.cnblogs.com/stevenjson/p/3712056.html
Copyright © 2020-2023  润新知