如何将 ScriptManager UpdatePanel 移植到基于 jQuery 的解决方案？

Question

我们目前正在将旧版 web 应用程序的客户端部分从 asp.net ajax 迁移到 jquery/jquery-ui。该应用程序包括（除其他外）一些 asp.net ajax UpdatePanels。

现在我想扔掉所有 __doPostback() 的东西，并与 jQuery 的 $.ajax 对话到 .ascx 控件的“服务器端”。理想情况下，服务器会使用一些可解析的数据结构进行响应，我可以将这些数据结构放入我的 jQuery UI 控件中。

我已经意识到这很难做到，因为 asp.net ajax 客户端/服务器代码相互交织，并且没有公共接口可以挂钩到 ajax 请求或响应。但是，我们不想更改服务器端代码，因为它仍应使用旧的 asp.net 前端运行。

经过一些调整后，我发现我可以挂钩到 ScriptManager 的 beforeRequest 和 endRequest 事件，以获得回发和部分响应的通知。我将这些分发给 jQuery 事件：

   var paqeRequestInst = window.Sys.WebForms.PageRequestManager.getInstance();
    //bind ASP.NET ScriptManager events to jQuery events
    paqeRequestInst._events.addHandler('beforeRequest', function(){
         $(window).trigger('beforePanelResponse');
    });
    paqeRequestInst._events.addHandler('endRequest', function(pageRequestInst, ErrInst){
        $(window).trigger('afterPanelResponse', [pageRequestInst, ErrInst]);
    });

但是，还有很多问题：

• 拦截 ScriptManager 响应、解析它并将其放入我的 jQuery UI 控件的最佳方法是什么？
• 如何更新通常由 ScriptManager 管理的所有 __VIEWSTATE 内容？
• 对于这种“asp.net ajax 到 jquery”场景，是否有最佳实践/jquery 插件？

Answer 1

根据我的经验，我发现服务器端控件阻碍了 ajax 的开发。此外，要使 JQuery 与 ASP.NET 一起正常工作，需要完全放弃在页面的代码隐藏中进行处理的想法......

JQuery/ASP.NET 模型的工作非常简单：

JQuery POST/GET 请求 -> ASP.NET 通用处理程序 -> 数据访问层。

数据访问层 -> ASP.NET 通用处理程序 -> JSON 响应 -> JQuery。

所以整个 UpdatePanel 概念只是一个抽象概念......它在语义上跟踪客户端发送 AJAX 请求后需要更新页面的哪些部分。问题是 UpdatePanel 发送整个页面（每个ajax 请求），而且很重......

我们可以通过在 ajax 调用后显式更新页面的某些部分来模仿 UpdatePanel 操作。在下面的 sn-ps 中，我将向您展示如何模拟 UpdatePanel 的功能。使用的场景是用户在文本框中输入他们的姓名，然后我们前往服务器进行验证，并将电子邮件地址和 userId 返回到页面。

在回调 (javascript) 中，如果我们有从服务器发送的数据，我们将使用用户的 id 填充隐藏字段，并使用用户的电子邮件填充电子邮件地址 div。

就是这样......更多的工作，但性能提升绝对值得。

HTML

<div id="pnl_somepanel">
    <input type="hidden" id="hdf_userId"/>
    <input type="text" id="txtname" />
    <a href="#" id="lnkbtn_posttoserver">Get Email Address</a>
    <div id="lbl_email" style="display:none"/>
</div>

JavaScript

$(function(){
    $('#lnkbtn_posttoserver').click(function(event){

        //we get data from server, sending the name typed in the textbox as a parameter
        $.post('/Handlers/verifyuser.ashx', { name:$('#txtname').val() }, function(data){

            if( data != '' )
            {
                var userData = $.parseJSON(data);
                $('#lbl_email').text(userData.Email).slideDown('slow'); //show the div
                $('#hdf_userId').val(userData.Id);
            }

        });

    });
});

服务器 - /Handlers/verifyuser.ashx

public class verifyuser : IHttpHandler, IRequiresSessionState
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string name = (string.IsNullOrEmpty(context.Request.Params["name"])) ? string.Empty : context.Request.Params["name"];          
        //name parameter sent by JQuery

        MembershipUser user = Membership.GetUser();

        if( user.UserName == name )
        {
            var userObject = new { 
                Id: user.ProviderUserKey.ToString().Replace(("{}").ToCharArray(),
                Email: user.Email 
            };

            JavaScriptSerializer jSerializer = new JavaScriptSerializer();
            context.Response.Write(jSerializer.Serialize(userObject));
        }
        else
        { 
           context.Response.Write(string.Empty);
        }
    }


    public bool IsReusable { return true; }

}