`
javatoyou
  • 浏览: 1008288 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定

 
阅读更多

好长的名字啊!自己看得都觉得累了……废话到此为止,开始正文:

我们在写asp.net网页的时候,会用到很多需要数据绑定的控件。Asp.net提供了数据绑定这一特性,确实方便了很多。但是这样的绑定都是在服务器端完成的,而我们有时会希望根据用户的选择来动态的更新其它一些控件的数据内容。例如用两个DropDownList来让用户选择所在的城市,一个绑定“省”一级的数据,如“浙江”、“吉林”等,另一个绑定用户选择的“省”下面的城市。要实现这样一个动态的数据绑定其实不难,可以把前一个DropDownListautopostback属性设成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.aspxdata是你要post给目标页面的数据,例如“do=getcity&province=100”。Complete里的那个functionShowResult(msg.responseText);是用来处理Ajax的返回结果的,结果会以html的形式保存在参数msg.responseText里。

了解了这个Ajax的调用方法,我们来说说到底怎样实现数据的动态绑定。还是以刚才说的“选择城市”作为例子。首先在你要显示的页面(例如Selectcity.aspx)有一个空的DropDownList(这个是用来选择“城市”的,不是那个选择“省份”的),在其外面包一个<div>标签,idcity。这个是假的,只是在那里占个位子,真正的数据并不会绑定到这个控件上。然后我们在Ajax页面ajax.aspx里也放一个一模一样的DropDownList。然后我们绑定选择“省份”的那个DropDownListonchange事件(以下所说的事件,都是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=citydivinnerHTML里,覆盖原来占位的那个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= provinceDropDownList绑定点数据即可。

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就是前面aspxDropDownList

this.City.DataValueField = "CityID";

this.City.DataSource = CityList;

this.City.DataBind();

}

}

分享到:
评论

相关推荐

    jQuery实现的纯HTML模板进行ajax数据绑定

    具体介绍看http://blog.csdn.net/luq885/archive/2007/06/06/1639933.aspx

    Ajax无刷新分页示例源码2012419

    Ajax无刷新分页示例源码 程序介绍: 程序使用jquery方法提交请求,处理后将数据库绑定到页面中。 Ajax无刷新分页示例源码 程序介绍: 程序使用jquery方法提交请求,处理后将数据库绑定到页面中。 Ajax无...

    使用Ajax和Jquery实现GridView的展开、合并源码

    使用Ajax和Jquery实现GridView的展开、合并 1、 使用用户控件(CustomerOrders.ascx)展示订单列表,此用户控件只需要包含Repeater控件并绑定数据源 2、 新建一个简单页面GridViewDrillDownjQueryQAjax.aspx,在此...

    使用Ajax和Jquery实现GridView的展开、合并源码.rar

    1、 使用用户控件(CustomerOrders.ascx)展示订单列表,此用户控件只需要包含Repeater控件并绑定数据源 2、 新建一个简单页面GridViewDrillDownjQueryQAjax.aspx,在此页面引用用户控件,展示用户订单列表 3、...

    使用Ajax和Jquery实现GridView的展开合并源码 ASP.NET+MSSQL

    1、 使用用户控件(CustomerOrders.ascx)展示订单列表,此用户控件只需要包含Repeater控件并绑定数据源 2、 新建一个简单页面GridViewDrillDownjQueryQAjax.aspx,在此页面引用用户控件,展示用户订单列表 3、 在...

    ExtAspNet_v2.3.2_dll

    -不绑定任何数据到Grid时,确保页面不会出错。 -修正了Grid列属性DataFormatString的一个bug,比如设置{0:yy-MM-dd HH:mm}时没有效果。 -修正下拉列表控件不能绑定DataTable的BUG(feedback:RedOcean)。 -增加...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -优化AJAX的内部实现,每个页面保存的ViewState现在减少1/3左右(重要更新)。 -优化Tree节点的NodeId自动生成,减少ViewState占用。 +2009-08-09 v2.0 beta5 +ExtAspNet和Asp.net的提交按钮兼容问题...

    JAVA上百实例源码以及开源项目

    两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将...

    JAVA上百实例源码以及开源项目源代码

    两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将...

    java开源包3

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包4

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包1

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包11

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包2

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包6

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包5

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包10

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

Global site tag (gtag.js) - Google Analytics