- PR -

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

参照元記事 | 同じ記事を参照しているスレッド一覧
1
投稿者投稿内容
ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-04-15 01:10
いつもお世話になっております。
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 language=""JavaScript"">")
script.Append("document.getElementById('divScroll').scrollTop = '")
script.Append(Me.hidScroll.Value)
script.Append("';")
script.Append("</script>")
Page.RegisterStartupScript("authenticated", script.ToString)

Exit Sub
End If

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

☆HTML側（デザイン）
<DIV id="divScroll" onscroll="lfncScroll_Y(this)～</DIV>"
<INPUT id="hidScroll" type="hidden" name="hidScroll" runat="server">


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




☆ HTML側（デザイン）
<asp:TextBox ID="TextBox1" runat="server" Visible="False"></asp:TextBox>
<INPUT id="hidScroll" type="hidden" name="hidScroll" runat="server">
<asp:Panel ID="Panel1" runat="server" Height="230px" ScrollBars="Vertical" onscroll="lfncScroll_Y();">

☆HTML側（JavaScript)
<script type="text/javascript">
//　案１
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イベントは存在するのか。

以上です。

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

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-04-15 02:06
①document.frmDrSearch.hidScroll.value
のfrmDrSearch.はどういう意味を成すのか。

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

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

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

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


ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-04-15 20:23
＞ぴあちゃん様
ありがとうございます。おかげさまでもやもやしていた部分が明確になり、
オブジェクトの取得に注力できました。

検索した結果、どうやら、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 );

}

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

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

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



ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-04-17 14:27
＞ぴあちゃん様
以下のソースで、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側（デザイン）
<INPUT id="hidScroll" type="hidden" name="hidScroll" runat="server">
<asp:Panel ID="Panel1" runat="server" Height="230px" ScrollBars="Vertical" onscroll="lfncScroll_Y();">




☆HTML側（JavaScript)


<script type="text/javascript">
function lfncScroll_Y() {
document.getElementById('<%=hidScroll.ClientID %>').value = document.getElementById('<%=Panel1.ClientID %>').scrollTop;
}
</script>


気になったのは
<asp:TextBox ID="TextBox1" runat="server" Visible="False"></asp:TextBox>
にスクロール時に値を格納できなかった事です。
asp:TextBox1　はサーバーコントロールだからですかね？

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-04-18 02:30
visible=false で描画（htmlに出力って意味です）されるんでしたっけ？

<input type=hidden> と同じものが ASP タグの文法にあるはずです。

手抜きだと、
<span style="display:none"><asp:TextBox id="scrollSize" /></span>

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

ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-04-18 14:38
＞ぴあちゃん様

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

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

<asp:hiddenfield id="ValueHiddenField"
onvaluechanged="ValueHiddenField_ValueChanged"
value=""
runat="server"/>

で　<input type= "hidden"/> が描画されるようですね。

<span style="display:none"><asp:TextBox id="scrollSize" /></span> 　
という方法もあるんですね。便利ですねこれも。

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

1

スキルアップ／キャリアアップ（JOB@IT）