【解決方法】ボタンのクリック時にページ全体を更新しないようにする

テキストボックスを含むグリッドがあります。デフォルトでは、グリッドには 10 行が含まれます。フッターテンプレートの[新しい行の追加]ボタンをクリックすると、以前に入力した詳細が消去されます。ボタンのクリックで以前の詳細がクリアされないようにする解決策を教えてください。

私が試したこと：

複数の更新パネルと AsyncPostBackTrigger を試しました

解決策 1
解決策 2
解決策 3

解決策 1

引用：

グリッドには 10 行が含まれます。

このコードは ASP.NET Web フォームに属しているような気がします。そうであれば、ページがサーバーに送信されるたびに、コントロールの状態を保存し、その状態をブラウザーに返すようにする必要があります。ページのリロード後にユーザーに表示されます。次のリンクをチェックして、これがどのように機能するかを理解してください。

asp.net Webフォームとjquery:ポストバック間でjqueryの状態を保存/復元する方法は? – スタックオーバーフロー[^]
viewstate – リクエスト間でASP.NET WebFormsページの状態を保存する方法[^]

一つ シンプル、クリーン、エレガント それを行う方法は使用しています event.preventDefault(); これにより、フォームが送信されなくなります。ただし、この場合、Ajax などを使用して自分でコンテンツをサーバーにアップロードする必要があります。

JavaScript

// This will work in ASP.NET Web Forms too, but would cause other issues
$("#btnId").click(function () {
   event.preventDefault();
});

フレームワークは ASP.NET Web フォームであるため、次のように、この JavaScript がクライアント側から呼び出されるようにする必要があります。

// return false; does the same thing, from 1000 ft above.
OnClientClick="uploadDataManually(); return false;" />

ASP.NET Web フォームで設定したコントロール ID を JavaScript コードで使用して、この動作を自由に制御することもできます。

解決策 2

UpdatePanel の状態と値を維持することとは何の関係もありません WebForm Controls. 状態を追跡し、記憶媒体 (Session、ViewState、または Database など) のどこかに保存して、ポストバック全体で値を参照できるようにする必要があります。私が何年も前に書いたこの記事をチェックしてください。 GridView で行を動的に追加および削除し、すべての行を一度に保存する[^]

ページ全体の更新を避けたい場合は、UpdatePanel コントロールを使用しないでください。代わりに、クライアント側のグリッド (jQuery グリッド、Webgrid など) で AJAX を使用し、クライアント (JavaScript コード) ですべてを処理します。ただし、クライアント側のルートに行く場合、サーバーコントロールはサーバーで操作されることを意図しているため、サーバー側の GridView が提供する必要があるすべての機能が失われるという欠点があります。

解決策 3

type button を使用します。デフォルトは送信で、次のようなフォームを投稿します。