Google Mapsでお勉強 2'nd (5)
UI解説編の続きです(･∀･)
昨日は追加処理だったので、今日は削除処理について。
マーカーの削除については、マーカーをクリックして表示する情報ウインドウから行う作りにしています。
ただし、処理自体はPostBackで行うようにしています。
どんな風にしているかというと、まず以下のような感じで見えない削除ボタンと削除するマーカーのIDを格納するhiddenタグを用意しておきます。
<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" />
</div>で、マーカーをクリックしたときに表示される情報ウインドウのHTMLについて、こんな感じでクリックされたらJavaScriptを実行するアンカーを仕込んでおきます。
...
html += "<a href=\"javascript:deleteSpot(" + spot.Id + ")\">削除</a>";
...deleteSpot()の実態がどうなっているかというと以下みたいな感じで、削除対象のマーカーIDをhiddenタグに設定し、form1.btnDelete.click()により削除ボタンのPostBackをキックしているわけです。
function deleteSpot(id)
{
if ( confirm( "削除しますか？" ) == false )
{
return;
}
$( "hideSpotId" ).value = id;
gmap.closeInfoWindow();
form1.btnDelete.click();
}そしてサーバ側の削除処理はというと以下のような感じで、追加処理と同様にPostBackの処理後にはメッセージ用のdiv領域を更新するJavaScriptを仕込んでいます。
そういえばUpdateMessage()の中身は載せ忘れて居ましたけど、ClientScript.RegisterStartupScript()しているだけです。
protected void OnBtnDeleteClick(object sender, EventArgs e)
{
// ユーザチェック
if ( Page.Request.IsAuthenticated == false )
{
UpdateMessage( "ログインしていない為削除できません" );
return;
}
...
// 削除
int spotId = Convert.ToInt32( this.hideSpotId.Value );
int effect = MapService.DeleteSpot( spotId, userId );
ClientScript.RegisterStartupScript( GetType(), "OnBtnNewClicked", "processNewMapMovement();", true );
if ( effect != 0 )
{
UpdateMessage( "削除されました" );
}
}
private void UpdateMessage(string message)
{
ClientScript.RegisterStartupScript( GetType(), "UpdateMessage", "updateMessage('" + message + "');", true );
}ってな感じで、AtlasのUpdatePanelとJavaScriptをチマチマ利用してUIを構築しています(｀・ω・´)
AtlasについてはUpdatePanelとかを利用しているだけで、クライアント周りやJavaScriptのフレームワークについてはよく知らないんですが。
その辺も勉強すると、もっとスマートに処理を書けたりするんでしょうか？(･∀･)
そういえばScript#っていうものもありますけど。
