以下のような構成のページがある。

備忘録でしかない。。。

項目1のMenuを選択すると、データ1と地図1が表示され、項目2のMenuが切り替わる。

この時点では、データ2と地図2は表示されていない。(表示データが未定なので、Bindされていない状態)

項目2のMenuを選択すると、データ2と地図2が表示される。

何もしていないASP.NETのページなら、MenuをクリックするたびにPostBackが発生して、ページ全体が再描画される。

これはうっとしいので、ASP.NET AJAXにて部分更新させてみる。

項目1と項目2は関連性があるので、UpdatePanelを入れ子にして利用する。

備忘録でしかない。。。

赤線がUpdatePanel

親パネルの更新時に子パネルも更新。

子パネルの更新時には、親パネルは更新しない。という動作を

それぞれのUpdatePanelのプロパティで、TriggerにMenuコントロールのClickイベント

UpdateModeをConditionalに設定するとできるみたい。

しかし、問題はふたつのGoogleMap。

GoogleMapの表示は、JavascriptでpageLoadの時に読み込まれる。ということは、すべてのPostBackで読み込みが行われるということで、部分更新も例外ではない。

これをなんとかするために以下のような処理をしてみた。

pageLoad時にPageRequestManagerを使用して、PostBackを発生させたコントロールのIDを取得する。

それを元に、GoogleMapの表示を切り分ける。

PageRequestManagerについては、@ITのMicrosoft AJAX Library&JavaScriptプログラミング
を参考にした。

<script type="text/javascript">

var ctlname = null; //PostBackの発生元コントロールIDを格納する

function pageLoad() {

var mng = Sys.WebForms.PageRequestManager.getInstance();
mng.add_initializeRequest(
function(sender, args) {
ctlname = args.get_postBackElement().id;
}
);

if (ctlname == 'ctl00_ContentPlaceHolder1_Menu1' || ctlname == null) {
var map1 = null;
var address1; //Map用住所

//GoogleMap用の住所作成
with (document.all) {
address1 = ctl00_ContentPlaceHolder1_FormView2_都道府県Label.innerHTML
+ ctl00_ContentPlaceHolder1_FormView2_市区郡Label.innerHTML
+ ctl00_ContentPlaceHolder1_FormView2_住所Label.innerHTML;
}

// 「id="gmap1"」で定義された領域に地図を表示
//(ナビゲーションや表示位置、種類を定義)
map1 = new GMap2($get('ctl00_ContentPlaceHolder1_FormView2_gmap1'));
map1.addControl(new GSmallMapControl());

var geocoder1 = new GClientGeocoder();
geocoder1.getLatLng(address1, function(setpoint) {
map1.setCenter(setpoint, 13);
var marker = new GMarker(setpoint);
map1.addOverlay(marker);
map1.setMapType(G_NORMAL_MAP);
});

} else if (ctlname == 'ctl00_ContentPlaceHolder1_Menu2') {

var map2 = null;
var address2; //Map用住所

//GoogleMap用の住所作成
with (document.all) {
address2 = ctl00_ContentPlaceHolder1_FormView3_都道府県Label0.innerHTML
+ ctl00_ContentPlaceHolder1_FormView3_市区郡Label0.innerHTML
+ ctl00_ContentPlaceHolder1_FormView3_住所Label0.innerHTML;
}

// 「id="gmap2"」で定義された領域に地図を表示
//(ナビゲーションや表示位置、種類を定義)
map2 = new GMap2($get('ctl00_ContentPlaceHolder1_FormView3_gmap2'));
map2.addControl(new GSmallMapControl());

var geocoder2 = new GClientGeocoder();
geocoder2.getLatLng(address2, function(setpoint2) {
map2.setCenter(setpoint2, 13);
var marker2 = new GMarker(setpoint2);
map2.addOverlay(marker2);
map2.setMapType(G_NORMAL_MAP);
});
}
}

</script>

まぁ他にいい方法があるんだろうなぁ。たぶん。。。

おすすめの記事