web-dev-qa-db-ja.com

部分的なポストバックASP.NETでパネルのスクロール位置を維持する

ASP.NETパネルに配置されたグリッドビューがあります。パネルとグリッドビューの両方がUpdatePanelにあります。部分的なポストバックを引き起こすグリッドビューの列があります。これらのポストバックでパネルスクロールの位置を維持したい。何か方法はありますか？よろしく。

asp.netupdatepanelpostbackscroll
20
Shahin

Asp.netにはそれを解決する組み込みの機能はありません

ただし、この問題には回避策があります。あなたはそれをjavascriptで処理する必要があります。

解決策はここに記載されています： 部分的なポストバック後にUpdatePanel内のスクロールバーの位置を維持

2012年5月20日編集。コメントを見た後

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" />
   <script type="text/javascript">
      // It is important to place this JavaScript code after ScriptManager1
      var xPos, yPos;
      var prm = Sys.WebForms.PageRequestManager.getInstance();

      function BeginRequestHandler(sender, args) {
        if ($get('<%=Panel1.ClientID%>') != null) {
          // Get X and Y positions of scrollbar before the partial postback
          xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
          yPos = $get('<%=Panel1.ClientID%>').scrollTop;
        }
     }

     function EndRequestHandler(sender, args) {
         if ($get('<%=Panel1.ClientID%>') != null) {
           // Set X and Y positions back to the scrollbar
           // after partial postback
           $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
           $get('<%=Panel1.ClientID%>').scrollTop = yPos;
         }
     }

     prm.add_beginRequest(BeginRequestHandler);
     prm.add_endRequest(EndRequestHandler);
 </script>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
     <asp:Panel ID="Panel1" runat="server" Height="300">
        <%-- Some stuff which would cause a partial postback goes here --%>
     </asp:Panel>
   </ContentTemplate>
 </asp:UpdatePanel>

</form>

以下はコードのスナップショットです：-

Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack

40
Waqas Raja

MaintainScrollPositionOnPostback = "true"をページディレクティブに追加します。

5
vml19

MaintainScrollPositionOnPostbackの一般的な代替手段と、BeginRequestHandlerとEndRequestHandlerを使用するJavaScriptソリューションを使用して、この問題に対する回答を数日間探していました。

何も機能しませんでしたが、同じ@ waqas-rajaアルゴリズムを使用して、BeginRequestHandlerとEndRequestHandlerでjQueryを使用するかなり単純なソリューションを思い付きました。

<script type="text/javascript">

    var scrollPosition = 0;

    $(document).ready(function () {

        $(window).scroll(function (event) {
            scrollPosition = $(window).scrollTop();
        });

    });

</script>

<script type="text/javascript">

    // It is important to place this JavaScript code after ScriptManager1
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) {
        console.log('BeginRequest');
    }

    function EndRequestHandler(sender, args) {
        $(window).scrollTop(scrollPosition);
    }

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);

</script>

アイデアは、ユーザーがスクロールを移動するたびにスクロールの位置をグローバル変数にキャプチャすることです。これにより、最後の位置がどれであるかがわかり、ポストバックを作成すると、EndRequestHandlerイベントが入力され、最後の位置で更新されます。マークされたユーザー

これはFirefoxとGoogleで私のために機能しましたChrome :)

0
Julián