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

Google Maps APIの勉強として地図アプリを作ってきましたが、その課程で学んで来たことのおさらいです(･∀･)

今まで、ニコカレやで地図アプリではAtlasを使ってAjaxなUIを色々作ってきました。
AtlasのUpdatePanelを利用すれば簡単にAjaxできるわけですが。

その時の基本的な作り方としては、こんな感じでやってきました。

• まず、PostBackを気にせずUI要素を切り替えるコードを書く
• 表示・非表示を切り替えたいところはで囲む
• を利用する
• 以上をで囲めばAjaxなUIの出来上がり♪

例えばGoogle Mapsアプリのマーカー登録用画面の構成はこんな感じになっています。

<atlas:ScriptManager ID="s1" EnablePartialRendering="true" runat="server" />

<atlas:UpdatePanel ID="p1" runat="server">
    <ContentTemplate>

        <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>

        <div id="toolbar" class="toolbar" >
            <asp:ImageButton ID="btnShowNew" runat="server" OnClick="OnBtnShowClick" ImageUrl="~/Images/btnNew.gif" AlternateText="作成" />
...
        </div>

        <div id="control" class="control" >
        <asp:Panel ID="pnlNew" runat="server" Visible="false">
        <div class="tooldialog">
            <table>
            <tr>
                <td nowrap>名前</td>
                <td nowrap>
                    <asp:TextBox ID="txtName" runat="server" Size="16" MaxLength="128"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="validName" runat="server" ErrorMessage="*" ControlToValidate="txtName" ValidationGroup="New"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td nowrap>種別</td>
                <td nowrap>
                    <asp:DropDownList ID="cmbType" runat="server" DataTextField="Name" DataValueField="Id">
                    </asp:DropDownList>
                    <asp:Button ID="btnTypeExpand" runat="server" Text="+" OnClick="OnBtnTypeExpandClick" />
                    <asp:TextBox ID="txtType" runat="server" Size="8" MaxLength="32" Visible="False"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="validType" runat="server" ErrorMessage="*" ControlToValidate="txtType" ValidationGroup="Type" Visible="False"></asp:RequiredFieldValidator>
                    <asp:Button ID="btnTypeAdd" runat="server" Text="追加" OnClick="OnBtnTypeAddClick" ValidationGroup="Type" Visible="False" />
                </td>
            </tr>
            <tr>
                <td nowrap>コメント</td>
                <td nowrap>
                    <asp:TextBox ID="txtComment" runat="server" Size="24" MaxLength="256"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td nowrap>リンク</td>
                <td nowrap>
                    <asp:TextBox ID="txtLink" runat="server" Size="24" MaxLength="256"></asp:TextBox>
                    <asp:RegularExpressionValidator ID="validLink" runat="server" ErrorMessage="*" ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" ControlToValidate="txtLink" ValidationGroup="New"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td nowrap colspan="2" align="right">
                    <asp:Button ID="btnNew" runat="server" Text="登録" ValidationGroup="New" OnClick="OnBtnNewClick" OnClientClick="preNewEvent();" />
                </td>
            </tr>
            </table>
        </div>
    </asp:Panel>
...
        </div>
    </ContentTemplate>
</atlas:UpdatePanel>

見やすいように一部改行を入れていますが、実際のソースでは余計な空白が入らないように改行していない部分があったりします。

で、この内容について補足していきたいと思います(･∀･)