Как портировать ScriptManager UpdatePanel в решение на основе jQuery?

Question

В настоящее время мы переносим клиентскую часть устаревшего веб-приложения с asp.net ajax на jquery / jquery-ui.Приложение состоит (среди прочего) из некоторых asp.net ajax UpdatePanels.

Теперь я хочу выбросить все эти __doPostback() вещи и поговорить с $ .ajax jQuery на «стороне сервера» элементов управления .ascx.В идеале сервер отвечает некоторой разбираемой структурой данных, которую я могу добавить в свои элементы управления пользовательским интерфейсом jQuery.

Я уже понял, что это трудно сделать, потому что клиент-серверный код asp.net ajax сильно переплетен и существуетнет открытых интерфейсов для подключения к ajax-запросам или ответам.Однако мы не хотим изменять код на стороне сервера, поскольку он все еще должен работать со старым интерфейсом asp.net.

После некоторой настройки я обнаружил, что могу подключиться к beforeRequest ScriptManager иendRequest событий для получения уведомлений о обратных передачах и частичных ответах.Я отправляю их в jQuery Events:

   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?
• Как мне обновить все эти __VIEWSTATE, которыми обычно управляет ScriptManager?
• Существуют ли лучшие практики / jquery-плагины для такого "asp.Сценарий "Чистый ajax to jquery"?

Answer 1

По своему опыту я обнаружил, что серверные элементы управления мешают разработке с использованием ajax. Более того, для правильной работы JQuery с ASP.NET необходимо полностью отказаться от идеи обработки кода позади страницы ...

Модель JQuery / ASP.NET работает довольно просто:

JQuery POST / GET-запрос -> Общий обработчик ASP.NET -> Уровень доступа к данным.

Уровень доступа к данным -> Общий обработчик ASP.NET -> Ответ JSON -> JQuery.

Таким образом, все понятие UpdatePanel является просто абстрактной идеей ... Он семантически отслеживает, какие части страницы необходимо обновить после того, как клиент отправил запрос AJAX. Проблема в том, что UpdatePanel отправляет всю страницу (за запрос ajax) и довольно тяжелый ...

Мы можем имитировать действия UpdatePanel, явно обновляя части страницы после вызова ajax. В следующих фрагментах я покажу вам, как эмулировать функциональность UpdatePanel. В этом сценарии пользователь вводит свое имя в текстовое поле, и мы проверяем его на сервере и возвращаем адрес электронной почты и идентификатор пользователя обратно на страницу.

При обратном вызове (javascript) мы заполняем скрытое поле идентификатором пользователя, а адрес электронной почты 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; }

}