4

UIをアニメーション化し、その状態を変更できるjqueryを使用して、asp.net Webforms（3.5 sp1）アプリケーションを構築しています。UIが明らかに初期状態にリセットされるポストバックを開始するまで、それはうまく機能していました。

私の質問は、ポストバック間で jquery/UI の状態を保存および復元するためのベスト プラクティスは何ですか?

ありがとう、エギル。

更新：どうもありがとう、素晴らしい意見、悪いことに、複数の回答を「回答」としてマークすることはできません。

4

4 に答える 4

5

（ユーザー設定を保存するのではなく）ポストバック間でUIウィジェットの状態を保存することについて言及していると思います。

その状態の多くは、特定の一連の対話 (たとえば、このツリー ノードを展開する、そのグリッド行をクリックするなど) の後、特定のユーザーの特定のウィジェットにのみ適用されます。ページの読み込み全体で状態を復元することが重要でない限り、このようなことはデータベースやセッションに入る必要はありません。

私が 1 つまたは 2 つのオブジェクトに入れる傾向があるすべてのもの、たとえば:

treeState.expandedNodeId = 'foo';
gridState.selectedRowIndex = 3;

次に、定期的に隠しフィールドに保存します。

$('.treeState').val(Sys.Serialization.JavaScriptSerializer.serialize(treeState));

等

値はポストバックの結果とともに送り返さdeserializeれ、保存された値からウィジェットを復元します。面倒ですが、うまく機能します。

于 2009-02-01T14:49:19.413 に答える
5

私は通常、メニューの状態やフィルター (div 内の入力のセット) の可視性などを、AJAX を介してセッションのサーバー側に保存します。メニューが展開されるかフィルターが表示されると、クリック ハンドラーは Web サービスに対して AJAX イベントを発生させます。Web サービスは、メニューの状態を記録したり、ユーザーのセッションでの可視性をフィルター処理したりします。ポストバックでは、各メニュー/フィルターに対応するセッション変数を使用して、CSS を介して初期状態を設定します。クライアント側で変更を加えた場合、読み込み後に JavaScript によって更新されたときにページが点滅しないため、これはユーザー エクスペリエンスが向上することがわかりました。

例 - 私は外出中なので、これはプロジェクトの実際のコードではなく、不完全な場合があります。jQueryを使用しています。Web サービスの URL は、Web サービスの実装方法によって異なります。私は（ほとんど）ASP.NET MVCを使用しているので、私のものはコントローラーアクションになります。

<script type='text/javascript'>
    $(document).ready( function() {
       $('#searchFilter').click( function()  {
           var filter = $(this);
           var filterName = filter.attr('id');
           var nowVisible = filter.css('display') === 'none';
           if (nowVisible) {
              filter.show();
           }
           else {
              filter.hide();
           }
           $.post('/controller/SetFilterVisibility',
                  { name: filterName, visibility: nowVisible } );
       });
    });
</script>


<div id='searchFilter' <%= ViewData["searchFilterVisibility"] %> >
    ...
</div>

サーバー側コード

[AcceptVerbs( HttpVerbs.POST )]
[Authorization]
public ActionResult SetFilterVisibility( string name, bool visible )
{
    Session[name] = visible;
    return Content( string.Empty );  // not used... 
}

[AcceptVerbs( HttpVerbs.GET )]
[Authorization]
public ActionResult SomeAction( int id )
{
    ...
    ViewData["searchFilterVisibility"] = Session["searchFilter"];
    ...
    return View();
}
于 2009-02-01T13:44:25.940 に答える
4

次の 2 つのオプションがあります。

  • クライアント側のクッキー
  • ポストバックまたは webmethod 呼び出しを介して UI 設定をサーバー側に保存する

2 番目のオプションはより多くの労力を必要としますが、クライアント マシンに関係なくユーザーに適用できる「移植可能な」UI 設定を提供できます。設定が「使い捨て」の場合は、クライアント側の Cookie を使用します。

JavaScript と Cookie の使用方法:

http://techpatterns.com/downloads/javascript_cookies.php

私は通常、ポストバックを介してUI設定サーバー側をデータベースに保存しますが、ユーザーがjQueryを介してUIを変更していて、それらの変更を保持したい場合は、おそらく次のようにします。

  • aspx ページにスクリプト マネージャーを追加する
  • EnablePageMethods="true" を設定します
  • コードビハインドで WebMethod を作成します
  • UI を更新する jQuery メソッドで、WebMethod への呼び出しを追加し、UI 設定を返します。
  • WebMethod に渡されたすべての設定をデータベースに保存します
  • 次にユーザーがページにアクセスしたときに、設定をフェッチしてサーバー側のコントロールをできるだけ多く設定するか、jQuery ready メソッドを使用して、データベースから UI 設定をフェッチして渡す別の Web メソッドを呼び出します。 jQuery に戻り、コントロールを設定できるようにします。

jQuery と WebMethod の呼び出しに関するまともな記事は次のとおりです。

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

注意が必要な問題は、EventValidation です。ページのライフサイクルの範囲外でコントロール値を取得し、ポストバックでそれらの設定を使用することを期待すると、問題が発生します。たとえば、webmethod を介してドロップダウン リストに値を追加すると、ページの作成時にそれらの値がドロップダウン リストにも追加されていない限り、ポストバック時にエラーがスローされます。

于 2009-02-01T13:00:19.193 に答える
0

HTML5 ストレージを使用しています。永続化する方法を選択できます (ローカル ストレージまたはブラウザー セッションごと)。非 HTML5 が心配な場合は、Amplify.Storage を使用できます。欠点は、保存/読み取りを呼び出すコードを作成する必要があることです。これを自動化する方法を探しています。誰かアイデアがあれば教えてください。ありがとう。

于 2011-08-24T16:28:54.963 に答える