Google Mapsでお勉強 2'nd (4)

体調は若干回復したものの、まだ完調とは言えず(´・ω・`)

で、間が開いてしまったけど、地図アプリで使っているAtlasでUpdatePanelなUIの解説編を再開してみようかと思います(･∀･)

地図アプリケーションのUI部のソースはid:machi_pon:20060719:1153302303みたいな感じなわけですが。

まず、最初に以下の部分。

<div style="position:absolute; visibility: hidden; top:0px; left:0px; width: 0px; height: 0px;">
    <asp:Button ID="btnDelete" runat="server" Text="" OnClick="OnBtnDeleteClick"/>
    <input id="hideSpotId" type="hidden" runat="server" />
    <input id="hideLon" type="hidden" runat="server" />
    <input id="hideLat" type="hidden" runat="server" />
</div>

ここでは、データ登録時に利用する緯度・経度情報のhiddenタグと、データ削除時に利用するIDと削除処理用のボタンを見えない形で定義しています。
データ登録もデータ削除にPstBackを利用するわけで、そのデータの受け渡しにはhiddenタグを利用しています。
また、hiddenタグへの値の設定はJavaScriptで行っています(･ω・)

データ登録ボタンの定義はこんな風になっているわけですが。

<asp:Button ID="btnNew" runat="server" Text="登録" ValidationGroup="New" OnClick="OnBtnNewClick" OnClientClick="preNewEvent();" />

OnClientClickで以下のようなJavaScriptを実行させて、その後のPostBackでデータ登録を行うようにしています。

function preNewEvent()
{
    $( "hideLon" ).value = gmap.getCenterLatLng().x;
    $( "hideLat" ).value = gmap.getCenterLatLng().y;
}

PostBackで行われる処理はこんな感じです。

protected void OnBtnNewClick(object sender, EventArgs e)
{
    if ( !IsValid )
    {
        return;
    }

    // ユーザチェック
    if ( Page.Request.IsAuthenticated == false )
    {
        return;
    }

    // 追加        
    SpotInfoDTO dto = new SpotInfoDTO();
...
    dto.Lon = Convert.ToDouble( this.hideLon.Value );
    dto.Lat = Convert.ToDouble( this.hideLat.Value );

    MapService.AddSpot( dto );

    ClientScript.RegisterStartupScript( GetType(), "OnBtnNewClicked", "processNewMapMovement();", true );
    UpdateMessage( "スポット <strong>" + dto.Name + "</strong> を追加しました" );

    // 画面クリア
...
    this.pnlNew.Visible = false;
}

データ登録後にprocessNewMapMovement()というJavaScriptを登録していますが、これは処理結果をメッセージ用のdivタグに表示するための処理です。

function updateMessage(message)
{
    clearTimeout( timerId );

    $( "message" ).innerHTML = message;
    
    timerId = setTimeout( clearMessage, 3000 );
}

function clearMessage()
{
    $( "message" ).innerHTML = "";

    clearTimeout( timerId );
}

AtlasのUpdatePanelを利用してPostBackしているので画面のリロードは行われず、処理結果をどこかに表示する必要があるのでこのような形にしています(･∀･)
Ajaxなアプリケーションではよく見る動きだと思います。