AJAX UpdatePanel回发后滚动到SharePoint Visual Web部件上的位置

Question

我已经编写了一个SharePoint 2010 Visual Web部件，该部件使用ASP.NET AJAX在更新面板中进行部分回发。 Web部件内有一个搜索功能，用户可以在其中输入搜索词并单击UpdatePanel中的Button控件，该控件查询Web服务并将结果绑定到GridView（也位于同一UpdatePanel中）。 在数据绑定到GridView之后，我想让页面滚动到网格顶部。

标记（缩写）：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" EnableViewState="true">
  <ProgressTemplate>
    <div id="progressBackgroundFilter"></div>
    <div id="processMessage">
      <h1>Processing<img src="/_layouts/WebPart/ajax-loader.gif" alt="" /></h1>
    </div>
  </ProgressTemplate>
  <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" Text="Search" Visible="true" ValidationGroup="SearchGroup" />
  <asp:GridView ID="InstancesGrd" runat="server" Visible="false" AutoGenerateColumns="false" OnRowCommand="InstancesGrd_RowCommand" GridLines="Vertical" BorderColor="White" CssClass="grid">
  </asp:GridView>
</asp:UpdatePanel>

代码隐藏（缩写）：

protected void btnSearch_Click(object sender, EventArgs e)
{
  ServiceClient client = ConfigureServiceProxy();
  List<string> data = client.returnResults();
  InstancesGrd.DataSource = data;
  InstancesGrd.DataBind();
  InstancesGrd.Visible = true;
}

JavaScript代码：

<script type="text/javascript">
    _spOriginalFormAction = document.forms[0].action;
    _spSuppressFormOnSubmitWrapper = true;  
</script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
    function pageLoad() {        

    $('.leftItem').hover(
        function () {
            $('ul', this).css('display', 'block');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/leftNavHover.gif")');
        },
        function () {
            $('ul', this).css('display', 'none');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/navBarLeft.gif")');
        }
    );
    $('.rightItem').hover(
        function () {
            $('ul', this).css('display', 'block');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/rightNavHover.gif")');
        },
        function () {
            $('ul', this).css('display', 'none');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/navBarRight.gif")');
        }
    );
    $('.middleItem').hover(
        function () {
            $('ul', this).css('display', 'block');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/middleNavHover.gif")');
        },
        function () {
            $('ul', this).css('display', 'none');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/navBarMiddle.gif")');
        }
    );
        }

Sys.WebForms.PageRequestManager.getInstance（）。add_beginRequest（beginRequest）; Sys.WebForms.PageRequestManager.getInstance（）。add_pageLoaded（pageLoaded）;

  function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
  }
  function pageLoaded(sender, args) {
    if (typeof (postbackElement) === "undefined") {
      return;
    }
    if ((postbackElement.id) === "ctl00_SPWebPartManager1_g_d2fd9460_f326_4df6_92c5_7afd7da02faa_ctl00_btnSearch") {
      //--- Scroll test -- does not work
      window.scrollTo(750, 0);
    }
  }
</script>

我尝试使用服务器端的ClientScriptManager.RegisterStartupScript和PageRequestManager.getInstance（）。add_beginRequest（）和add_pageLoaded（）将javascript事件处理程序添加到Button的onclick客户端函数中。 我能够从这两者触发警报，但无法重置滚动位置。

我想念什么吗？

Answer 1

这样的内部锚链接将使您要实现的目标变得更加简单

<a name="scrollTo1"></a> 。

您需要将此链接放置在要滚动到的位置。

一旦在页面的适当位置设置了此类标记，就可以将当前url设置为url＃scrollTo1，以使用javascript滚动到该部分。

Answer 2

尝试将呼叫放入SharePoint特定函数_spBodyOnLoadFunctionNames中

  function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
  }
  function pageLoaded(sender, args) {
    if (typeof (postbackElement) === "undefined") {
      return;
    }
    if ((postbackElement.id) === "ctl00_SPWebPartManager1_g_d2fd9460_f326_4df6_92c5_7afd7da02faa_ctl00_btnSearch") {
      //--- Scroll test -- does not work
      //window.scrollTo(750, 0);
      _spBodyOnLoadFunctionNames.push("scrollToTop");
    }
  }
  function scrollToTop()
  {
    window.scrollTo(750, 500);
  }
</script>

Answer 3

我最终确实找到了答案，或者至少是失败的原因。 该作品的母版页具有将行为从默认行为更改的设置。 此后，我已经换了工作，因此很遗憾我忘记了要解决的工作，但是新的母版页禁用了程序化滚动。 一旦在生产和开发中使用了相同的母版页，便可以解决该问题。