1

我编写了一个 SharePoint 2010 可视 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 客户端函数。我能够从两者触发警报，但无法重置滚动位置。

我错过了什么吗？

4

3 回答 3

0

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

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

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

在页面中的适当位置设置此类标签后，您可以将当前 url 设置为 url#scrollTo1 以使用 javascript 滚动到该部分。

于 2013-04-03T17:47:05.207 回答
0

尝试将您的调用放入 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>
于 2013-04-05T20:17:30.200 回答
0

我最终确实找到了答案，或者至少是它失败的原因。这件作品的母版页具有更改默认行为的行为的设置。从那以后我换了工作，所以很遗憾我忘记了我做了什么来修复它，但是新的母版页禁用了程序化滚动。一旦我在生产和开发中使用相同的母版页，我就能够解决这个问题。

于 2015-04-10T18:23:48.663 回答