很多用户都有这样需求，比如：点击按钮，刷新 GridView 中的数据，而不是这个页面刷新。其实,使用javascript实现简单的Ajax就可以直接实现。具体代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="_efault2.aspx.cs" Inherits="_efault2" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<script runat ="server">
System.Data.DataView CreateDataSourceByXianhuiMeng()
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add( new System.Data.DataColumn( "id" , typeof (System.Int32)));
dt.Columns.Add( new System.Data.DataColumn( "学生姓名" , typeof (System.String)));
dt.Columns.Add( new System.Data.DataColumn( "语文" , typeof (System.Decimal)));
dt.Columns.Add( new System.Data.DataColumn( "数学" , typeof (System.Decimal)));
dt.Columns.Add( new System.Data.DataColumn( "英语" , typeof (System.Decimal)));
dt.Columns.Add( new System.Data.DataColumn( "计算机" , typeof (System.Decimal)));
for ( int i = 1 ; i < 30 ; i ++ )
{
System.Random rd = new System.Random(Environment.TickCount * i); ;
dr = dt.NewRow();
dr[ 0 ] = i;
dr[ 1 ] = "【孟子E章】" + i.ToString();
dr[ 2 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
dr[ 3 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
dr[ 4 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
dr[ 5 ] = System.Math.Round(rd.NextDouble() * 100 , 2 );
dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
}
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString[ "id" ] != null )
{
Response.ClearContent();
GridView1.DataSource = CreateDataSourceByXianhuiMeng();
GridView1.DataBind();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
Literal header = new Literal();
header.Text = "<h2>项目" + Request.QueryString[ "id" ] + "</h2>" ;
Header.Controls.Add(header);
Header.RenderControl(htw);
GridView1.RenderControl(htw);
Response.Write( "这里查询数据，输出结果就可以了。结果：" + sb.ToString());
Response.End();
}
}
/// 添加这个override void VerifyRenderingInServerForm(Control control)，是为了避免出现
/// 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。
/// 的异常
public override void VerifyRenderingInServerForm(Control control)
{ }
</script>
<html xmlns ="http://www.w3.org/1999/xhtml">
<head id ="Head1" runat ="server">
<title> 使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现 </title>
<script type ="text/javascript">
function GetData(p) {
document.getElementById("d").innerHTML = "正在读取数据……" ;
h = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
h.open("GET" , '<%=Request.FilePath %>?id=' + p.value, true);
h.onreadystatechange = function () {
if (h.readyState == 4 ) {
if (h.status >= 200 && h.status < 300 ) {
document.getElementById("d").innerHTML = h.responseText;
}
else {
document.getElementById("d").innerHTML = "<h2>数据操作错误：</h2>" + h.responseText;
}
}
}
h.send( null );
}
alert("这个提示，只出现在第一次打开页面。");
</script>
</head>
<body>
<form id ="form1" runat ="server">
<asp:GridView ID ="GridView1" runat ="server"></asp:GridView>
<asp:Panel ID ="Header" runat ="server"></asp:Panel>
<select onchange ="GetData(this)">
<option value ="1"> 项目一 </option>
<option value ="2"> 项目二 </option>
</select>
</form>
<div id ="d"></div>
</body>
</html>
分享到：
相关推荐
本示例将详细讲解如何使用Ajax实现GridView的局部刷新和数据绑定。 首先，我们需要理解Ajax的基本原理。Ajax的核心是JavaScript的XMLHttpRequest对象，它可以异步地向服务器发送请求，并接收响应。在ASP.NET中，...
#### 一、GridView与AJAX局部刷新原理 - **GridView**：ASP.NET中的一个数据绑定控件，用于显示表格形式的数据。它可以自动处理排序、分页等功能，使得开发者能轻松地展示数据库中的数据。 - **AJAX**（Asynchronous...
为了提升用户体验，可以使用AJAX技术实现局部刷新，使操作更加流畅。 在提供的文件`GridViewEditTry2`中，很可能是包含了一个示例项目的源代码，你可以通过查看和运行这个项目来进一步理解上述概念。项目可能包含了...
在ASP.NET中，实现AJAX局部刷新Gridview，通常需要以下步骤： 1. 在ASP.NET页面中添加ScriptManager控件，它是AJAX功能的基础。 2. 将GridView放入UpdatePanel中，UpdatePanel会控制其内部元素的异步更新。 3. 设置...
这样，尽管服务器进行了处理，但用户的浏览器看到的只是局部更新，实现了视觉上的无刷新效果。 要实现GridView的无刷新更新，首先需要在页面上添加一个UpdatePanel，并将GridView控件放入其中。接着，设置...
总结一下，这个自定义的翻页无刷新GridView控件主要通过以下步骤实现： 1. 使用UpdatePanel包裹GridView，实现局部更新。 2. 在后台处理数据获取和分页逻辑。 3. 前端使用AJAX监听分页按钮，发送请求到服务器。 4. ...
4. **局部刷新**：当数据发生变化时，只更新受影响的部分，而不是整个GridView。这可以通过定位到改变的数据项并调用Adapter的`notifyDataSetChanged()`方法来实现，如果知道具体改变的项，甚至可以调用`...
Ajax的核心是通过JavaScript与XMLHttpRequest对象进行异步数据交换，实现页面的局部刷新，从而提升了用户体验。在ASP.NET环境中，Ajax技术被广泛应用于构建响应式和高效的Web应用程序。 **无刷新页面技术** 无刷新...
在ASP.NET开发中，GridView控件是一个非常常用的数据展示组件，它可以方便地对数据库中的数据进行分页、排序和编辑等操作。然而，对于复杂的网页交互需求，单纯使用GridView可能无法满足，这时就需要引入Ajax和...
UpdatePanel控件是ASP.NET AJAX库的一部分，它可以创建一个局部刷新的区域。在GridView外部添加一个UpdatePanel，然后将GridView放入其中。设置UpdatePanel的`Triggers`属性，确保当GridView的排序事件触发时，...
而异步数据分组则通过Ajax（Asynchronous JavaScript and XML）技术，在客户端进行，无需刷新整个页面，只更新GridView的部分内容，提高了交互性。 2. **GridView控件**：GridView是ASP.NET Web Forms中的一个...
在这个场景下，“使用Ajax和Jquery实现GridView的展开、合并源码”就显得尤为重要。 Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下更新部分网页内容，提高了用户体验。而jQuery是...
在分页请求成功后，JavaScript会将新的数据对象绑定到这些控件，从而实现数据源的更新。同时，`Web.config`文件可能包含了AjaxPro的配置，比如服务路径和启用的Ajax功能。 **数据处理：** 在`data`目录中，可能包含...
结合jQuery或其他AJAX库，可以实现局部刷新，只更新UI中与数据更改相关的部分，提高页面响应速度。 10. **数据验证**： 数据绑定常常与数据验证结合使用，确保用户输入的数据符合预期格式和规则，提高数据的准确...
`GridView`的每一行都可以绑定到数据库中的记录，使得数据的展示和管理变得简单直观。 `Ajax`（Asynchronous JavaScript and XML）技术允许我们在不重新加载整个页面的情况下更新页面的部分区域，从而提供更流畅的...
在本主题中，我们主要关注如何使用Ajax技术来实现GridView的无刷新排序功能，这对于提高用户体验至关重要，因为用户无需等待整个页面刷新即可完成数据排序。 Ajax（Asynchronous JavaScript and XML）是一种在不...
8. 集成Ajax：随着Ajax技术的发展，新的GridView功能可能包含了更好的Ajax支持，实现局部刷新，提供更流畅的用户体验。 9. 国际化与本地化：为了适应全球化应用，新功能可能包括对多语言的支持，使GridView能够轻松...
在传统的Web应用中，当用户对GridView中的数据进行操作（如编辑、删除或排序）时，整个页面会刷新，导致用户体验下降。通过引入Ajax，我们可以使这些操作变得异步，仅更新必要的内容，保持页面其他部分的完整性。 ...