ASP.NET_jquery の AJAX 呼び出しサンプル コード

1 はじめに
最近、ASP.NET で AJAX 呼び出しを行いました。クライアントは、まず ASP.NET サーバーのバックグラウンドからページ テンプレートを取得し、次にページ テンプレートを実装するためにページが初期化されるときにサーバーから関連データを取得します。ダイナミックな表示。具体的な実装は次のとおりです:
1) クライアントは HTTP GET リクエストを ASP.NET バックグラウンドに送信します
2) バックグラウンドは HTML テンプレートをクライアントに送信し、XML 文字列をメモリに保存します (XML 文字列の動的表示に必要なデータが含まれています)。ページ テンプレート) )
3) クライアントはページを初期化するときに、AJAX リクエストを送信し、XML 文字列を取得します。
4) 取得した XML 文字列を使用して HTMl テンプレートをカスタマイズし、HTML ページ テンプレートの動的な表示を実現します。 。
2 いくつかの重要なポイントの概要とコード例
2.1 ASP.NET サーバー側
2.1.1 C# を使用して XML 文字列を生成
これは、System.Xml 名前空間内のいくつかのクラスを使用して実現できます。以下はコードサンプルです。

コードをコピーします コードは次のとおりです。

ArrayList ステップ = new ArrayList() ;
String errordisscription = "位置がありません";
for (int i = 0; i {
steps.Add(new Step(@)画像/1.jpg", "ステップ21の説明"));
}
XmlDocument doc = new XmlDocument();
XmlNode docNode = doc.CreateXmlDeclaration("1.0", "UTF-8", null );
doc.AppendChild(docNode);
// ルートを追加します
XmlNode = doc.CreateElement("Root");
doc.AppendChild(rootNode);エラー説明ノードを追加します
XmlNode errorNode = doc.CreateElement("ErrorDescription");
errorNode.AppendChild(doc.CreateTextNode(errordisscription));
rootNode.AppendChild(errorNode);ノードのステップを追加します
XmlNode productsNode = doc.CreateElement("Steps");
rootNode.AppendChild(productsNode);
for (int i = 0; i {
XmlNode productNode = doc.CreateElement("step");
XmlAttribute productAttribute = doc.CreateAttribute("description");
productAttribute.Value = ((Step)steps[i]); ;
productNode.Attributes.Append(productAttribute);
//productNode.Value = ((Step)steps[i]).imagePath
productNode.AppendChild(((Step)steps) [i]) .imagePath));
productsNode.AppendChild(productNode);
Global.Repairsteps= doc.InnerXml;


生成される XML は次のとおりです。

コードをコピー コードは次のとおりです:

-

-
<ステップの説明>説明">images/1.jpg
<ステップ説明="ステップ21の説明">images/1.jpg
<ステップ説明="ステップ21の説明"> image/1.jpg
images/1.jpg
images/1 jpg



2.1.2 Ajax リクエストに応答して XML ストリームを返す
ここで、HTML ヘッダーを追加し、 Content-Type を宣言します。

コードをコピーします

コードは次のとおりです: Response.Clear(); Response.AddHeader("Content-Type", "text/xml");

Response.Write(Global.Repairsteps); ;

2.1.3 リクエスト間での複数のデータ共有
複数のリクエスト間でのデータ共有を実現する方法は非常に簡単で直感的であり、Global オブジェクトを使用するだけです。

コードをコピー

コードは次のとおりです。 public class Global { // /

/// 重要なものを格納するグローバル変数

static string _repairsteps; >// / 静的な重要なデータを取得または設定します。
///
public static string Repairsteps
{
get
{
return _repairsteps; >}
set
{
_repairsteps = value;
}
}
}


2.2 クライアント
2.2.1 AJAX Get XML




コードをコピー

コードは次のとおりです:

$.ajax({
type: "GET",
url: "http://localhost:3153/WebSite2/",
cache: false,
dataType: "xml",
error:function(xhr, status, errorThrown) {
alert(errorThrown 'n' status 'n' xhr.statusText);
},
success: function(xml); {
//ここでは、Ajax 経由で受け取った XML を処理できます
}});

2.2.2 HTML リスト要素を動的に挿入する
より一般的な方法は、HTML を生成することです。 stream を選択し、append または html を使用して Stream を DOM に挿入します。これには問題があり、ストリーム内に二重引用符または一重引用符が含まれる場合、多くの "" 区切り文字を使用する必要があり、エラーが発生しやすく、読みにくく、実際には JQuery によって新しい要素が作成されます。関数。 $ への入力パラメータに が含まれている限り、JQuery はそれをセレクター式として認識しませんが、生成された新しい DOM 要素として認識します。以下はコードサンプルです。

コードをコピーします。 コードは次のとおりです。

$( xml).find ("ステップ").each(function(){
var stepimagepath=$(this).text();
var stepdescription=$(this).attr("description");
additem( stepimagepath, stepdescription);
function additem(stepimagepath, stepdescription){
$('.ad-thumbs ul').append(
$('< li>') .append(
$('').attr('href', stepimagepath).append(
$('').attr('src', stepimagepath).attr ('alt', stepdescription)
)));
}

生成される HTML セクションは次のとおりです:

コードをコピー コードは次のとおりです。

• ;

li> ;li>
• 
>
• 
🎜>

3 概要
この記事では、ASP.NET で Ajax を使用するときに発生する可能性のあるいくつかの重要なポイントを紹介します。 C# は、XML ストリーム、AJAX 実装 (サーバーおよびクライアント)、グローバル変数、および HTML 要素を動的に挿入するための優れた方法を生成します。

http://www.dotnetperls.com/global-variables -aspnet

http://api.jquery.com/jQuery/