设置焦点并保持滚动位置 ASP.NET AJAXControlToolkit答案

【问题标题】：Set the focus AND maintain the scroll position ASP.NET AJAXControlToolkit设置焦点并保持滚动位置 ASP.NET AJAXControlToolkit
【发布时间】：2015-11-17 21:12:18
【问题描述】：

我有一个加载数据网格的页面。第一列有带有编辑命令的链接按钮，该命令调用模式弹出窗口，焦点设置在第一个字段上，该字段是文本框或下拉列表。

现在我的问题是，当我在数据网格上向下滚动并选择编辑时，页面向上滚动，在模式弹出之前向下推我选择编辑的数据网格中的行。保持滚动位置的唯一方法是从我的模式弹出窗口中移除焦点。

有没有办法设置焦点并保持滚动位置？

我正在使用 ASP.NET 版本 4.5.51650、AJAXControlToolkit 版本 15.1.2、VB.NET

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
  <ContentTemplate>
    <asp:DataGrid ID="DataGrid" runat="server">
      <Columns>
        <asp:TemplateColumn HeaderText="Name">
          <ItemTemplate>
             <asp:LinkButton ID="lb_Name" CommandName="Edit" runat=server />
          </ItemTemplate>
        </asp:TemplateColumn>
      </Columns>
    </asp:DataGrid>
  </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
  <ContentTemplate>
    <asp:Button ID="Button1" style="display:none" runat="server" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" TargetControlID="Button1" PopupControlID="ModalPopupExtender_Panel" runat="server" />
      <asp:Panel ID="ModalPopupExtender_Panel" style="display:none" DefaultButton="ModalPopupExtender_Ok" runat="server">
        <asp:Table runat="server">
          <asp:TableRow>
            <asp:TableCell>
              <asp:Textbox ID="Textbox1" runat="server" />
            </asp:TableCell>
          </asp:TableRow>
        </asp:Table>
        <div>
          <asp:Button ID="ModalPopupExtender_Ok" Text="Save" runat="server" />
          <asp:Button ID="ModalPopupExtender_Cancel" Text="Cancel" runat="server" />
        </div>
      </asp:Panel>
  </ContentTemplate>
</asp:UpdatePanel>

代码背后：

Private Sub BindDataGrid()
  'code goes here
  UpdatePanel1.Update()
End Sub

Private Sub DataGrid_EditCommand(ByVal source As Object, ByVal e As DataGridCommandEventArgs) Handles DataGrid.EditCommand
  'code goes here
  UpdatePanel2.Update()
  Textbox1.Focus()
  ModalPopupExtender.Show()

【问题讨论】：

我正在尝试重构您的示例。谁调用BindDataGrid() 方法？
对于这个例子，BindDataGrid() 在页面加载时被调用，然后在从模式中保存信息后再次调用。我试图简化/概括我的代码，以便如果其他人遇到类似问题，这可能会更有帮助。
好的，所以我需要把它放到Page_Load方法中，对吧？

标签： asp.net vb.net focus ajaxcontroltoolkit modalpopupextender

【解决方案1】：

SetFocus 使用 javascript 函数 "scrollIntoView" 滚动到焦点字段，您可以使用以下代码覆盖它，只有当字段不在可见区域时才会滚动页面，

$( document ).ready(function() {
HTMLInputElement.prototype.scrollIntoView = function(a) {
    this.scrollIntoViewIfNeeded();
}
HTMLSelectElement.prototype.scrollIntoView = function(a) {
    this.scrollIntoViewIfNeeded();
}
HTMLAreaElement.prototype.scrollIntoView = function(a) {
    this.scrollIntoViewIfNeeded();
}  });

【讨论】：