Asp.Netアヤックスの二つの基本的な開発モデル

入門

最近、いくつかの時間を費やして、すべては再びそれを読んでマイクロソフトの公式Asp.Net Ajaxのビデオは、アドレスがあるhttp://www.asp.net/learn/ajax-videos/ビデオのほとんどが8-15分の、非常に短いです、大半は、そこにコントロールの使用状況にAjaxControlToolkitについてであるが、一般的なシナリオとAsp.Netアヤックスの技術をカバーしています。

この記事では、開発モデル（サーバは結果を返し、クライアントはロジックを実行するためにサーバに要求）を使用Asp.Net Ajaxは、開発中に2つの最も一般的で、サーバー相互作用を行うことについて説明します。私は、暫定的にUpdatePanelの第一モード、第二と呼ばれるWebサービス（WCFサービス）モードと呼ばれます。

開始前にいくつかの準備

これらの記事のために、私はあなたがこれらの二つの成分Asp.Net Ajaxの拡張とAsp.Net Ajaxを制御ツールキットをインストールしていると仮定します。Ajaxを制御ツールキットをダウンロードするには、この場所に行くことができるのに対し、既に、.NET Frameworkの3.5に含まれているAsp.Net Ajaxの拡張：http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=16488。私はVS2008、私はGAC（グローバルアセンブリキャッシュ、グローバルアセンブリキャッシュ）にインストールのAjaxコントロールツールキットながら、Ajaxの拡張機能をインストールする必要はありません、ので、任意のDLLコンポーネントが含まれていないBinディレクトリに伴うコードの記事を使用していますので。あなたがコードを実行したい場合は、私はGACのAjaxコントロールツールキットにインストール、または自分の状況（VS2005やVS2008、プライベートアセンブリGACの展開または展開）コードいくつかの簡単な変更と構成のためになります好きなことができます。

あなたはAjaxControlToolkit.dllコピーがになります場合、GACにインストールしたい場合は、「C：\」ダウン、あなたは「VS2008のコマンドプロンプト」を開くことができ、その後、次のコマンドを入力し、Enterキーを押します。

ます。gacutil -i C：\ AjaxControlToolkit.dll

また、あなたが説明することにしたい二つのものがあります。あなたはAjaxControlToolkit分離コードページで定義されたタイプを使用する場合は、Web.configファイルの設定で調べる必要があり、あなたと私は、GACを展開するために使用され、その後のWeb.Configに設定されているとします。

<のsystem.web>
 <コンパイル、デバッグ= "false"に>
 <アセンブリ>
 の<addアセンブリ= "AjaxControlToolkit、バージョン= 3.0.20820.37372、カルチャニュートラル、PublicKeyToken = = 28F01B0E84B6D53E" />
 <！ -其余略- >
 </編集>
</system.web>

VS2008（VS2005）で、ツールボックス（ツールボックス）にAjaxControlToolkitをインストールすることができますが、ページにコントロールをドラッグすると、それは後に、インストールされ、デフォルトの接頭辞CC1を制御し、自動的にページの上部に生成されます。これと同様に、彼の党のコントロールを宣言しました。

//宣言自動的にページの上部に発生した
<TagPrefix = "CC1" ％登録アセンブリ= "AjaxControlToolkit、バージョン= 3.0.20820.37372、文化はニュートラル、PublicKeyToken = = 28f01b0e84b6d53e"ネームスペース= "AjaxControlToolkit" @％>
//ページのコントロールは、スタイル
<CC1：AutoCompleteExtender> ... </ CC1：AutoCompleteExtender>

そのような人はほかに、CC1はどんな意味を持っていない、非常に新鮮なページを感じます。この問題を解決するために、我々はまた、web.configファイルの設定を見ることができます：

<のsystem.web>
 <ページ>
 <コントロール>
 の<addアセンブリ= "AjaxControlToolkit、バージョン= 3.0.20820.37372、カルチャニュートラル、PublicKeyToken = = 28f01b0e84b6d53e"名前空間= "AjaxControlToolkit" tagPrefix = "ajaxControlToolkit" />
 <！ -其余略- >
 </制御>
 </ページ>
<のsystem.web>

あなたは上記の3つの手順を設定した後、私に似ている場合は、WebサイトがアセンブリのいずれかのBinディレクトリを持っていない、ページの最上部に加えて、もはやページドラッグ＆ドロップするときの制御、同時に、コントロールを宣言する必要がありません、そのコードは次のようになります。

<ajaxControlToolkit：AutoCompleteExtender> ... </ ajaxControlToolkit：AutoCompleteExtender>

この記事は、すべてのAsp.NetのAjax関連の記事は、あなたが使用していると私は同じ構成を想定しています。

Asp.Netアヤックス - のUpdatePanelモード

さて、簡単な例を考える私たちは、Labelコントロールのテキストは、現在の時刻に更新されたButtonコントロールをクリックしてページ、Buttonコントロール、上のLabelコントロールを配置し、ここで重要なのは、一方で、コードがサービス側にある時間を更新することです完了するために、クライアント上でJavascriptを非使用しています。このサービス側のコードは、一度に更新されますが、彼らは実際には任意のサーバー側の操作を行うことができますが。

UpdatePanelのは、おなじみの一つの方法である、そしてそれは、UpdatePanelのは、UpdatePanelの方に配置されたAjaxコントロールで更新する必要がありますドラッグアンドドロップページで、この場合、Labelコントロールです。Buttonコントロールはまた、配置されないことがあり、UpdatePanelの中に配置することができます。あなたがのUpdatePanel内のButtonコントロールを配置しない場合は、イベントがコントロールポストバックをトリガーできるかを指定するために使用ControlIDプロパティとEVENTNAMEプロパティを含め、UpdatePanelのトリガーノードを設定する必要があります。自然にボタンのID ControlIDの本実施形態では、EVENTNAMEむしろクリックしてくださいました。ボタンのClickイベントがトリガされた場合には、ポストバックの操作です。ここでは、メインコードのaspxページは次のようになります。

<ASP：のScriptManager ID = "ScriptManager1"にrunat = "サーバー">
</ ASP：のScriptManager>

当前时间：
<ASP：UpdatePanelのID = "UpdatePanel1"にrunat = "サーバー">
 <ContentTemplate>
 <ASP：ラベルID = "Label1を"にrunat ="サーバー」テキスト= "[未设置]"> </ ASP：ラベル>
 </ ContentTemplate>
 <トリガー>
 <ASP：AsyncPostBackTrigger ControlID = "Button1を" EVENTNAME = ""をクリック/>
 </トリガ>
</ ASP：UpdatePanelの>
 
<ASP：ボタンID = "Button1を"にrunat = "サーバー" onclickの= "のButton1 Click"テキスト= "更新时间" />

ポストコードでは、我々はそれに書かれたButtonコントロールのイベントハンドラをクリックして、いつものAsp.Netと同じように開発する必要があります。

保護されたボイドのButton1 Click（オブジェクト送信者、のEventArgs電子）{
ます。Label1.Text = DateTime.Now.ToLongTimeString（）。
}

OK、今ではすべてのページを実行し、ボタンをクリックすると、ラベル値は、最新の時間となるでしょう、準備ができて、そしてないことが多いと言われて点滅によって生成されたページポストバック、理由がないのリフレッシュ更新ページ。これはおそらく、Asp.Net Ajaxを実現する最も簡単な例です。しかし、問題は何ですか？サーバーは、完全なAsp.Netページのライフサイクルを実行するときに我々は、ボタンをクリックすると、あなたは、任意の区別なく、ページを更新するためのUpdatePanelを使用しない場合。あなたは、ドラッグラベル上のLabel2をのIDをテストページを行い、その後、次のPage_Loadでコードを書くことができます。

保護された、ボイドをPage_Load（オブジェクト送信者、EventArgsの電子）{
    場合{（IsPostBackプロパティ！）
        Label2.Text = DateTime.Now.ToLongTimeString（）;
    }他{
        Label2.Text = DateTime.Now.ToLongTimeString（）。
    }
}

デバッガを実行し、Page_Loadのラインにブレークポイントを設定すると、あなたは、彼らが他に{...}文を実行するボタンのボタンをクリックするたびに、命令はページのPage_Loadメソッドたびに実行されることがわかります。これは、この方法で使用される場合、サーバ側のオーバーヘッドが比較的大きいことを示しています。ここでは、サーバは、代入文のLabel2.Textを実行するものの、興味深い現象を見つけることが、Label2をが、ページを更新していなかったことができます。あなたはそれを更新したい場合は、それはまた、我々はページ上のUpdatePanelを再ドラッグできるのUpdatePanel、中に配置する必要があり、その後、Label2を内部に設置置きます。その後、我々はあなたがのLabel1とLabel2をが更新されているでしょう、ボタンをクリックします。以前、リコール：ここでも興味深い質問を提起し、我々は最初のUpdatePanelのトリガーノードを設定し、UpdatePanelのトリガ用に設定されていないが、後に新しいノードを追加しましたが、UpdatePanelの更新は、他に影響を与えます。時には、このような状況は、私たちが必要だということですが、より多くの場合より、我々は他のイベント、他のコントロールによってトリガLabel2をを更新する場合があります。このとき、第2のUpdatePanelは、UpdateMode属性は、他のUpdatePanelの影響を受け避け、「条件付き」に設定することができ、「常に」に、値のデフォルトを提出しました。

ここでは、この時間ASPXページのコードがあります：

<！ -上面相同- >
<HR /> 
<ASP：UpdatePanelのID = "UpdatePanel2"にrunat = "サーバー" は、UpdateMode = "条件付き" >
<ContentTemplate>
<ASP：ラベルID = "Label2を"ラナ= "サーバー"テキスト= "[未设置]"> </ ASP：ラベル>
</ ContentTemplate>
</ ASP：のUpdatePanel>

これらは、最も一般的なAsp.Net Ajax開発モデルであり、我々はそれがどのように実装するかを見、その欠点を見た：各操作のクライアントがへの追加、サーバー側の全ページのライフサイクルを実行します通信プロセスのクライアントとサーバは、ネットワークトラフィックが増加します完全なHTTP契約を提供する一方、サーバーの負担、。また、その利点が表示されます。非常に単純な、基本的な操作は、通常のAsp.Net開発と同等で実装し、Asp.Netサーバーコントロールのためにも使用されるコントロール（サーバー制御、ここではHTMLコントロールの条件に関して）。

Asp.NetのAjax - Webサービスモード

もう一つの方法は、もはやWebサービスクライアントをモデル化しないページを提出するが、唯一のWebサービス要求を送信し、処理のための応答を受信することです。ここで非同期にあるため、Webサービスを待たずにリクエストを送信した後、クライアント。このように、サーバがライフサイクルを実行せず、前後にデータの量も最小限に抑えています。しかし、欠点は、手動でいくつかのコードを記述する必要があります。WCFは、通信、統合されたWebサービスおよびこれら二つの技術をリモート処理用の次世代Windowsプラットフォームの基盤ですので、我々はサービスを作成するためにWCFを使用するためのは、行う方法のステップを見バイステップしてみましょう。

まず、「AJAX対応WCFサービス」を選択し、「新しい項目の追加」の名前を入力しSimpleServiceで、それは、サイト内SimpleService.svcファイルを追加するにはにApp_CodeにSimpleService.csを作成するだけでなく、のWeb.Configになります選択関連する設定を追加します。私たちはSimpleService.cs中にApp_Code内のコードを変更する必要があります。

パブリッククラスSimpleServiceで
{
 [OperationContract]
 パブリック文字列GetCurrentDate（列clientValue）{
 文字列RTN = "サーバ時間：" + DateTime.Now.ToLongTimeString（）+ "<brの/>";
 RTN + = "クライアントのバリュー（往復）：" + clientValue。
 RTNを返します。
 }
}

SimpleServiceでも機能の変更のいくつかを使用し、私はスペースを節約するためにそれをキャンセルさせていただきます。この方法は、サーバの時刻を取得し、その後、文字列clientValueを受け入れ、そして最終的にclientValueを返します。それは何も特別なように見えますが、私はクライアントの値の隣に括弧を追加気づいた、「往復」と言い、Ajaxアプリケーションのために、この値は、クライアントによって送信され、最終的にクライアントに返さ、クライアントに、クライアントからサーバへの旅行を旅行しました。

JavaScriptを有効にしてWebサービスを呼び出すことができるようにするために、我々はASPX登録ページで必要、ドラッグ・アンド・ページにものScriptManagerをドロップした後、次のように設定します。

<ASP：のScriptManager ID = "ScriptManager1"にrunat = "サーバー">
 <サービス>
 <ASP：ServiceReferenceパス= "〜/ SimpleService.svc" />
 </サービス>
</ ASP：のScriptManager>

次は新しいPattern2.aspxページ、ドラッグを作成し、その上に3個のHTMLタグをドロップします。スパン、入力（ボタン）、入力（テキスト）。クライアントのHTMLタグがにrunat =「server」を含んでいないことに注意してください、そしてここから、あなたはすでに、私たちは、クライアント側のHTMLコントロールを使用している大きな違いを見ることができます。次に、入力（ボタン）をダブルクリックするだけで、自動的に次のようにメインのコードはJavascriptのページのaspxケースを生成します。

<入力されたID = "txtSample"タイプ= "テキスト"スタイル= "幅：120ピクセル" /> 
/> [未设置</スパン>
/>

最も重要なは、次の書き込みにjavascriptのコードで、私はそれが最初に出てきた掲示し、次に説明します：

<スクリプト言語= "javascriptの"タイプ= "テキスト/ javascriptの">
関数Button1_onclick（）{
 VARコンテキスト= "コールバックの値"。//传给回调函数
 。VAR clientValue = $ GET（ "txtSample"）値。//获得テキストボックス的值
 SimpleService.GetCurrentDate（clientValue、onCompleteの、OnFailed、コンテキスト）。
 trueを返します。
}

関数onCompleteの（引数、コンテキスト）{
 アラート（コンテキスト）。
 VARスパン= $ GET（ "spnTime"）;
 span.innerHTML =引数。
}

関数OnFailed（引数）{
 アラート（ "更新日期失败！"）。
}
</ SCRIPT>

まず、このButton1_onclick（）メソッドを見て、我々は最初のコンテキストを宣言し、コンテンツが最後のパラメータは、コールバック関数に渡された値は、いくつかを容易にするために使用されるC＃デリゲート変数にBeginInvokeメソッドを呼び出すために（）メソッドと非常によく似ています処理。その後、我々は、入力（テキスト）入力の値がでclientValueに格納され得ます。その後GetCurrentDate最初のパラメータは、上記の定義である、我々はclientValueを通過したWebサービスのパラメータ（時）を呼び出し、2番目のパラメータは、コールバック関数onCompleteの成功で、OnFailedとき三番目は失敗ですコールバック関数で、我々はコンテキストを渡す最後のパラメータは、それが処理するコールバック関数に引き渡さすることができます。それが取得GetCurrentDate（）メソッドは値を返さない、むしろ転送パラメータonCompleteのコールバック関数の戻り値である非同期動作であるため。

次に、onCompleteの（）関数を見て、実際には、我々はほとんどを把握する必要があり、その2つの引数である：最初は、Webサービスメソッドの引数GetCurrentDate（）の戻り値であり、2番目のパラメータは、コールGetCurrentDate（あり）最後のパラメータは、渡されました。メソッド内で、我々は警告を使用する（）は、コンテキストの値を表示し、Webサービスは、スパンに示す値を返します。OnFailed（）失敗した更新を促すだけです。

次に、ページ上のボタンをクリックし、次のような結果が表示されます。

もう一度、我々は、Page_Loadの位置にブレークポイントを設定し、デバッグを開始、あなたは私たちがこのように使用する場合、再びサーバーページのライフサイクルを実行しません]ボタンをクリックして、クライアント/サーバーに参加し、少量のデータから最もあるでしょうこの方法ながら、我々はJavaScriptコードの一定量を記述する必要があるので、（往復は、データのみを必要な）、それが大幅にサイトのパフォーマンスを向上させることができます。

概要

この記事では、UpdatePanelの+サーバーコントロールを使用して、二つの方法でAsp.Net Ajax開発を使用した場合、単純な共通の説明、またはWebサービス+ HTMLタグ+ Javascriptを使用して、これら2つのアプローチの実施と効果がやります簡単な説明。

読書のためのおかげで、私はこの記事はあなたが助けて与えることができることを望みます！

ます。https：//www.cnblogs.com/JimmyZhang/archive/2008/11/05/1327709.htmlで再現