浅谈如何利用__doPostBack()函数做自己灵活的AJAX.NET应用

来源：互联网发布：泰州师说网络培训登录编辑：程序博客网时间：2024/06/16 09:50

大家都很惊叹微软的Ajax.NET简单的操作，但是有没有觉得它的灵活性大大减小了呢？以前纯手写的xmlhttm的Ajax和AjaxPor.dll提供的Ajax都是非常灵活的，可以使用任意的客户端触发方式(onclick,onmouseover,onkeydown...)，和调用任意的服务器端自定义函数。而微软的Ajax.net似乎只能使用服务器控件的很少的事件，最常用的就是Button的onclick事件，而服务器端的函数也似乎只能是服务器端控件的事件函数，难道我们在页面上每添加一个Ajax功能，就要多添加一个Button控件和它的一个onclick事件吗？这似乎非常的不灵活啊！

我们程序员当然是想越简单越好，还要越灵活越好，要是为了简单而失去了灵活，那就失去意义了。

下面这个例子就是我利用Ajax.net的__doPostBack()函数演示如何做到非常灵活地使用Ajax.net，灵活到客户端使用任意触发方式，传递任意参数，服务器端调用任何函数，做任何想做的事情。

下面是源代码，注：需要配置Web.config并且需要有Web.Extensions控件。实例下载包(包括web.config和Web.Extensions)

FanGAjax.aspx

-------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FanGAjax.aspx.cs" Inherits="FanGAjax" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>自定义Ajax.net的触发方式和调用服务器端的任何函数</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div style="border:1px dashed #AABBCC; width:300px"> UpdatePannel1<br /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br /> <asp:TextBox ID="TextBox1" Width="200px" runat="server"></asp:TextBox><br /> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> <br /> <br />  <asp:Button ID="_AJAXENTRANCE" runat="server" OnClick="_AJAXENTRANCE_Click" Text="_AJAXENTRANCE" style="display:none" mce_style="display:none" /> <input id="_AJAXARGS" type="hidden" name="_AJAXArgs" value="fun1$001" />  </div> </ContentTemplate> </asp:UpdatePanel> </div> <br /> <input id="StaticButton" type="button" value="HtmlButton" onclick="javascript:__doPostBack('_AJAXENTRANCE','')" /> <span id="Triger1" style="border:1px solid #77AAEE; background:#BBEEFF; padding:1px" mce_style="border:1px solid #77AAEE; background:#BBEEFF; padding:1px" onmouseover="javascript:document.all._AJAXARGS.value='fun2$FanG'; __doPostBack('_AJAXENTRANCE','')">Put Mouse over here</span> <br /> <br /> <br /> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <div style="border:1px dashed #AABBCC; width:300px"> UpdatePannel2<br /> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <br /> <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True" OnTextChanged="TextBox2_TextChanged"></asp:TextBox><br /> <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" /> </div> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

FanGAjax.aspx.cs

---------------

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class FanGAjax : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { } /*********下面是Ajax.net自动调用的事件函数 **/ protected void Button1_Click(object sender, EventArgs e) { Label1.Text ="ServerTime:" + DateTime.Now.ToLongTimeString(); } protected void Button2_Click(object sender, EventArgs e) { Label2.Text = "Pannel2's Repsonse"; } protected void TextBox2_TextChanged(object sender, EventArgs e) { Label2.Text = "From Text Change"; } /*********************************************************/ /*********下面是自定义Ajax函数的入口 **/ protected void _AJAXENTRANCE_Click(object sender, EventArgs e) { //Ajax参数，由前台JS设置，后台根据这个参数选择调用不同的Server函数，并传递参数 //至于怎么利用这些参数，完全取决于你自己啦 string args = Request.Form["_AJAXARGS"].ToString(); string funresult = ""; string[] funargs = args.Split('$'); if (funargs[0] == "fun1") { funresult=MyServerFun1(funargs[1]); } else if (funargs[0] == "fun2") { funresult = MyServerFun2(funargs[1]); } TextBox1.Text = funresult; Label1.Text = "Update by Ajax Entrance"; } /********下面是自定义的Server C# 函数***/ protected string MyServerFun1(string arg) { Label2.Text = "Form Customer defined server function1"; return "Parameters: "+arg; } protected string MyServerFun2(string arg) { Label2.Text = "server function2"; TextBox2.Text = "server function2"; return "Parameters: " + arg; }}

-----------

其中：HTMLButton是一个简单的HTML按钮，不是服务器控件，它的Click动作也能触发AJAX，并且调用后台的函数MyServerFun1

“Put Mouse over here”的Span也是简单的HTML Span，它的Onmouseover事件也能触发AJAX，调用后台的MyServerFun2

MyServerFun1和MyServerFun2都是普通的Server自定义函数，并非控件的事件函数。

其实大家一看就明白，实例还是通过一个Button控件__AJAXENTRANCE和一个隐藏域__AJAXAGRS来触发AJAX和传递参数的，这仅仅是一个小技巧而已，但是却能给我们带来非常大的灵活性！