Question

我的aspx页面末尾有以下代码。当我单击下面的按钮时，usercontrol加载一个网格。问题是，当加载网格时，它超出了查看范围，用户必须滚动到按钮才能查看显示的网格。

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <div style="border: thin; border-style: double">
            <asp:Panel ID="PnlRequired" runat="server" DefaultButton="BntOpenGridView_Click">
                <table style="width: 100%">                 
                <tr width="100%">
                    <td>                            
                        <asp:ImageButton ID="BtnOpenGridView" Visible="false" OnClick="BntOpenGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
                    </td>
                </tr>    
                <tr>
                    <td>    
                        <UserControl:RequiredGridView runat="server" ID="RqGrdView"></UserControl:KeywordsGridView>
                    </td>    
                </tr>
                <tr>
                    <asp:Label ID="lblErrorMessage2" runat="server" ForeColor="Red"></asp:Label>                       
                </tr>
            </table>
            </asp:Panel>              
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

我要做的是在显示网格后使用javascript以某种方式滚动到页面底部。这是我尝试过的：

<script type="text/javascript">
function ScrollToGrid()   
    {
         document.getElementById('RqGrdView').scrollIntoView(true);
    }
</script>

在触发usercontrol加载gridview后的Button Click事件中，我添加了以下代码：

ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToKeywordsGridView()", true);

这不起作用

我还尝试将相同的代码添加到Page PreRender，如下所示：

protected void BntOpenGridView_Click(object sender, ImageClickEventArgs e)
{
      isRequiredGridViewClicked = true;
      // code to load gridview in usercontrol                
}

protected override void OnPreRender(EventArgs e)
{
      base.OnPreRender(e);
      if (isRequiredGridViewClicked)
      {
           ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToGridView()", true);
           isRequiredGridViewClicked = false;
      }
}

这也没有用，javascript触发正常，但gridview没有完全显示，用户必须手动滚动。

Answer 1

我找到了解决方案。 This帖子帮了很多忙。

我在我的aspx页面中添加了一个隐藏字段，当单击该按钮时，使用javascript将此隐藏字段设置为True。每次加载页面时，都会检查隐藏字段的值，如果是，则文档将滚动以关注gridview控件。

这是我的剧本：

function SetHiddenField(){
            document.getElementById('MainContent_HiddenShowGrid').value = "True";
        }

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

        prm.add_endRequest(function() {
          if(document.getElementById('HiddenShowGrid').value == "True")
            {
                document.getElementById('MainContent_PnlKeyword').scrollIntoView(true);
                document.getElementById('HiddenShowGrid').value = "False";
            }
        });

这是隐藏字段的代码：

<tr width="100%">
    <td>
        <asp:Label ID="lblRequiredSrch" runat="server" Visible="false">Search for Required</asp:Label>

        <asp:TextBox ID="txtRequiredSrch" runat="Server" Visible="false" Width="60%" />
        <asp:ImageButton ID="btnRequiredSrchGridView" Visible="false" OnClientClick="SetHiddenField();" OnClick="btnRequiredSrchGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
    </td>
</tr>

<tr>
    <td>

        <UserControl:RequiredsGridView runat="server" ID="RequiredsGridView2"></Requireds:RequiredsGridView>
        <asp:HiddenField runat="server" ID="HiddenShowGrid" Value ="False" />
    </td>

</tr>

Answer 2

第1步：我也有这个问题。我的解决方案是我尝试获取滚动条的值并将该值保存到sessionStorage：我的asp文件：

<div overflow: auto; width:1000px; height:400px;" onscroll="myFunction()" id="myscroll" runat="server" name="myscroll">

功能Javascript

function myFunction() {
        var elmnt = document.getElementById("myscroll");
        sessionStorage.setItem('focus', elmnt.scrollTop);
    }

第2步：等待gridview加载:(这意味着在获得gridview的代码后插入此代码）并调用new函数来设置滚动条gridview。对于我的代码，我必须从c＃调用Javafucntion：

string script = "window.onload = function() { gridview_finish(); };";
        ClientScript.RegisterStartupScript(this.GetType(), "gridview_finish", script, true);

步骤3：按值sessionStorage设置位置gridview：

function gridview_finish() {
        var elmnt = document.getElementById("myscroll");
        elmnt.scrollTop=sessionStorage.getItem('focus');
    }

加载gridview后滚动到页面末尾

2 个答案: