今天遇到了一个问题：怎么样才能做到只刷新页面中的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. linux 终端分屏命令vsp（转）

    比如:某文件夹下有文件:vector.cc, substr.cc 1.使用vim命令打开任意一个文件:vim vector.cc打开第一个文件.如下图所示: 2.按:"Esc"键 ...

  2. 【Python3 爬虫】14_爬取淘宝上的手机图片

    现在我们想要使用爬虫爬取淘宝上的手机图片,那么该如何爬取呢?该做些什么准备工作呢? 首先,我们需要分析网页,先看看网页有哪些规律 打开淘宝网站http://www.taobao.com/ 我们可以看到 ...

  3. springMVC4(5)RestTemplate控制层单元測试

    在前面我们进行web測试,总要在游览器进行.数据组装.请求方法更给等都极为麻烦. RestTemplate是Spring提供的一个web层測试模板类,我们能够通过RestTemplate在client ...

  4. Mac 常用命令介绍

    1.查看所有shell cat /etc/shells 2.查看当前使用的shell类型 $ echo $SHELL 3.

  5. 贯通tomcat --- 电子书

    http://www.educity.cn/jiaocheng/j10865.html 第1章 认识Tomcat [本章导读] Tomcat服务器是一个免费的开放源代码的Web应用服务器.它是Apac ...

  6. Atitit.跨语言  文件夹与文件的io操作集合  草案

    Atitit.跨语言  文件夹与文件的io操作集合  草案 1. Jdk原生的太难用了..1 2. PS: apache commons-io包,FileUtils有相关的方法,IOUtils一般是拷 ...

  7. Atitit.跨语言反射api 兼容性提升与增强 java c#。Net  php  js

    Atitit.跨语言反射api 兼容性提升与增强 java c#.Net  php  js 1. 什么是反射1 1.1.       反射提供的主要功能:1 1.2.       实现反射的过程:1 ...

  8. 看好你的门-攻击服务端(3)-SOAP注入攻击

    首先须要声明,本文纯属一个毫无远见和真才实学的小小开发者的愚昧见解.仅供用于web系统安全方面的參考. 1.SOAP注入攻击 server端的XML解析引擎从client接收输入信息.这里指的clie ...

  9. C++语言基础(18)-模板

    Java中的泛型编程可以极大的提升编程的效率,比如在android中查找一个控件的ID:标准写法为: TextView tv_text = (TextView)findViewById(R.id.tv ...

  10. Creating Icon Overlay Handlers / 创建图标标记 Handlers (续) / VC++, Windows, DLL, ATL, COM

    创建图标标记 Handlers (续) 1.新建一个ATL Project. 2.建议将 Project Property 中 Linker – General - “Register Output” ...