Question

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

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

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

我正在使用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()

Answer 1

SetFocus使用javascript函数＆＃34; scrollIntoView＆＃34;要滚动到焦点字段，您可以使用以下代码覆盖它，仅当字段不在可见区域时才会滚动页面，

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

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

1 个答案: