好长的名字啊！自己看得都觉得累了……废话到此为止，开始正文：
我们在写asp.net网页的时候，会用到很多需要数据绑定的控件。Asp.net提供了数据绑定这一特性，确实方便了很多。但是这样的绑定都是在服务器端完成的，而我们有时会希望根据用户的选择来动态的更新其它一些控件的数据内容。例如用两个DropDownList来让用户选择所在的城市，一个绑定“省”一级的数据，如“浙江”、“吉林”等，另一个绑定用户选择的“省”下面的城市。要实现这样一个动态的数据绑定其实不难，可以把前一个DropDownList的autopostback属性设成true，然后在事件里绑定后一个DropDownList的数据就可以了。这样虽然是可以实现动态数据绑定，但是用户每选一个选项，网页就不得不刷新一次，内容一多，就很浪费时间。那有没有不刷新页面但又能动态绑定数据的方法呢？当然有！方法就是用现在十分流行的Ajax技术。
Ajax的应用十分广泛，这里仅仅介绍利用JQuery来实现异步数据更新的方法。jQuery 是一个JavaScript 库，它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。在JQuery中有一个Ajax的调用方法：
$.ajax({
type: "POST",
url: window.location.protocol + "//" + window.location.host + “a.aspx”,
data: postdata,
complete: function(msg){
ShowResult(msg.responseText);
} ,
dataType : "html"
});
这里的url是目标页面，通常我们会专门处理这些Ajax请求，单独写一个页面，这里假定为ajax.aspx。data是你要post给目标页面的数据，例如“do=getcity&province=100”。Complete里的那个function：ShowResult(msg.responseText);是用来处理Ajax的返回结果的，结果会以html的形式保存在参数msg.responseText里。
了解了这个Ajax的调用方法，我们来说说到底怎样实现数据的动态绑定。还是以刚才说的“选择城市”作为例子。首先在你要显示的页面（例如Selectcity.aspx）有一个空的DropDownList（这个是用来选择“城市”的，不是那个选择“省份”的），在其外面包一个<div>标签，id为city。这个是假的，只是在那里占个位子，真正的数据并不会绑定到这个控件上。然后我们在Ajax页面ajax.aspx里也放一个一模一样的DropDownList。然后我们绑定选择“省份”的那个DropDownList的onchange事件（以下所说的事件，都是javascript事件，而非asp.net事件），让其调用我们的ajax方法。然后，ajax会把用户选择的“省份”放在postdata里（如“do=getcity&province=100”）传到Ajax.aspx页面，页面获得这个参数后，为ajax.aspx上的DropDownList绑定数据。结果以html的形式保存到msg.responseText里。
接下来要怎么做也许你已经想到了，对了，我们要用的就是“狸猫换太子”的手段。前面调用ajax方法的时候，不是还有一个ShowResult的方法吗？那个方法在获得了我们ajax页面的返回结果。我们知道，DropDownList最终生成的<select>空间，所以我们把返回结果里从“<select>”到“</select>”之间的部分提取出来，替换到那个id=city的div的innerHTML里，覆盖原来占位的那个DropDownList。于是，我们的动态数据绑定就完成了。
不知道你听明白了没有，下面给出文中提到的各个文件的源码，如果你没有看明白，就自己捉摸捉摸吧^_^
Ajax.js
function GetCity(provinceID)
{
$.ajax({
type: "POST",
url: window.location.protocol + "//" + window.location.host + "/Ajax.aspx",
data: "do=GetCity&ProvinceID=" + provinceID,
complete: function(msg){
ShowCity(msg.responseText);
} ,
dataType : "html"
});
}
function ShowCity(strCode)
{
var obj = document.getElementByid("City");
var start = strCode.indexOf("<select");
var end = strCode.indexOf("</select>") + 9;
var strHtml = strCode.substring(start,end);
if (obj!=null)
{
obj.innerHTML = strHtml;
}
}
Selectcity.aspx
<%@ Page language="c#" Codebehind="Selectcity.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>
<html>
<head>
<title>Selectcity</title>
<script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>
<script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>
</head>
<body topmargin="0" marginwidth="0" marginheight="0">
<form id="Form1" method="post" runat="server">
<asp:DropDownList ID="province" runat="server"></asp:DropDownList>
<div id="city">
<asp:DropDownList ID="oldcity" runat="server"></asp:DropDownList>
</div>
</form>
</body>
</html>
Selectcity.aspx.cs
这个就不给了，随便给那个ID= province的DropDownList绑定点数据即可。
ajax.aspx
<%@ Page language="c#" Codebehind="Ajax.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>
<html>
<head>
<title>Selectcity</title>
<script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>
<script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>
</head>
<body topmargin="0" marginwidth="0" marginheight="0">
<form id="Form1" method="post" runat="server">
<asp:DropDownList ID="city" runat="server"></asp:DropDownList>
</form>
</body>
</html>
Ajax.aspx.cs（只列出关键代码，其它的省略）
protected void Page_Load(object sender, EventArgs e)
{
string strAction = Request.Form["do"] + String.Empty;
switch (strAction)
{
case "GetCity":
GetCity();
break;
}
}
protected void GetCity()
{
string strProvinceID = Request.Form["ProvinceID"] ?? String.Empty;
if (!String.IsNullOrEmpty(strProvinceID))
{
List<City> CityList = /*你要绑定的数据*/;
this.City.DataTextField = "CityName"; //这里的city就是前面aspx的DropDownList
this.City.DataValueField = "CityID";
this.City.DataSource = CityList;
this.City.DataBind();
}
}
分享到：
相关推荐
在本案例中，我们探讨如何使用jQuery、XML以及Ajax技术来实现一个动态加载且无刷新的树形结构。该树形结构适用于各种场景，如文件系统、产品分类等。 #### 2. 后端C#代码解析 首先，我们来看一下后端C#代码的实现...
本篇文章将详细讲解如何利用jQuery和Ajax实现GridView控件的详细内容动态显示。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理以及Ajax交互。在ASP.NET中，GridView是一种常用的...
2. **事件绑定**：利用Jquery的`$(document).ready()`函数确保在页面加载完成后执行特定代码。使用`$("#registerForm").submit(function(event) {...})`监听表单提交事件，防止页面刷新。 3. **Ajax调用**：当用户...
ASP.NET、jQuery 和 AJAX 的组合在 Web 应用开发中被广泛用于实现高效、无刷新的文件上传功能。本文将详细讲解如何利用这些技术来创建一个动态、用户体验友好的文件上传系统。 首先，ASP.NET 是 Microsoft 提供的一...
AJAX（异步JavaScript和XML）技术则允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在用户管理系统中，AJAX用于后台数据的无刷新获取和提交，提高了用户体验，使得用户在操作过程中感觉更加...
本文将深入探讨如何结合AspNetPager分页控件、jQuery和AJAX技术来实现服务器端数据源的无刷新分页。 AspNetPager是由WebControlsWPC公司开发的一款强大的ASP.NET分页控件，它支持多种数据库和数据源，提供了丰富的...
但通过Ajax，我们可以向服务器发送异步请求，获取最新数据，然后动态地将这些数据插入到页面的特定位置，实现数据的实时更新。这对于实时数据显示，如股票报价、天气预报或者聊天室等场景尤其适用。 **无刷新绑定**...
**Ajax无刷新分页Jquery** 是一种网页技术，它允许用户在不重新加载整个页面的情况下更新部分网页内容。这种技术极大地提升了用户体验，因为它减少了页面加载时间，使得用户能够更流畅地浏览和交互。在ASP.NET框架下...
这个示例展示了如何在客户端使用jQuery的AJAX来实现无刷新的数据获取，以及在服务器端使用ASP.NET和ADO.NET处理数据库查询，最终将结果动态加载到GridView中。这样的设计提高了网页的交互性和响应性，使得用户能够在...
根据提供的文件信息，我们可以深入探讨如何在 jQuery 中运用 AJAX 技术，并结合 C# 进行服务器端的数据处理。下面将详细分析此示例代码的关键知识点。 ### 1. jQuery AJAX 的基本用法 #### 1.1 $.post 方法详解 在...
通过以上分析，我们可以看出，这个“AJAX无刷新留言”系统利用了AJAX技术提高了用户体验，结合ASP.NET的GridView控件实现了动态数据展示，同时提供了头像选择功能，使得用户互动更加便捷。服务器端的接口设计和...
3. **AJAX**：ASP.NET AJAX库可以与jQuery一起使用，实现无刷新页面更新，提高用户体验。通过异步调用，用户可以即时查看新订阅的RSS源，无需整个页面刷新。 4. **HTTP Web请求**：为了从RSS源获取数据，项目可能...
在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态和交互性网页的技术，它允许页面部分数据的异步更新，无需整体刷新页面。在ASP.NET环境中，GRIDVIEW控件通常用于展示和操作表格数据，而通过...
通过上述知识点的学习，我们可以了解到如何使用JQuery结合Ajax技术实现Table数据的动态绑定及分页功能。这种方式不仅能够提升用户体验，还能有效减轻服务器压力，是现代Web开发中常用的技术手段之一。在实际项目开发...
在这个"JqueryAjax简单实例"中，我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先，我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....
总结来说，这个项目展示了如何在ASP.NET中利用jQuery进行Ajax请求，结合JSON传输数据，实现动态分页。用户无须刷新整个页面，只需点击分页按钮，后台就能通过Handler处理请求，返回指定页码的数据，再由jQuery更新...
Ajax无刷新分页示例源码 程序介绍： 程序使用jquery方法提交请求，处理后将数据库绑定到页面中。 Ajax无刷新分页示例源码 程序介绍： 程序使用jquery方法提交请求，处理后将数据库绑定到页面中。 Ajax无...
Ajax（Asynchronous JavaScript and XML）技术作为一种能够实现局部刷新、异步加载数据的强大工具，成为了现代Web开发不可或缺的一部分。jQuery作为一款优秀的JavaScript库，它极大地简化了Ajax操作，使得开发者能够...
- GridView通常与数据源控件（如SqlDataSource或ObjectDataSource）结合使用，以实现动态数据绑定。确保在GridView的生命周期方法中正确配置这些数据源控件。 6. **App_Code和App_Data** - `App_Code`文件夹通常...