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

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

jQuery实现局部刷新页面数据绑定的更多相关文章

  1. jQuery 定时局部刷新(setInterval)方法总结

    来自:http://www.jbxue.com/article/8516.html 1.jQuery 定时局部刷新(setInterval),显示时间的代码. <head> <scr ...

  2. ionic局部刷新页面与刷新整个页面

    1.全局刷新,禁用缓存: 在app.js中设置cach:false,如下: .state('material', { url: '/material', cache:false, templateUr ...

  3. ASP.NET使用ajax实现分页局部刷新页面

    listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) & ...

  4. MVC采用Jquery实现局部刷新

    该文纯粹属于个人学习,有不足之处请多多指教! 效果图: 单击Detail下面出现详细,效果如下: 为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下: 首先介绍主页Index代码: @m ...

  5. vue+el-menu实现路由刷新和导航栏菜单状态保持（局部刷新页面）

    一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...

  6. Jquery实现form表单提交后局部刷新页面的多种方法

    最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...

  7. 使用jquery实现局部刷新DIV

    实现页面的定时刷新功能:jquery使用的是jquery-1.8.3.min.js1:定时刷新 A界面的一段代码如下:<script type="text/javascript&quo ...

  8. Ajax-goahead局部刷新页面

    软件开发最常用的方法是:C/S,B/S.如果嵌入式设备中使用Ajax,那么既可以使用C/S方式,也可以使用B/S开发上位机.最近公司的一个项目需要异步获取后台数据,使用form更新数据时会有空白卡顿不 ...

  9. Django中用Jquery实现不刷新页面进行身份验证和计算器功能

    1.下载jquery http://www.jq22.com/jquery-info122 下载解压之后加入工程中的static文件夹中 2.路由分发. """Djang ...

随机推荐

  1. 一张图片教会你写mysql 语句

    MySQL的语句执行顺序 MySQL的语句一共分为11步,如下图所标注的那样,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入 ...

  2. Python——网络编程，如何避免死锁？

    问题描述:什么是死锁? 死锁发生在当一个服务器和客户端同时试图往一个连接上写东西或同时从一个连接上读的时候.在这种情况下,没有进程可以得到任何数据(如果它们都正在读),因此,如果它们正在写,向外的bu ...

  3. sql中limit和汇总函数的集合使用

    limit和求和一起 select SUM(A.high) from (select * from minute1_K order by DateTime desc limit 10) A limit ...

  4. ES标准中的相等比较算法 SameValue SameValueZero

    1.相等比较算法 The Abstract Equality Comparison Algorithm (==) The Strict Equality Comparison Algorithm (= ...

  5. 工作流学习——Activiti流程变量五步曲

    一.前言 上一篇文章我们将流程实例的启动与查询,任务的办理查询都进行了介绍,我们这篇文章来介绍activiti中的流程变量. 二.正文 流程变量与我们寻常理解的变量是一样的,仅仅只是是用在了我们act ...

  6. ubuntu cp(copy) command

    e.g. #cp –p –R  /opt/lampp/drv ~/test   Ubuntu_Linux命令:cp(copy)复制文件或目录 功能: 复制文件或目录   www.2cto.com  说 ...

  7. Android 之UI自适应解决方式

    1.概况 作为Android开发者,最头疼的莫过于让自己开发的程序在不同终端上面的显示效果看起来尽量一致(当然.假设要充分利用大屏幕的优势另当别论).在全球范围内来讲.android有着数以亿计的设备 ...

  8. PHP-深入理解Opcode缓存

    1.什么是opcode缓存? 当解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode).Opcode cache的目地是避免重复编译, ...

  9. centos7安装thrift

    1. 升级所有软件包 yum -y update 2.安装开发工具 yum -y groupinstall "Development Tools" 3.安装wget yum -y ...

  10. Atitit. visual studio vs2003 vs2005 vs2008  VS2010 vs2012 vs2015新特性 新功能.doc

    Atitit. visual studio vs2003 vs2005 vs2008  VS2010 vs2012 vs2015新特性 新功能.doc 1.1. Visual Studio2 1.2. ...