閲覧総計：38634　　（本日：2　　昨日：3)

　ASP.NET Ajasの基本機能である「UpdatePanel」の使い方を確認した。　10/08/12

　教材にはビデオ動画でASP.NET Ajaxをわかり易く丁寧に解説してくれている
http://msdn.microsoft.com/ja-jp/events/dd297548.aspx?ppud=4
↑こちらのページ（全14回）を使用する事にした。
　今回は、第2回「UpdatePanelを使ってみよう」の解説にしたがい作業をトレースしてみた。
http://www.microsoft.com/japan/seminar/msdn/webcast/bg/46.ajax.updatepanel/play.aspx

【注】UpdatePanel内で利用できないコントロールもあるので注意が必要
情報がこちらのページにまとめられてます。↓　08/4/11
http://www.atmarkit.co.jp/fdotnet/special/vs2008aspnet04/vs2008aspnet04_01.html

UpdatePanel実行画面.jpg

【目次】↓項目をクリックするとその項に飛べます。

開発環境：VWD2008 + Access2003
サーバ：ASP.NET3.5 + Access2003

1.UpdatePanelを使用しないプログラム ↑

　先ずは比較の基本となる、UpdatePanelを使用しないLabel1とLabel2に現在の日時を
表示するプログラムを作成してみる。

【デザイン画面↓】

nonUpdatePanelデザイン画像.jpg

【実行画面↓】

nonUpdatePanel実行画面.jpg

【実行サンプル↓】
http://www.kuri6005.useiis7.net/AjaxTr/UpdatePanel2/1nonUpdatePanel.aspx

【nonUpdatePanel.aspx】

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = DateTime.Now.ToString
        Label2.Text = DateTime.Now.ToString
        
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        UpdatePanelを使用しない基本形　　10/08/12<br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <br />
        <br />
    
    </div>
    </form>
</body>
</html>
↑

2.UpdatePanelの使用 ↑

　Ajax機能の基本であるUpdatePanelの使用法
　使用法は簡単。非同期通信を行いたいコントロールを「UpdatePanel」内にドラッグ＆
ドロップで入れるだけ。
　今回は、Label1とButton1の２つをUpdatePanelに入れた。

【デザイン画面↓】

UpdatePanelデザイン画面.jpg

【実行画面↓】

UpdatePanel実行画面.jpg

【実行サンプル↓】
http://www.kuri6005.useiis7.net/AjaxTr/UpdatePanel2/2UpdatePanel01.aspx

【UpdatePanel.aspx】

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = DateTime.Now.ToString
        Label2.Text = DateTime.Now.ToString
        
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    UpdatePanel使用法の基本<br />
    （UpdatePanel内にコントロールを配置する）　　10/08/11<br />
    <br />
    <fieldset>
        <legend>　UpdatePnel窓（この窓内のみの情報が更新されます）</legend>
            <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <br />
                    <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
                    <br />
                    <br />
                    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                    Text="Button" />
                    <br />
                    <br />
                </ContentTemplate>
            </asp:UpdatePanel>
            </div>
    </fieldset>
        <br />
        <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
        <br />
    </div>
    </form>
</body>
</html>
↑

3.UpdatePanel外のコントロールによるUpdatePanelの制御法 ↑

　次に、UpdatePanel外のコントロール(今回はButton)からUpdatePanelの更新制御を行う
設定方法について確認した。
　UpdatePanelのプロパティの「Triggers」を「Button1」の「Click」に設定する。
　これで、UpdatePanlの外にあるButtonからUpdatePanelの更新を制御する事ができる様に
なる。

【デザイン画面↓】

udpOutSideButtonデザイン画面.jpg
udpプロパティ設定画面.jpg

【実行画面↓】

udpOutSideButton実行画面.jpg

【実行サンプル↓】
http://www.kuri6005.useiis7.net/AjaxTr/UpdatePanel2/3udpOutSideButton01.aspx

【udpOutSideButton.aspx】

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = DateTime.Now.ToString
        Label2.Text = DateTime.Now.ToString
        
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    UpdatePanel外のコントロール(今回はButton）からUpdatePanelを制御する法　　10/08/11<br />
        <br />
    <fieldset>
        <legend>　UpdatePnel窓（この窓内のみの情報が更新されます）</legend>
            <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <br />
                    <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
                    <br />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            </div>
    </fieldset>
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
        <br />
    <br />
                    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                    Text="Button" />
        <br />
        
    </div>
    </form>
</body>
</html>

【参考にしたページ】
1.「UpdatePanelを使ってみよう」　07/06/01
http://www.microsoft.com/japan/seminar/msdn/webcast/bg/46.ajax.updatepanel/play.aspx


選択肢 投票
参考になった 74  
ふつう 12  
参考にならなかった 3  
添付ファイル: fileudpOutSideButton実行画面.jpg 1331件 [詳細] fileudpプロパティ設定画面.jpg 1100件 [詳細] fileudpOutSideButtonデザイン画面.jpg 978件 [詳細] fileUpdatePanelデザイン画面.jpg 1243件 [詳細] filenonUpdatePanel実行画面.jpg 1588件 [詳細] filenonUpdatePanelデザイン画像.jpg 1149件 [詳細] fileUpdatePanel実行画面.jpg 3717件 [詳細]
トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2024-04-02 (火) 07:02:05 (116d)