DoboWiki
Top
> .NETプログラミング研究/82 をテンプレートにして作成
.NETプログラミング研究/82 をテンプレートにして作成
開始行:
#title(Microsoft ASP.NET AJAXを使う3)
#navi(.NETプログラミング研究)
#contents
*Microsoft ASP.NET AJAXを使う3 [#f1a19caf]
前号を発行してからかなり日が開いてしまいましたが、その間...
**UpdateProgressコントロールを使って、現在の状況を表示す...
今まで紹介してきたAjaxのサンプルで、ASP.NET AJAXを使わな...
UpdateProgressコントロールの使い方は、非常に簡単です。前...
&ref(updateprogress1.png);
全体のコードを以下に示します。すぐに処理が終了してしまう...
#code(vbnet){{
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub PackageSizeList_SelectedIndexChanged( _
ByVal sender As Object, ByVal e As EventArgs)
'3秒停止する
System.Threading.Thread.Sleep(3000)
Dim ddl As DropDownList = CType(sender, DropDownL...
If ddl.SelectedValue <> "0" Then
Dim fee As Integer = _
Me.GetYoupackFee(Integer.Parse(ddl.Select...
ResultLabel.Text = String.Format("料金は {0}...
Else
ResultLabel.Text = ""
End If
End Sub
Public Function GetYoupackFee(ByVal packSize As Integ...
If packSize <= 60 Then
Return 600
ElseIf packSize <= 80 Then
Return 800
ElseIf packSize <= 100 Then
Return 1000
ElseIf packSize <= 120 Then
Return 1200
ElseIf packSize <= 140 Then
Return 1400
ElseIf packSize <= 160 Then
Return 1600
ElseIf packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
</asp:ScriptManager>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Pack...
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="s...
<ProgressTemplate>
読み込み中...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void PackageSizeList_SelectedIndexChanged(
object sender, EventArgs e)
{
//3秒停止する
System.Threading.Thread.Sleep(3000);
DropDownList ddl = (DropDownList)sender;
if (ddl.SelectedValue != "0")
{
int fee = this.GetYoupackFee(int.Parse(ddl.Se...
ResultLabel.Text = string.Format("料金は {0}...
}
else
{
ResultLabel.Text = "";
}
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合...
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeLi...
<asp:ListItem Value="0">(選択してく...
<asp:ListItem Value="60">60cmまで</as...
<asp:ListItem Value="80">80cmまで</as...
<asp:ListItem Value="100">100cmまで</...
<asp:ListItem Value="120">120cmまで</...
<asp:ListItem Value="140">140cmまで</...
<asp:ListItem Value="160">160cmまで</...
<asp:ListItem Value="170">170cmまで</...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="s...
<ProgressTemplate>
読み込み中...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
}}
***AssociatedUpdatePanelIDプロパティ [#f6edf27f]
ページ内にUpdatePanelが複数存在する場合は、基本的にはどの...
***DynamicLayoutプロパティについて [#of37b4f9]
UpdateProgressが置かれている部分は、HTMLでは<div>で囲まれ...
#code(html){{
<div id="UpdateProgress1" style="display:none;">
読み込み中...
</div>
}}
ただしこのようになるのは、UpdateProgressのDynamicLayoutプ...
#code(html){{
<div id="UpdateProgress1" style="visibility:hidden;displa...
読み込み中...
</div>
}}
つまり、DynamicLayoutプロパティがTrueの場合は、UpdateProg...
一方DynamicLayoutプロパティがFalseの場合は、UpdateProgres...
**自分で現在の状況を表示する [#tc148b93]
.NET Framework 3.5からは問題ないようですが、ASP.NET AJAX ...
同様に、前号の「[[UpdatePanelに関連付けられていないコント...
このようなケースで現在の状況を表示するには、JavaScriptを...
いまさら「JavaScriptを自分で書け」と言われても...と思われ...
***Microsoft AJAX Library [#e43c1fa1]
UpdateProgressコントロールを使わずに、自分で現在の状況を...
ASP.NET AJAXにはそれを解決する方法が用意されています。そ...
Microsoft AJAX Libraryにある[[Sys.WebForms.PageRequestMan...
このPageRequestManagerは、ScriptManagerコントロールのSupp...
***具体例 [#q58cdc31]
それでは具体例を示します。ここではUpdateProgressコントロ...
先ほどのサンプルとの違いは、UpdateProgressコントロールを...
変更箇所は<html>内だけですので、以下に<html>内だけを示し...
#code(html){{
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
</asp:ScriptManager>
<script type="text/javascript">
var postBackElement, msgElement;
//PageRequestManagerを作成
var prm = Sys.WebForms.PageRequestManager.getInstance();
//イベントハンドラを追加
prm.add_initializeRequest(InitializeRequest);
//非同期ポストバックの開始
function InitializeRequest(sender, args)
{
//トリガーのIDを取得する
postBackElement = args.get_postBackElement();
//トリガーがPackageSizeListかどうか調べる
if (postBackElement.id == 'PackageSizeList')
{
//現在の状況を表示する
msgElement = $get('ResultLabel');
msgElement.innerHTML = "読み込み中...";
}
}
</script>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Pack...
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
}}
***JavaScriptの説明 [#jc332edb]
JavaScriptのコードの説明をします。
まず、[[PageRequestManager.getInstanceメソッド>http://msd...
beginRequestイベントハンドラ(InitializeRequestメソッド)...
なお"[[$get>http://msdn2.microsoft.com/ja-jp/library/bb39...
JavaScriptを記述する位置ですが、必ずScriptManagerの後にし...
この例では非同期ポストバックが完了したときに何もしません...
**JavaScriptを外部ファイルに記述する [#x7d6ab80]
上記の例ではページ内にJavaScriptを記述しましたが、外部フ...
#code(html){{
<script type="text/javascript" src="progress.js"></script>
}}
とすることもできますが、ここではScriptManagerのScriptsプ...
***JavaScriptの説明 [#n28e0297]
まずJavaScriptを外部ファイルに記述します。ここでは以下の...
#code(javascript){{
var postBackElement, msgElement;
//アプリケーションのloadイベントハンドラを追加
Sys.Application.add_load(ApplicationLoad)
//アプリケーションのloadイベントハンドラ
function ApplicationLoad(sender, args)
{
//PageRequestManagerを作成
var prm = Sys.WebForms.PageRequestManager.getInstance...
//イベントハンドラを追加
prm.add_initializeRequest(InitializeRequest);
}
//非同期ポストバックの開始
function InitializeRequest(sender, args)
{
//トリガーのIDを取得する
postBackElement = args.get_postBackElement();
//トリガーがPackageSizeListかどうか調べる
if (postBackElement.id == 'PackageSizeList')
{
//現在の状況を表示する
msgElement = $get('ResultLabel');
msgElement.innerHTML = "読み込み中...";
}
}
//スクリプトの読み込みが完了したことをScriptManagerに知ら...
if (typeof(Sys) !== 'undefined') Sys.Application.notifySc...
}}
前のコードと比較すると、違いは2箇所あります。
一つ目は、[[Sys.Application.loadイベント>http://msdn2.mic...
上記の例のようにApplication.add_loadを使う以外に、"pageLo...
#code(javascript){{
//アプリケーションのloadイベントハンドラ
function pageLoad(sender, args)
{
//PageRequestManagerを作成
var prm = Sys.WebForms.PageRequestManager.getInstance...
//イベントハンドラを追加
prm.add_initializeRequest(InitializeRequest);
}
}}
2つ目の違いは、最後の行で[[Sys.Application.notifyScriptLo...
アセンブリに埋め込まれたスクリプトファイルでは、通常は、n...
***ScriptManager.Scriptsプロパティに追加する [#f76e81e1]
このように作成したJavaScriptファイルをScriptManagerのScri...
+デザイナでScriptManagerを選択する。
+プロパティウィンドウの"Scripts"の右に表示される"..."ボタ...
+"メンバ"の下の"追加"ボタンをクリックして、ScriptReferenc...
+"ScriptReference プロパティ"の"Path"に"progress.js"と入...
+"OK"ボタンをクリックする。
&ref(updateprogress2.png);
このようにして出来上がったコードは次のようになります。<ht...
#code(html){{
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
<Scripts>
<asp:ScriptReference Path="progress.js" />
</Scripts>
</asp:ScriptManager>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Pack...
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
}}
***参考 [#gbf37d2b]
-[[PageRequestManager のイベントの処理>http://msdn2.micro...
-[[ASP.NET AJAX Client Life-Cycle Events>http://asp.net/A...
**参考 [#yb828d4b]
-[[UpdateProgress Control Overview>http://asp.net/ajax/do...
-[[UpdateProgress Control Tutorials>http://asp.net/AJAX/D...
**コメント [#r5f16099]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2008-0...
終了行:
#title(Microsoft ASP.NET AJAXを使う3)
#navi(.NETプログラミング研究)
#contents
*Microsoft ASP.NET AJAXを使う3 [#f1a19caf]
前号を発行してからかなり日が開いてしまいましたが、その間...
**UpdateProgressコントロールを使って、現在の状況を表示す...
今まで紹介してきたAjaxのサンプルで、ASP.NET AJAXを使わな...
UpdateProgressコントロールの使い方は、非常に簡単です。前...
&ref(updateprogress1.png);
全体のコードを以下に示します。すぐに処理が終了してしまう...
#code(vbnet){{
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub PackageSizeList_SelectedIndexChanged( _
ByVal sender As Object, ByVal e As EventArgs)
'3秒停止する
System.Threading.Thread.Sleep(3000)
Dim ddl As DropDownList = CType(sender, DropDownL...
If ddl.SelectedValue <> "0" Then
Dim fee As Integer = _
Me.GetYoupackFee(Integer.Parse(ddl.Select...
ResultLabel.Text = String.Format("料金は {0}...
Else
ResultLabel.Text = ""
End If
End Sub
Public Function GetYoupackFee(ByVal packSize As Integ...
If packSize <= 60 Then
Return 600
ElseIf packSize <= 80 Then
Return 800
ElseIf packSize <= 100 Then
Return 1000
ElseIf packSize <= 120 Then
Return 1200
ElseIf packSize <= 140 Then
Return 1400
ElseIf packSize <= 160 Then
Return 1600
ElseIf packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
</asp:ScriptManager>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Pack...
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="s...
<ProgressTemplate>
読み込み中...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void PackageSizeList_SelectedIndexChanged(
object sender, EventArgs e)
{
//3秒停止する
System.Threading.Thread.Sleep(3000);
DropDownList ddl = (DropDownList)sender;
if (ddl.SelectedValue != "0")
{
int fee = this.GetYoupackFee(int.Parse(ddl.Se...
ResultLabel.Text = string.Format("料金は {0}...
}
else
{
ResultLabel.Text = "";
}
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合...
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeLi...
<asp:ListItem Value="0">(選択してく...
<asp:ListItem Value="60">60cmまで</as...
<asp:ListItem Value="80">80cmまで</as...
<asp:ListItem Value="100">100cmまで</...
<asp:ListItem Value="120">120cmまで</...
<asp:ListItem Value="140">140cmまで</...
<asp:ListItem Value="160">160cmまで</...
<asp:ListItem Value="170">170cmまで</...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="s...
<ProgressTemplate>
読み込み中...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
}}
***AssociatedUpdatePanelIDプロパティ [#f6edf27f]
ページ内にUpdatePanelが複数存在する場合は、基本的にはどの...
***DynamicLayoutプロパティについて [#of37b4f9]
UpdateProgressが置かれている部分は、HTMLでは<div>で囲まれ...
#code(html){{
<div id="UpdateProgress1" style="display:none;">
読み込み中...
</div>
}}
ただしこのようになるのは、UpdateProgressのDynamicLayoutプ...
#code(html){{
<div id="UpdateProgress1" style="visibility:hidden;displa...
読み込み中...
</div>
}}
つまり、DynamicLayoutプロパティがTrueの場合は、UpdateProg...
一方DynamicLayoutプロパティがFalseの場合は、UpdateProgres...
**自分で現在の状況を表示する [#tc148b93]
.NET Framework 3.5からは問題ないようですが、ASP.NET AJAX ...
同様に、前号の「[[UpdatePanelに関連付けられていないコント...
このようなケースで現在の状況を表示するには、JavaScriptを...
いまさら「JavaScriptを自分で書け」と言われても...と思われ...
***Microsoft AJAX Library [#e43c1fa1]
UpdateProgressコントロールを使わずに、自分で現在の状況を...
ASP.NET AJAXにはそれを解決する方法が用意されています。そ...
Microsoft AJAX Libraryにある[[Sys.WebForms.PageRequestMan...
このPageRequestManagerは、ScriptManagerコントロールのSupp...
***具体例 [#q58cdc31]
それでは具体例を示します。ここではUpdateProgressコントロ...
先ほどのサンプルとの違いは、UpdateProgressコントロールを...
変更箇所は<html>内だけですので、以下に<html>内だけを示し...
#code(html){{
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
</asp:ScriptManager>
<script type="text/javascript">
var postBackElement, msgElement;
//PageRequestManagerを作成
var prm = Sys.WebForms.PageRequestManager.getInstance();
//イベントハンドラを追加
prm.add_initializeRequest(InitializeRequest);
//非同期ポストバックの開始
function InitializeRequest(sender, args)
{
//トリガーのIDを取得する
postBackElement = args.get_postBackElement();
//トリガーがPackageSizeListかどうか調べる
if (postBackElement.id == 'PackageSizeList')
{
//現在の状況を表示する
msgElement = $get('ResultLabel');
msgElement.innerHTML = "読み込み中...";
}
}
</script>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Pack...
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
}}
***JavaScriptの説明 [#jc332edb]
JavaScriptのコードの説明をします。
まず、[[PageRequestManager.getInstanceメソッド>http://msd...
beginRequestイベントハンドラ(InitializeRequestメソッド)...
なお"[[$get>http://msdn2.microsoft.com/ja-jp/library/bb39...
JavaScriptを記述する位置ですが、必ずScriptManagerの後にし...
この例では非同期ポストバックが完了したときに何もしません...
**JavaScriptを外部ファイルに記述する [#x7d6ab80]
上記の例ではページ内にJavaScriptを記述しましたが、外部フ...
#code(html){{
<script type="text/javascript" src="progress.js"></script>
}}
とすることもできますが、ここではScriptManagerのScriptsプ...
***JavaScriptの説明 [#n28e0297]
まずJavaScriptを外部ファイルに記述します。ここでは以下の...
#code(javascript){{
var postBackElement, msgElement;
//アプリケーションのloadイベントハンドラを追加
Sys.Application.add_load(ApplicationLoad)
//アプリケーションのloadイベントハンドラ
function ApplicationLoad(sender, args)
{
//PageRequestManagerを作成
var prm = Sys.WebForms.PageRequestManager.getInstance...
//イベントハンドラを追加
prm.add_initializeRequest(InitializeRequest);
}
//非同期ポストバックの開始
function InitializeRequest(sender, args)
{
//トリガーのIDを取得する
postBackElement = args.get_postBackElement();
//トリガーがPackageSizeListかどうか調べる
if (postBackElement.id == 'PackageSizeList')
{
//現在の状況を表示する
msgElement = $get('ResultLabel');
msgElement.innerHTML = "読み込み中...";
}
}
//スクリプトの読み込みが完了したことをScriptManagerに知ら...
if (typeof(Sys) !== 'undefined') Sys.Application.notifySc...
}}
前のコードと比較すると、違いは2箇所あります。
一つ目は、[[Sys.Application.loadイベント>http://msdn2.mic...
上記の例のようにApplication.add_loadを使う以外に、"pageLo...
#code(javascript){{
//アプリケーションのloadイベントハンドラ
function pageLoad(sender, args)
{
//PageRequestManagerを作成
var prm = Sys.WebForms.PageRequestManager.getInstance...
//イベントハンドラを追加
prm.add_initializeRequest(InitializeRequest);
}
}}
2つ目の違いは、最後の行で[[Sys.Application.notifyScriptLo...
アセンブリに埋め込まれたスクリプトファイルでは、通常は、n...
***ScriptManager.Scriptsプロパティに追加する [#f76e81e1]
このように作成したJavaScriptファイルをScriptManagerのScri...
+デザイナでScriptManagerを選択する。
+プロパティウィンドウの"Scripts"の右に表示される"..."ボタ...
+"メンバ"の下の"追加"ボタンをクリックして、ScriptReferenc...
+"ScriptReference プロパティ"の"Path"に"progress.js"と入...
+"OK"ボタンをクリックする。
&ref(updateprogress2.png);
このようにして出来上がったコードは次のようになります。<ht...
#code(html){{
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="ser...
<Scripts>
<asp:ScriptReference Path="progress.js" />
</Scripts>
</asp:ScriptManager>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="ResultLabel" runat="server...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Pack...
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
}}
***参考 [#gbf37d2b]
-[[PageRequestManager のイベントの処理>http://msdn2.micro...
-[[ASP.NET AJAX Client Life-Cycle Events>http://asp.net/A...
**参考 [#yb828d4b]
-[[UpdateProgress Control Overview>http://asp.net/ajax/do...
-[[UpdateProgress Control Tutorials>http://asp.net/AJAX/D...
**コメント [#r5f16099]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2008-0...
ページ名:
▲
▼
[
トップ
] [
新規
|
子ページ作成
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]