QA@IT
この質問・回答は、@ITの旧掲示板からインポートされたものです。

Panelのスクロール位置を保持したい。

いつもお世話になっております。
VS2005 ASP.NET + AJAX でUpdatePanelを使用しております。

GridView にチェックボックスを設けまして、使用しております。
そのチェックボックスにチェックをつけますと、Panelのスクロール位置が
Topに戻ってしまう為、ネットでソリューションを探していたところ、

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=23527&forum=7

のソリューションを見つけました。

記事の見よう見真似でjavascriptを作成しましたが、オブジェクト(パネル)
のスクロール位置を取得できません。

どうやら、javascriptの問題のようですが、どなたか、問題点と修正内容をご指摘
いただけますと幸いです。

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=23527&forum=7
のソリューション

☆〜aspx側
If IsPostBack Then
''-----DataGridの縦Scroll位置補正
Dim script As New System.Text.StringBuilder
script.Append("")
script.Append("document.getElementById('divScroll').scrollTop = '")
script.Append(Me.hidScroll.Value)
script.Append("';")
script.Append("")
Page.RegisterStartupScript("authenticated", script.ToString)

Exit Sub
End If

☆HTML側(JavaScript)
function lfncScroll_Y(Panel) {
 document.frmDrSearch.hidScroll.value = Panel.scrollTop;
}

☆HTML側(デザイン)
"

// 自分が作成したソース

☆ HTML側(デザイン)
/asp:TextBox

☆HTML側(JavaScript)

// 案1
function moveRight(pnl, height) {

/// <summary>pnlがパネルのID, heightがスクロールする長さ

        var elem = document.getElementById(pnl);

        if (elem) {

            elem.scrollTop = height;

        }

    }

// 案2
function lfncScroll_Y_() {
 document.frmDrSearch.hidScroll.value = document.getElementById("Panel1").scrollTop;
}

// 案3
function lfncScroll_Y() {

 document.frmDrSearch.hidScroll.value = document.getElementById("Panel1").scrollTop;

}

</script>

☆ 〜aspx側

If IsPostBack Then

        ' ''-----DataGridの縦Scroll位置補正

        Dim script As New System.Text.StringBuilder
        script.Append("<script language=""JavaScript"">")
        script.Append("document.getElementById('Panel1').scrollTop = '")
        script.Append(Me.hidScroll.Value) 
        script.Append("';")
        script.Append("</script>")
        '''Page.RegisterStartupScript("authenticated", script.ToString)

'UpdatePanel用
ScriptManager.RegisterStartupScript(Me,Me.GetType,"authenticated", script.ToString,false)

Exit Sub
End If

といたしましたが、現状ではPanel1をスクロールすると
「オブジェクトはNULLまたは、オブジェクトがありません。」

という類のエラーメッセージが出力されます。
現状は案3を使用

aspxでは
http://msdn.microsoft.com/ja-jp/library/bb310408.aspx
を使用

分からない点
①document.frmDrSearch.hidScroll.value
のfrmDrSearch.はどういう意味を成すのか。

②javascriptにおける、スクロールトップをINPUTオブジェクトのvalueに値を
 保持するのは、変数の値を保持する為と考えてよいか。
 たとえば、var 変数 ではなく、グローバル変数に値を保持する形ではだめか。
 
③そもそも、DIVではなく、PanelのonScrollイベントは存在するのか。

以上です。

分かりにくい部分あるかと思いますがどうぞ、よろしくお願いいたします。

質問者:ニセイタ

回答

①document.frmDrSearch.hidScroll.value
のfrmDrSearch.はどういう意味を成すのか。

document.forms[0] と同じ。或いは、Form の名前。

②javascriptにおける、スクロールトップをINPUTオブジェクトのvalueに値を
 保持するのは、変数の値を保持する為と考えてよいか。
 たとえば、var 変数 ではなく、グローバル変数に値を保持する形ではだめか。

 はい。ダメです。値はサーバーまで引き継ぐのがこのスクリプトの肝。
 
③そもそも、DIVではなく、PanelのonScrollイベントは存在するのか。

Panel は、div です。生成されたhtml見てください。

投稿者:ぴあちゃん

編集 履歴 (0)

>ぴあちゃん様
ありがとうございます。おかげさまでもやもやしていた部分が明確になり、
オブジェクトの取得に注力できました。

検索した結果、どうやら、ASP.netで MasterPageを使用している場合、
通常のオブジェクト処理と変わってくるという事を知りました。

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=48351&forum=7

http://social.msdn.microsoft.com/Forums/ja-JP/netfxjscript/thread/49562b1e-5527-40d5-bf2f-bb7389394501

ぴあちゃん様のおっしゃる、吐き出されたHtmlを参照しながら、

以下のソースで

function lfncScroll_Y() {
var vol3 = document.getElementById('<%=Panel1.ClientID %>').scrollTop;
alert( vol3 );

}

オブジェクト(パネル)のスクロール位置を取得できました。

あとは、値をサーバー側まで、保持する処理で、何とか
なりそうな気がします。

また、できましたら、ご報告いたします。
まことにありがとうございました。

投稿者:ニセイタ

編集 履歴 (0)

>ぴあちゃん様
以下のソースで、MasterPage使用時のUpdatePanel下で、
GridView上にチェックボックスを設けて、チェックをつけた時のリロードにおいて、
パネル上のスクロール位置を保持する事ができました。
ご助言ありがとうございました。

☆〜aspx.vb側

        ''-----DataGridの縦Scroll位置補正 asp側とjavascriptの書き方が異なるので注意
        Dim script As New System.Text.StringBuilder
        script.Append("<script language=""JavaScript"">")
        script.Append("document.getElementById('" + Me.Panel1.ClientID + "').scrollTop ='")
        script.Append(Me.hidScroll.Value)
        script.Append("';")
        script.Append("</script>")

        'UpdatePanel使用時
        ScriptManager.RegisterStartupScript(Me.Page, Me.UpdatePanel1.GetType(), "authenticated", script.ToString, False)

        'UpdatePanel非使用時
        'ClientScript.RegisterStartupScript(Me.Panel1.GetType(), "authenticated", script.ToString)

☆ HTML側(デザイン)

☆HTML側(JavaScript)

<script type="text/javascript">
    function lfncScroll_Y() {

document.getElementById('<%=hidScroll.ClientID %>').value = document.getElementById('<%=Panel1.ClientID %>').scrollTop;
}

気になったのは
/asp:TextBox
にスクロール時に値を格納できなかった事です。
asp:TextBox1 はサーバーコントロールだからですかね?

投稿者:ニセイタ

編集 履歴 (0)

visible=false で描画(htmlに出力って意味です)されるんでしたっけ?

と同じものが ASP タグの文法にあるはずです。

手抜きだと、

とかやっちゃえばOKですよ。

投稿者:ぴあちゃん

編集 履歴 (0)

>ぴあちゃん様

visible=false で描画されないという事で、オブジェクトが作成されていない
わけですね。理解できました。

http://msdn.microsoft.com/ja-jp/library/system.web.ui.webcontrols.hiddenfield(VS.80).aspx

で  が描画されるようですね。

 
という方法もあるんですね。便利ですねこれも。

ありがとうございました。
サーバーサイド作成のコントロールでも、Html化する時はタグが吐き出される事
をしっかり意識していきたいと思います。

投稿者:ニセイタ

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。