ASP.Netのお勉強

ASP.Net2.0でAJAXを作成する＠ASP.Net

Microsoftのhttp://www.asp.net/ajax/にて、
「ASP.NET AJAX Downloads for ASP.NET 2.0」をダウンロードして、
セットアップを行います。

VWD2005を起動し、新しいWebサイトを追加。
「ASP.NET AJAX-Enabled Web Site」を選択します。

ツールボックスに「AJAX Extensions」が追加されています。
Default.aspxにUpdatePanelを配置し、ButtonとTextBoxを配置。
UpdateProgressを配置し、処理中を表す画像を配置します。


Buttonの処理を追加します。
5秒間スリープ処理を行い、その後にテキストボックスに文字を表示します。

最後に実行して確認します。

●aspx

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb"
Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.Net2.0＋AJAX</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    &nbsp;<asp:Image ID="Image1" runat="server" ImageUrl="~/33-0.gif" />
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
    </form>
</body>
</html>


●aspx.vb

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        '5秒間スリープして、テキストボックスに「AJAX」を表示
        System.Threading.Thread.Sleep(5000)
        Me.TextBox1.Text = "AJAX"
    End Sub

End Class

Copyright (C) ASP.Netのお勉強. All Rights Reserved.