Как избежать прокрутки UpdatePanel на AutoPostBack? - PullRequest
Новая
       38

Как избежать прокрутки UpdatePanel на AutoPostBack?

10 голосов
/ 01 марта 2011

У меня есть ASP.NET FormView внутри панели обновления.Я автоматически сохраняю форму, устанавливая AutoPostBack = true для каждого элемента в FormView.

Это означает, что пользователь может быстро щелкнуть несколько элементов и запустить несколько асинхронных обратных передач почти одновременно.

Проблема, с которой я столкнулся, заключается в том, что пользователь может продолжать прокручивать форму вниз, пока асинхронные обратные передачи еще не завершены.Браузер всегда прокручивает обратно в положение, в котором он находился при первой обратной передаче.

Page.MaintainScrollPositionOnPostback имеет значение False.

Я пробовал все виды вещей в ajax и jquery с помощью:

  • pageLoad
  • add_initializeRequest
  • add_endRequest
  • document.ready
  • и т. Д.

но мне всегда кажется, что я могу получить доступ только к прокрутке Y, как это было при первой обратной передаче.

Есть ли способ извлечь текущую прокрутку Y после завершения обратной передачи, чтобы я мог остановить прокрутку, происходящую?Или, возможно, можно отключить режим прокрутки?

Спасибо!

Обновление

Благодаря @chprpipr я смогзаставить это работать.Вот мое сокращенное решение: 

var FormScrollerProto = function () {
    var Me = this;
    this.lastScrollPos = 0;
    var myLogger;

    this.Setup = function (logger) {
        myLogger = logger;
        // Bind a function to the window
        $(window).bind("scroll", function () {
            // Record the scroll position
            Me.lastScrollPos = Me.GetScrollTop();
            myLogger.Log("last: " + Me.lastScrollPos);
        });
    }

    this.ScrollForm = function () {
        // Apply the last scroll position
        $(window).scrollTop(Me.lastScrollPos);
    }

    // Call this in pageRequestManager.EndRequest
    this.EndRequestHandler = function (args) {
        myLogger.Log(args.get_error());
        if (args.get_error() == undefined) {
            Me.ScrollForm();
        }
    }

    this.GetScrollTop = function () {
        return Me.FilterResults(
                window.pageYOffset ? window.pageYOffset : 0,
                document.documentElement ? document.documentElement.scrollTop : 0,
                document.body ? document.body.scrollTop : 0
            );
    }

    this.FilterResults = function (n_win, n_docel, n_body) {
        var n_result = n_win ? n_win : 0;
        if (n_docel && (!n_result || (n_result > n_docel)))
            n_result = n_docel;
        return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
    }
}

Главная страница: 

...snip...

var logger;
    var FormScroller;

    // Hook up Application event handlers.
    var app = Sys.Application;

    // app.add_load(ApplicationLoad); - use pageLoad instead
    app.add_init(ApplicationInit);
    // app.add_disposing(ApplicationDisposing);
    // app.add_unload(ApplicationUnload);

    // Application event handlers for component developers.
    function ApplicationInit(sender) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (!prm.get_isInAsyncPostBack()) {
            prm.add_initializeRequest(InitializeRequest);
            prm.add_beginRequest(BeginRequest);
            prm.add_pageLoading(PageLoading);
            prm.add_pageLoaded(PageLoaded);
            prm.add_endRequest(EndRequest);
        }

        // Set up components
        logger = new LoggerProto();
        logger.Init(true);
        logger.Log("APP:: Application init.");

        FormScroller = new FormScrollerProto();
    }

    function InitializeRequest(sender, args) {
        logger.Log("PRM:: Initializing async request.");
        FormScroller.Setup(logger);
    }

...snip...

function EndRequest(sender, args) {
        logger.Log("PRM:: End of async request.");

        maintainScroll(sender, args);

        // Display any errors
        processErrors(args);
    }

...snip...

function maintainScroll(sender, args) {
        logger.Log("maintain: " + winScrollTop);
        FormScroller.EndRequestHandler(args);
    }

Я также попытался вызвать EndRequestHandler (пришлось удалить проверку args.error), чтобы увидеть, уменьшилось ли ономерцание при прокрутке, но это не так.Стоит отметить, что идеальным решением было бы остановить браузер при попытке прокрутки вообще - сейчас существует кратковременное дрожание, которое было бы неприемлемо в приложениях с большой базой пользователей.

(Код прокрутки вверхэто не мое - нашел его в сети.)

(Вот полезная страница MSDN для жизненного цикла клиента: http://msdn.microsoft.com/en-us/library/bb386417.aspx)

Обновление 7 марта:

Я только что нашел чрезвычайно простой способ сделать это: 

<script type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(beginRequest);

function beginRequest()
{
    prm._scrollPosition = null;
}

</script>

Ответы [ 2 ]

4 голосов
/ 01 марта 2011

Вы можете привязать функцию, которая регистрирует текущую позицию прокрутки и затем применяет ее после каждого endRequest.Это может выглядеть примерно так: 

// Wrap everything up for tidiness' sake
var FormHandlerProto = function() {
    var Me = this;

    this.lastScrollPos = 0;

    this.SetupForm = function() {
        // Bind a function to the form's scroll container
        $("#ContainerId").bind("scroll", function() {
            // Record the scroll position
            Me.lastScrollPos = $(this).scrollTop();
        });
    }

    this.ScrollForm = function() {
        // Apply the last scroll position
        $("#ContainerId").scrollTop(Me.lastScrollPos);
    }

    this.EndRequestHandler = function(sender, args) {
        if (args.get_error() != undefined)
            Me.ScrollForm();
        }
    }
}

var FormHandler = new FormHandlerProto();
FormHandler.Setup(); // This assumes your scroll container doesn't get updated on postback.  If it does, you'll want to call it in the EndRequestHandler.

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(FormHandler.EndRequestHandler);
0 голосов
/ 16 мая 2018

Просто поместите элемент управления Timer в шаблон содержимого. 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:ImageButton ID="ImageButton1" runat="server" Height="350" Width="700" />
</ContentTemplate>
</asp:UpdatePanel>
...