1

ASP.NET AJAX を使用して更新パネル内で部分的なポストバックを行う SharePoint 2010 ビジュアル Web パーツを作成しました。Web パーツ内には、ユーザーが検索語を入力して UpdatePanel 内の Button コントロールをヒットする検索機能があります。このコントロールは Web サービスにクエリを実行し、同じ UpdatePanel 内で結果を GridView にバインドします。データが 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 イベント ハンドラーをボタンの onclick クライアント側関数に追加しようとしました。両方からアラートをトリガーできましたが、スクロール位置をリセットできませんでした。

何か不足していますか？

4

3 に答える 3

0

私は最終的にこれに対する答え、または少なくともそれが失敗した理由にたどり着きました. この作品のマスター ページには、既定の動作から動作を変更する設定がありました。それ以来、私は転職したので、残念ながらそれを修正するために何をしたかを忘れていましたが、新しいマスターページはプログラムによるスクロールを無効にしました. 本番環境と開発環境で同じマスター ページを使用すると、問題を解決できました。

于 2015-04-10T18:23:48.663 に答える
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 に答える