2006年12月28日

在Microsoft Ajax中,UpdatePanel是一个重要的控件.因为它的存在,我们可以无缝的将Ajax加入到我们的Asp.Net应用程序中.

我们知道,在Asp.Net下Ajax实际上使用了反射,在服务器端动态创建了指定Page的实例并调用实例中的方法,那这就意味着方法的内容无法正常访问当前Page页上控件的内容,但是为什么UpdatePanel中的内容却又可以访问?
UpdatePanel真的很神奇?

OK,现在让我们来揭开UpdatePanel的真实面目.先来看一张图:


上图简要的说明了UpdatePanel中的方法调用的过程,与一般的Ajax的方法调用相比,多了序列化/反序列化及Page实例更新的过程.
这个过程与传统的Asp.Net的执行过程非常相似,对应的为:LoadViewState/SaveViewState.

现在知道了UpdatePanel是如何工作的了,但是还有一个问题:明明是Submit按钮,为什么在UpdatePanel中就无法Submit了呢?
答案是:Form的Submit事件被截获了,也正是因为截获了Submit事件我们才能在客户端序列化我们需要的内容.

以下是实现客户端序列化的部分代码:

  formBody.append(this._scriptManagerID + '=' + this._postBackSettings.panelID + '&');

        var count = form.elements.length;
        for (var i = 0; i < count; i++) {
            var element = form.elements[i];
            var name = element.name;
            if (typeof(name) === "undefined" || (name === null) || (name.length === 0)) {
                continue;
            }

            var tagName = element.tagName;

            if (tagName === 'INPUT') {
                var type = element.type;
                if ((type === 'text') ||
                    (type === 'password') ||
                    (type === 'hidden') ||
                    (((type === 'checkbox') || (type === 'radio')) && element.checked)) {
                    formBody.append(name);
                    formBody.append('=');
                    formBody.append(encodeURIComponent(element.value));
                    formBody.append('&');
                }
            }
            else if (tagName === 'SELECT') {
                var optionCount = element.options.length;
                for (var j = 0; j < optionCount; j++) {
                    var option = element.options[j];
                    if (option.selected) {
                        formBody.append(name);
                        formBody.append('=');
                        formBody.append(encodeURIComponent(option.value));
                        formBody.append('&');
                    }
                }
            }
            else if (tagName === 'TEXTAREA') {
                formBody.append(name);
                formBody.append('=');
                formBody.append(encodeURIComponent(element.value));
                formBody.append('&');
            }
        }

        if (this._additionalInput) {
            formBody.append(this._additionalInput);
            this._additionalInput = null;
        }

        var request = new Sys.Net.WebRequest();
        request.set_url(form.action);
        request.get_headers()['X-MicrosoftAjax'] = 'Delta=true';
        request.get_headers()['Cache-Control'] = 'no-cache';
        request.set_timeout(this._asyncPostBackTimeout);
        request.add_completed(Function.createDelegate(this, this._onFormSubmitCompleted));
        request.set_body(formBody.toString());

更多的内容可以查看:MicrosoftAjaxWebForms.js文件.