Javascript触发Ajax回传，并且触发特定的事件

今天开发了一个Asp.net控件，通过此控件用户可以通过前天的javascript触发ajax回传，并且触发服务段的特定事件，然后局部刷新客户端界面，更新Viewstate。大家可以在这里下载源代码http://download.csdn.net/detail/robertdong1203/4487231。

下面介绍一下控件的实现的基本原理：创建一个UpdatePanel，并在此UpdatePanel中包含一个不显示的span，这样关于这个span的所以回传就会走Ajax回传。由于span的id为我们的控件的ClientID，所以当回传到达server上以后就会自动分发到空的回传实践中。最后在前天注册相应的回传的javascript函数。

 

实现步骤：

1. 首先创建一个类，并使其基层WebControl和IPostBackEventHandler

2. 在类中定义相应的delegate和event：

public delegate void AjaxCallbackDel(string arg);
privateevent AjaxCallbackDel AjaxCallback;

他们是用来当javascript回传时触发的特定事件。

2. 在类中添加私有的UpdatePanel

internal UpdatePanel selfUpdatePanel = null;

然后再selfUpdatePanel的controls中加入id为当前控件的Client的Span

protected override void CreateChildControls()
        {
            EnsureID();

            base.CreateChildControls();

            selfUpdatePanel = new UpdatePanel();
            selfUpdatePanel.ID = this.UniqueID + "SU";
            selfUpdatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
            selfUpdatePanel.EnableViewState = false;

            LiteralControl _htmlControl = new LiteralControl(
                String.Format(@"<span id=""{0}"" style=""display:none;""></span>",
                                      this.ClientID));
            selfUpdatePanel.ContentTemplateContainer.Controls.Add(_htmlControl);

            this.Controls.Add(selfUpdatePanel);
        }

应为此控件只是起到桥梁的作用，所以他的Render方法直接输出selfUpdatePanel的输出

protected override void Render(HtmlTextWriter writer)
        {
            selfUpdatePanel.RenderControl(writer);
        }

3. 在控件的OnPreRender方法中注册客户端要使用到的回传函数

protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            ScriptManager.RegisterStartupScript(this,this.GetType(), "callBack",
               @"window.ajaxCallback = function ajaxCallback(arg){__doPostBack('" + this.UniqueID + "', arg);}", true);
        }

4. 最后我们必须IPostBackEventHandler的RaisePostBackEvent方法，以调用事件AjaxCallback

public void RaisePostBackEvent(string eventArgument)
        {
            OnAjaxRequest(eventArgument);
        }

private void OnAjaxRequest(string eventArgument)
        {
            if (this.AjaxCallback != null)
            {
                this.AjaxCallback(eventArgument);
            }
        }