閲覧総計:38819  (本日:1  昨日:4)

 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の2つを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 1336件 [詳細] fileudpプロパティ設定画面.jpg 1104件 [詳細] fileudpOutSideButtonデザイン画面.jpg 984件 [詳細] fileUpdatePanelデザイン画面.jpg 1248件 [詳細] filenonUpdatePanel実行画面.jpg 1592件 [詳細] filenonUpdatePanelデザイン画像.jpg 1153件 [詳細] fileUpdatePanel実行画面.jpg 3721件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2024-08-01 (木) 06:17:40 (66d)