利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
|
我们在写asp.net网页的时候，会用到很多需要数据绑定的控件。Asp.net提供了数据绑定这一特性，确实方便了很多。但是这样的绑定都是在服务器端完成的，而我们有时会希望根据用户的选择来动态的更新其它一些控件的数据内容。例如用两个DropDownList来让用户选择所在的城市，一个绑定“省”一级的数据，如“浙江”、“吉林”等，另一个绑定用户选择的“省”下面的城市。要实现这样一个动态的数据绑定其实不难，可以把前一个DropDownList的autopostback属性设成true，然后在事件里绑定后一个DropDownList的数据就可以了。这样虽然是可以实现动态数据绑定，但是用户每选一个选项，网页就不得不刷新一次，内容一多，就很浪费时间。那有没有不刷新页面但又能动态绑定数据的方法呢？当然有！方法就是用现在十分流行的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; } }
<%@ 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>
这个就不给了，随便给那个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>
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(); } } |