web-dev-qa-db-ja.com

asp.netでページポストバック後にページスクロール位置を維持する方法

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <meta http-equiv="refresh" content="4" />   
 <script type="text/javascript">

    var xPos1, yPos1;

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoading(pageLoadingHandler);
    prm.add_pageLoaded(pageLoaded);
    function pageLoaded(sender, args) {

        $get('<%=Panel_Users.ClientID %>').scrollLeft = xPos1;
        $get('<%=Panel_Users.ClientID %>').scrollTop = yPos1;
    }
    function pageLoadingHandler(sender, args) {
        xPos1 = $get('<%=Panel_Users.ClientID %>').scrollLeft
        yPos1 = $get('<%=Panel_Users.ClientID %>').scrollTop;
    }
    </script>
</asp:Content>

機能しません、どこで間違っていますか

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"  />    

<div style="height: 504px; width: 941px;">
                 <asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px;
                     top: 621px; position: absolute; height: 250px; width: 287px">
                     <asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel1" runat="server">
                         <ContentTemplate>
                             <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px;
                                 position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False"
                                 OnRowDataBound="MyGrid_RowDataBound">
                                 <Columns>
                                     <asp:TemplateField HeaderText="Status">
                                         <ItemTemplate>
                                             <asp:Image ID="Status" runat="server" />
                                         </ItemTemplate>
                                     </asp:TemplateField>
                                     <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False"
                                         ReadOnly="True" SortExpression="TimeReceived" />
                                     <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" />
                                     <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                                 </Columns>
                             </asp:GridView>
                         </ContentTemplate>
                     </asp:UpdatePanel>
                 </asp:Panel>
             </div>

5秒ごとにページが更新され、ページが先頭に移動したときに、ページを同じ位置に維持しようとしています。ページMaintainScrollPositionOnPostback = "true"を試しました。うまくいきませんでした。Ajaxを使ってみましたが、使い方がわかりません。誰かがAjaxでそれを行う方法を教えてくれますか？.

javascriptc#asp.netajax
8
Mano

MaintainScrollPositionOnPostbackはIEでのみ機能します。これを行うには、独自のクライアントスクリプトをロールするか、ページ/フォームのさまざまなセクションでアンカーリンクを使用します。

ここで同様の質問：

MaintainScrollPositionOnPostbackが機能していません-デバッグ方法は？

MaintainScrollPositionOnPostbackがjavascript：__ doPostBackで機能しない

maintainScrollPositionOnPostback = "true"は、web.configで設定した後はグローバルに機能しませんが、ページレベルで機能します。どうすればよいですか？

4
IrishChieftain

デザインページで次のコードを試してみてください。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmName.aspx.vb" Inherits="frmName" MaintainScrollPositionOnPostBack = "true" %>
23
Kathir07

<%@ Page MaintainScrollPositionOnPostback="true" %>ページ宣言はスクロール位置をそのまま維持するため

4
Spike

ひどいUI（ページは5秒ごとに更新される）のように聞こえるものの安価な修正は、アドレスバーのURLに表示したい要素のIDと＃を追加することですが、これは自動的に一番上までスクロールします。 IDリンクされた要素の。

これが商用製品であり、急いでいる場合は、JQueryのajax実装をチェックして、それらのリロードをすべて無効にすることをお勧めします。

それは次のような行と同じくらい簡単かもしれません：

  $.ajax(
    {
      url:"/thisPath/requestPath",
      complete:function(data){
      //apply data (the http-response) to HTML
    }
  );

それが奇妙に思える場合は、JQueryオブジェクトのajaxメソッドにオブジェクトリテラルが渡されているだけです。 「complete」に割り当てられた関数は、.ajaxメソッドの内部で確立される引数「data」として関数に供給されるhttp応答を受信すると起動します。

2
Erik Reppen

UpdatePanelsは、パフォーマンスの観点からすると恐ろしいものです。私はjqueryでこれを行い、ポストバックを完全に避けます。

$.ajax({
    url: "/path/to/url/that/returns/users",
    type: "POST",
    dataType: "json",
    data: {},
    success: function(data, status, xhttp)
    {
        var html = "<table>";
        for ( var i = 0; i < data.length; i++ )
        {
            html += "<tr>";
            html += "<td></td>"; // build up table cells
            html += "</tr>";
        }
        html += "</table>";
        $("#NameOfDivToPutTableIn").html(html);
    }

});

これがオプションである場合は、このチュートリアルに基づいて、読み取るURLを設定します。

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Jqueryを使用したくない場合でも、MS AJAXを使用できます。これらの更新パネルをスキップしてください。 http://www.geekzilla.co.uk/View7B75C93E-C8C9-4576-972B-2C3138DFC671.htm

1
Darthg8r

背後のコードでこれを試してください：

protected void Page_Load(object sender, EventArgs e)
{
    if (Page.IsPostBack)
    {
        Page.MaintainScrollPositionOnPostBack = true;
    }
}

Posdata：C＃で試してみました。

1
Randall Sandoval

これに苦しんでいる誰かのために。最も簡単な解決策は、ウィンドウ全体のスクロール位置を維持することです

  var xPos, yPos;

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (evt, args) {
        window.scrollTo(xPos , yPos);
    });


    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (evt, args) {
        xPos = $(window).scrollLeft();
        yPos = $(window).scrollTop();

    });

広告は開始リクエストと終了リクエストの両方です。開始リクエストで、Jqueryを使用してウィンドウのスクロール位置を取得します。最後のリクエストでは、その場所までスクロールします。

0
De Wet Ellis

この行を追加

<%@ Page MaintainScrollPositionOnPostback="true" %>
0
emrah karaman

この問題に対するネット上の回答はすべてありますが、個人的にはどれも機能しませんでした。私の場合、Firefoxは以前のスクロール位置を（誤って）回復しようとし、window.scrollイベント。これにより、非表示フィールドが誤った位置で上書きされ、scrollToがそれを読み取ります。 （私はいくつかの行の自動折りたたみが続くポストバックから来るグリッドビューを持っています。）

したがって、この問題のさらに別の解決策を以下に示します。送信ではなく、更新後にスクロール位置を回復したいので、これで十分でした。

ASPXページ：

<form runat="server" onsubmit="$('#hfScroll').val($(window).scrollTop()); return true;">
    <input type="hidden" id="hfScroll" value="0" />

JavaScript：

function restoreScroll()
{
    var position = parseInt($('#hfScroll').val());
    if (!isNaN(position)) {
        $(document).scrollTop(position);
    }
};
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(restoreScroll);

何らかの理由で、ブラウザの更新時に非表示の入力がゼロにリセットされないため、これが奇妙に動作する場合があります。私はこれが何をしているのか知りたいのですが、IEでは発生しないのでFirefoxだと思いますが、人生は短すぎます[インターネットの半分をダウンロードし、これに何時間も費やしているのです...]。

0
Chris

ポストバックの原因がボタンである場合は、これを試すことができます。

ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(button);
0
Khoa Tran
@{
    
}

<html>

<head>
<script type="text/javascript">

window.onload = function () {
   var div = document.getElementById("dvScroll");
   var div_position = document.getElementById("div_position");
    var position = parseInt(@Request.Form("div_position"));
    if (isNaN(position)) {
        position = 0;
    }

    div.scrollTop = position;
    div.onscroll = function () {
        div_position.value = div.scrollTop;
    };
};

</script>
</head>

<body>

<div id="dvScroll" style="overflow-y: scroll; height: 260px; width: 300px">
    1. This is a sample text
    <br />
    2. This is a sample text
    <br />
    3. This is a sample text
    <br />
    4. This is a sample text
    <br />
    5. This is a sample text
    <br />
    6. This is a sample text
    <br />
    7. This is a sample text
    <br />
    8. This is a sample text
    <br />
    9. This is a sample text
    <br />
    10. This is a sample text
    <br />
    11. This is a sample text
    <br />
    12. This is a sample text
    <br />
    13. This is a sample text
    <br />
    14. This is a sample text
    <br />
    15. This is a sample text
    <br />
    16. This is a sample text
    <br />
    17. This is a sample text
    <br />
    18. This is a sample text
    <br />
    19. This is a sample text
    <br />
    20. This is a sample text
    <br />
    21. This is a sample text
    <br />
    22. This is a sample text
    <br />
    23. This is a sample text
    <br />
    24. This is a sample text
    <br />
    25. This is a sample text
    <br />
</div>

<hr />
<form method="post">
<input type="hidden" id="div_position" name="div_position" />
<input type="submit" value="Cool" />
</form> 
</body>
</html>

これを使用して、ポストバック後のスクロール位置を維持できます。

ソース： http://www.aspsnippets.com/Articles/Maintain-Scroll-Position-of-DIV-on-PostBack-in-ASPNet.aspx

0
John007