AJAX触发aspnet控件的C#事件（基于Jquery）

来源：互联网发布：童装淘宝网店的名字编辑：程序博客网时间：2024/04/28 14:39

熟悉asp.net事件机制的人都知道，在aspnet生成的页面里有两个隐藏域。

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

第一个“__EVENTTARGET”保存着要触发事件的那个控件的ID,第二个在某些控件触发事件时用来保存事件的名称的某个参数。当页面上的某个控件如：

<asp:Button ID="btn_ItemAdd" runat="server" CssClass="button"  Text="增加" />

被点击时，脚本会自动将“btn_ItemAdd”赋值给__EVENTTATGT,然后再用Submit()提交整个页面。在这里很自然我们就会想到替换aspnet页面自带的脚本，换成异步AJAX的方式提交页面。下面是本人整理后的替换代码，其中使用Jquery和Jquery.form插件。

/*
eventTarget:就是要触发事件的控件ID
eventArgument:一些参数信息，例如gridview的SelectIndexChanged事件就需要把该参数设为Select$1，1为selectrowindex
callBack：Ajax请求完成后要调用的函数（可选）
callBackArg：上面函数调用时传入的参数（可选）
*/
function ajaxEvent(eventTarget,eventArgument,callBack,callBackArg){
    try{
        var theForm = document.forms[0];
//如果页面没有那两个重要的HiddenField则添加 
        if ( !document.getElementById("__EVENTTARGET")) {
            var My__EVENTTARGET  = "<input type = 'hidden' value = '" + eventTarget +"' id = '__EVENTTARGET' name = '__EVENTTARGET' />";
            $(My__EVENTTARGET).appendTo("form");
        }
        if ( !document.getElementById("__EVENTARGUMENT")) {
            var My__EVENTARGUMENT  = "<input type = 'hidden' value = '" + eventArgument +"' id = '__EVENTARGUMENT' name = '__EVENTARGUMENT' />";
            $(My__EVENTARGUMENT).appendTo("form");
        }
        $("#__EVENTTARGET").val(eventTarget);
        $("#__EVENTARGUMENT").val(eventArgument);
    }
    catch(e){
        alert(e);
    }
    try{
        $(theForm).ajaxSubmit(
            function (dataFormServer){
                var returnText=dataFormServer.split("::");
                if(returnText[0]=="False"){ 
                   alert(returnText[1]);
                   return;
                }//如果要返回错误信息，我们约定返回的信息以False::开头，这样可以在这里统一处理出错
                
                if(callBack){
                    if(callBackArg){//如果传入了参数则用用户传入的参数调用回调函数
                        callBack (callBackArg);
                    }
                    else{//默认将服务器返回的信息传递给回调函数
                        callBack (dataFormServer);
                    }
                }
            }
        );
    }
    catch(e){
    }
    return false;//防止页面以submit方式提交
}

有了上面的函数后，我们设置按钮的onclientclick属性为ajaxEvent("btn_ItemAdd","");代码如下

<asp:Button ID="btn_ItemAdd" runat="server" CssClass="button"OnClick="btn_ItemSelect_Click"  Text="增加" OnClientClick="return ajaxEvent('btn_ItemAdd','') />

这样即可触发控件onclick所定义的后台事件了。

采用Ajax触发控件后台事件的方式，可以大大降低开发AJAX程序的成本，缩短开发时间。读者可以自行将上述操作封装成aspnet控件。你可以将你的自定义控件继承自Button,linkbuttn等控件，然后设置他们的Attribute[onclick] = "ajaxEvent()"即可。

需要注意的是上述代码要成功运行需要在页面里添加几个JS引用

    <script language="javascript" type="text/javascript" src="../JS/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../JS/iutil.js"></script>
    <script language="javascript" type="text/javascript" src="../JS/idrag.js"></script>
    <script language="javascript" type="text/javascript" src="../JS/jquery.form.js"></script>

这些都是Jquery东西，在网上很容易下到。