2

Web サイトで UpdatePanels を使用すると大きな問題が発生します。問題は、ScriptManager を使用すると、ページが最初にロードされたときにアクティブだったすべてのクライアント側 JavaScript が、更新パネルがポストバックされると失われることです。

これが私がやろうとしていることです...

同じページに、それぞれ独自の更新パネル内に多数の .net カレンダー コントロールがあります。関連するテキスト ボックス内 (更新パネル内) をクリックするまで、カレンダーは最初は非表示になっています。その時点でカレンダーがポップアップ表示され、日付を選択できるようになります。これらのカレンダーは、実際に日付を変更する (ポストバックする) まではうまく機能します。その後、テキスト ボックス内をクリックしてもカレンダーがポップアップしなくなり、「オンフォーカス」JavaScript が失われます。

何時間もGoogleで調べた後、TextBoxに「onfocus」属性を動的に追加し、カレンダーがポストバックしたときに起動スクリプトをScriptManagerに登録することで、物事を半機能させることができます。

例：

TextBox1.Attributes.Add("onfocus", "document.getElementById('searchArrivalDateCalendarDiv').style.display = 'block';")
ScriptManager.RegisterStartupScript(Page, GetType(Page), "StopTxtClick", "$(document).ready(function(){$('.txtArrivalDate').click(function(event){event.stopPropagation(); $('div.searchArrivalDateCalendarDiv').show(); });});", True)

これは、特にマスター ページを導入する場合には、実際的ではないように思えます。とんでもない数の起動スクリプトを再登録しなければならなくなります。

もっと簡単な方法があるはずですか？

4

3 に答える 3

0

イベント委任を使用したいようです。主なアイデアは、イベントがバブルアップするため、更新パネルの外側 (おそらく updatepanel が存在する div またはテーブル) にイベント ハンドラーをアタッチすることです。このハンドラーは、受信するすべてのイベントを担当するため、更新パネルがポスト バックし、新しいテキスト ボックスがレンダリングされた場合でも、イベント ハンドラーを再アタッチする必要はありません。新しいテキスト ボックスがイベントを発生させると、既存のイベント ハンドラーがそれを処理しようとします。

以下は、javascript でイベント委任を行う 1 つの方法です (jquery を使用し、http: //www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery から取得) 。

jQuery.delegate = function() {
            return function(e) {
                var target = $(e.target);
                if (target.attr("showCalendar")) {
                    var calendar = $("#" + target.attr("showCalendar"));
                    calendar.css("display", "block");
                }
            }
        }

        $(document).ready(function() 
        {
            $('#test').click($.delegate());
        });

<form id="form1" runat="server">
        <asp:ScriptManager runat="server" EnablePartialRendering="true"/>
        <div id="test" style="width:100%;">
            <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    <input type="text" id="testText" showCalendar="testCalendarDiv" />
                    <div id="testCalendarDiv" style="display:none;">
                        <asp:Calendar runat="server" ID="testCalendar1"/>
                    </div>
               </ContentTemplate>
           </asp:UpdatePanel>
        </div>
    </form>

この簡単な例では、この div のクリック時にデリゲート メソッドを登録します (テキスト ボックスとカレンダーはこの div 内にあります)。テキスト ボックスをクリックすると、クリック イベントが div までバブルします。デリゲート メソッドが呼び出され、イベントを発生させた要素のshowCalendar属性をチェックします。この属性が存在する場合、この属性が指す要素を見つけて、その表示スタイルを更新します。これは非常に単純な例ですが、デリゲート メソッドを簡単に拡張して、登録したある種のルールに基づいて呼び出す関数を取り込むことができます。

于 2010-02-27T01:45:19.033 に答える
0

答えてくれてありがとう。

私はまだこの問題を解決することができませんでした。ただし、カレンダーのポップアップの代替ソリューションを見つけました。

現在、ASP.Net AJAX コントロール ツールキットの一部であるCalendarExtenderコントロールを使用しています。それは私が必要とするものにとってはるかに優れたソリューションです。カレンダーは全体的にずっとスムーズできれいになり、更新パネルを使用する必要がなくなりました。また、追加のコーディングなしで複数のカルチャをサポートしているため、優れています。

乾杯。

于 2010-03-04T12:46:01.407 に答える
0

問題は、UpdatePanel の更新によって div 要素内の DOM が完全に消去されることです。これを修正する最も簡単な方法は、可能であれば live() 機能を使用することです。

$(document).ready(function () {
  $('.txtArrivalDate').live('click', function (event) {
    event.stopPropagation();

    $('div.searchArrivalDateCalendarDiv').show();
  });
});
于 2010-02-27T01:53:19.413 に答える