带有ASP.NET的jQuery-防止链接滚动到页面顶部

Question

我正在构建一个使用GridView控件的.NET应用程序。 我正在使用LinkBut​​ton控件，以允许用户进入“编辑”模式。 每当用户单击此按钮时，它的确允许他按需编辑条目。 但是，它还会滚动回到页面顶部。 显然，这是不理想的。 但是，我不能简单地使用event.PreventDefault（）来消除此行为。

我已将类“ gridActionLinks”分配给控件。 当用户单击需要时，我需要执行链接操作，然后进行滚动。 现在，它会向下滚动到链接，然后执行默认的链接行为（包括转到页面顶部）。 有没有解决的办法？ 也就是说，有没有一种方法可以先执行链接行为，然后执行滚动？

非常感谢！

剧本：

  $(".gridActionLinks").click(function (event) {      


        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 100
        );


    });

aspx的代码段：

 <asp:TemplateField HeaderText="">
          <ItemTemplate>
              <asp:LinkButton ID="detailsLink" runat="server" CommandName="Edit" CommandArgument="" Tooltip="Edit Record" CausesValidation="False" CssClass="gridActionLinks"><img src="../img/detailsIcon.png" /></asp:LinkButton>
                         <asp:LinkButton ID="deleteLink" CommandName="Delete" runat="server" Tooltip="Delete Record" CssClass="gridActionLinks" CausesValidation="False"><img src="../img/deleteIcon.png" /></asp:LinkButton>
          </ItemTemplate>
          <EditItemTemplate>
                            <asp:LinkButton ID="insertLink" CommandName="Update" runat="server" Tooltip="Save" CausesValidation="False"><img src="../img/saveIcon.png" /></asp:LinkButton>
                         <asp:LinkButton ID="cancelLink" CommandName="Cancel" runat="server" Tooltip="Cancel" CausesValidation="False"><img src="../img/cancelIcon.png" /></asp:LinkButton>
          </EditItemTemplate>
          <FooterTemplate>
                    <asp:LinkButton ID="insertLink" runat="server" CommandName="Insert" Tooltip="New Entry"><img src="../img/saveIcon.png" /></asp:LinkButton>
                         <asp:LinkButton ID="cancelLink" runat="server" CommandName="CancelEntry" Tooltip="Cancel"><img src="../img/cancelIcon.png" /></asp:LinkButton>          </FooterTemplate>
      </asp:TemplateField>

一些aspx.cs：

protected void vehicleGrid_RowEditing(object sender, GridViewEditEventArgs e)
        {
            vehicleGrid.EditIndex = e.NewEditIndex;


                this.initialize ();

            }

     private void initialize()
        {
            try {
            using (fleetModel context = new fleetModel())
            {

                vehicleGrid.DataSource = context.vehicles.SortBy("renewal").ToList();
                vehicleGrid.DataBind();
            }
        } catch(Exception ex) {
                    Console.WriteLine(ex.StackTrace);
                }
        }

Answer 1

由于您的链接按钮被标记为runat="server"因此它们将生成一个回发事件，并且页面将刷新。 如果您希望在回发后保持页面位置，请使用page指令 ：

<%@ Page Language="c#" CodeBehind="MyPage.aspx.cs" AutoEventWireup="false" Inherits="MyPage" MaintainScrollPositionOnPostBack="true"%>

或将其设置在后面的代码中

this.MaintainScrollPositionOnPostBack = true;