ASPX ページがあります。上部に 5 つのカテゴリ (例: ペン、本、靴、モバイル、ミラー) が表示されています。いずれかのカテゴリをクリックすると、そのカテゴリの製品をヘッダーの下に表示したいと思います。このためにページ全体をリロードしたくありません。画像の中央の場所を除いてクリックが発生したときに、ページをそのまま維持したい(ヘッダー、フッター、サイドパネル)製品)。これを行う最善の方法は何ですか?.ASP.NET Ajax 更新パネルには行きたくありません。プロジェクトで既に jQuery を使用しています。とにかく jQuery でこれを行う方法はありますか? アドバイスをお願いします。よろしくお願いします
4 に答える
を読むことをお勧めします
また
Web アプリケーションが実行されている場所 (インターネットではなくイントラネット) によっては、UpdatePanel を使用すると、AJAX スタイルの機能を実装するためのより迅速なオプションになる場合があります。
私によると、Repeater/DataGrid/GridView にラップされた UpdatePanel を使用すると、実装がはるかに簡単になります。
jQueryでもできます。これはCateogryId
、ajax リクエストを使用してサーバーに送信し、応答で製品のJSONを取得し、DOM 操作を使用して JSON データで div を埋めることで構成されます。
編集: JSON を使用すると、オブジェクト指向の方法で、複雑なデータを読みやすいテキスト形式で表すことができます。これを見てください -
var person = {
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]
};
person
person.firstName
は、「firstName」、「lastName」などのプロパティで構成される JSON オブジェクトです。これらのプロパティには、、などを使用してアクセスできますperson.lastName
。
これは JSON の例です。これを利用して、製品情報を含む独自の JSON 文字列を作成し、配列に入れてクライアントに送信できます。要するに、それはこのようなオブジェクトの配列になります -
var persons = [person1, person2, person3, ...]; //person1, person2, etc. are objects like the person object declared above.
DataContractJsonSerializerクラス (Framework 3.5 内) を使用して、JSON との間でオブジェクトをシリアル化/逆シリアル化できます。Framework < 3.5 を使用している場合は、 AjaxToolKitのJavaScriptSerializerクラスを使用して同じことを行うことができます。
Kirtan が述べたように、最も簡単な答えは更新パネルを使用することです。
そのルートに行きたくない場合は、jQuery を使用して、更新するパネルに入力するために必要なデータを返す IHttpHandler への Ajax 呼び出しを行うことができます。
手順は次のとおりです。
- jQuery を使用して "
.ashx
" Ajax ハンドラーを呼び出します。 - "
.ashx
" ファイルで、選択した形式で応答を生成します。これは、JSON または XML (JavaScript で応答を解析してリストを生成する場合)、または HTML コンテンツ自体をページに追加することができます。 - jQuery はハンドラーからの応答を受け取り、パネルに適切なデータを入力します。
IHttpHandler の使用方法に関するオンライン チュートリアルがいくつかあります。基本的に、ASP.NET の " Page
" クラスが派生する非常に単純なインターフェイスです。クラスよりもはるかに軽量であるPage
ため、UpdatePanel よりも優れたパフォーマンスを得ることができますが、ほとんどのパフォーマンス向上手法と同様に、コードが少し複雑になります。
IHttpHandlerクラスの使用方法に関するチュートリアルを次に示します。
ページのコード ビハインドで ICallbackEventHandler を実装し、div またはテーブルに詰め込む html のブロックを返します。
更新:これを実装するために必要なものの詳細については、http: //msdn.microsoft.com/en-us/library/ms178208.aspxを参照してください。