首页 > 学院 > 开发设计 > 正文

使用ICallbackEventHandler接口实现轻量级的Ajax效果

2019-11-17 02:00:20
字体:
来源:转载
供稿:网友

使用ICallbackEventHandler接口实现轻量级的Ajax效果

1,网上关于ICallbackEventHandler的实现效果比较多,之所以继续写关于这个接口的使用有几个原因:(1)时间长了,容易忘记这个接口该怎么使用,肯定又要去搜索。(2)搜索出一堆别人的博客,看着别人写的不舒坦,不爽,所以自己按自己的想法想怎么写就怎么写。(3)看到自己写的博客,几乎很容易就立马想起来当时怎么使用的,很快就知道怎么使用了。(4)还有个原因就是,最近项目不紧,也不知道学点啥,就随便敲几行字。

2,ICallbackEventHandler接口弥补了Ajax框架的不足!Ajax框架比较大,会在前台生成很多的Js代码。而ICallbackEventHandler接口却没有那么麻烦,他的逻辑,也就是前台控件触发(click,doubleclick,mouSEOver,blur,focus),不管哪种触发方式,让他指定执行前台的一个Js方法(该方法是在后台Page_load使用RegisterClientScriptBlock()方法注册到前台)。然后这个Js方法会执行后台的一个方法,后台根据参数经过业务处理,将处理结果赋值给一个属性,然后后台回调方法中将这个属性的值返回,页面前台早已注册好的方法便会根据这个返回值进行相关处理。

3,根据这个逻辑,我写了一个小的Demo,根据用户输入的手机号,判断当前手机号是否已经注册。

(1),前台HTML代码

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script type="text/Javascript">        function receiveServerDataNew(returnVal) {            $("#warn").html(returnVal);        }        $(function () {            $("input[id*='TB_MobilePhone']").blur(function () {                var mobilePhone = $("input[id*='TB_MobilePhone']").val();                callServerEvent(mobilePhone, "");            });        })    </script></head><body>    <form id="form1" runat="server">    <div>    姓    名:<asp:TextBox ID="TB_UserName" runat="server"></asp:TextBox><br />    密    码:<asp:TextBox ID="TB_HiddenCode" runat="server"></asp:TextBox><br />    手机号:<asp:TextBox ID="TB_MobilePhone" runat="server"></asp:TextBox><span id="warn" style=" color:Red";></span>    </div>    </form></body></html>

(2),后台代码

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler    {        PRotected void Page_Load(object sender, EventArgs e)        {            //获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。此重载方法的客户端函数包含指定的控件、参数、客户端脚本和上下文            String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "receiveServerDataNew", "context");            String callbackScript = "function callServerEvent(arg, context)" + "{ " + cbReference + ";}";            //往前台注册脚本            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "callServer", callbackScript, true);        }        private string _CallBackResult = "";         public string GetCallbackResult()        {            return _CallBackResult;        }        public void RaiseCallbackEvent(string eventArgument)        {            if (eventArgument=="")            {                _CallBackResult = "手机号不能为空";            }            //自己查数据库去吧            if (eventArgument=="18866668888")            {                _CallBackResult = "当前手机号已经注册";            }        }    }

4,页面一加载,首先执行后台的Page_Load事件,然后callServerEvent这个方法就注册到前台了,前台页面一生成,便给手机号那个文本框注册了,失去焦点事件,失去焦点的事件里面执行callServerEvent()方法(传入俩个参数),调用后台的RaiseCallbackEvent(string eventArgument)方法,该方法经过业务逻辑处理,赋值给_CallBackResult属性,GetCallbackResult()方法将处理结果返回,同时调用前台方法receiveServerDataNew(),该方法便根据后台的处理结果,进行页面处理。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表