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

    其作用都是用来简化action.reducer. 1.安装 npm install --save redux-actions // 或 yarn add redux-actions 2.使用 crea ...

  2. vue sync用法

    1.父组件 <add-rule :show.sync="showEditDialog" :addOrUpdate="addOrUpdate" @close ...

  3. lodash escapeRegExp 转义正则特殊字符

    _.escapeRegExp([string='']) 转义RegExp 中特殊的字符 "^", "$", "\", ".&quo ...

  4. 严重: Exception sending context initialized event to listener instance of class org.springframework.we

    2014-6-1 0:47:25 org.apache.catalina.core.AprLifecycleListener init 信息: The APR based Apache Tomcat ...

  5. svn上检出的项目在myeclipse中报错的解决

    项目本身应该是没问题的,应该是验证方面导致的错误的报错,取消验证即可:右键项目,如下操作: 除此之外,还应考虑是否环境问题引起的报错,比如:项目jar包是否发布,jdk的版本,tomcat的版本,等等

  6. C语言-十进制转换为二进制函数

    char * itobs(int num, char * str) { int i; * sizeof(int); ; i >= ; i--, num >>= ) { str[i] ...

  7. 开源静态分析工具androguard体验

    原文链接:http://blog.csdn.net/xbalien29/article/details/21885297 虽然在windows端免费版的IDA.VTS等工具都可用来静态分析,但相对来说 ...

  8. 轻量级代码生成器-OnlyCoder 第一篇

    程序猿利器:代码生成器,使用代码生成器已经好几年了,增删改查各种生成,从UI到DATA层均生成过.之前有使用过动软的,T4模板等....  T4生成实体还是没有问题的,但是生成MVC视图就有点烦杂了, ...

  9. 【web开发学习笔记】Structs2 Result学习笔记（一）简介

    Structs2 Result学习笔记(一)简介 问题一 <struts> <constant name="struts.devMode" value=" ...

  10. C/C++ 错误笔记-如果要释放内存，必须拿到内存的首地址进行释放

    例:修改字符串的第三个字母为a #include <stdlib.h> #include <string.h> #include <stdio.h> #pragma ...