今天遇到了一个问题：怎么样才能做到只刷新页面中的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. vue - 安装脚手架

    最后不得不屈服与虚拟DOM和框架,太方便了... 1.首先安装node:点击进入官网. 2. 安装后检测 3. 安装yarn(至于为嘛,速度呗) yarn官网,npm转yarn. 3.1 window ...

  2. css - margin-padding

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Oracle 官网 jdk1.6 下载地址

    在oracle官方网站下载地址 http://www.oracle.com/technetwork/java/archive-139210.html http://www.oracle.com/tec ...

  4. 在github上建立jekyll blog

    1.git常用命令(简易介绍见http://rogerdudler.github.io/git-guide/index.zh.html) git init     #创建新的git仓库 git clo ...

  5. mongoDB 数据导出之mongoexport的用法

     http://tuozixuan.iteye.com/blog/1321994     实战代码: #mongo导出 mongoexport --port 33001  -d bsdf_soe -c ...

  6. mac系统中搭建apache+mysql+php的开发环境，安装mysql后，登录报错：mac ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    php新手在mac系统中搭建apache+mysql+php的开发环境(按照这篇博客来操作的:http://my.oschina.net/joanfen/blog/171109?fromerr=xvC ...

  7. pandas时间序列滑窗

    时间序列数据统计-滑动窗口 窗口函数 import pandas as pd import numpy as np ser_obj = pd.Series(np.random.randn(1000), ...

  8. jquery treegrid实例

    前台jqurey代码 function organDatagrid(){ $organ_treegrid = $('#organ_treegrid').treegrid({ url:ctx+'/pet ...

  9. Angularjs学习笔记10_directive3

    1.      restrict M 使用模板 A 属性扩展 2.      template,templateUrl,$templateCache 模板缓存 //注射器加载完所有模块时,此方法执行一 ...

  10. 520. Detect Capital【easy】

    520. Detect Capital[easy] Given a word, you need to judge whether the usage of capitals in it is rig ...