10


9

ASP.Net-AJAX UpdatePanel内のJavascript

UpdatePanel内の外部javascriptファイルからjavascriptを実行すると問題が発生します。 ListView内でカラーピッカーを動作させようとしています。 ListViewはUpdatePanel内にあります。

http://jscolor.com/ [このカラーピッカー]を使用しています。

以下に絞り込んだものを示します。

  • `UpdatePanel`の外側のテキストボックスでカラーピッカーを使用すると、 すべてのポストバックで完全に機能します。

  • UpdatePanel`内のテキストボックスでカラーピッカーを使用すると、 非同期ポストバック(リストビューの[編集]ボタンをクリック)を行うまで動作します。 `UpdatePanel`がポストバックを実行すると、クリックされたときにテキストボックスにカラーピッカーが表示されなくなります。 テキストボックスがListViewの `InsertItemTemplate`または EditItemTemplate`のいずれかにある場合にも同じことが起こります。

複製する場合は、カラーピッカー(無料)をダウンロードして、Webページに追加します…​


ページが読み込まれると、カラーピッカーは正常に機能します。 ボタン(ポストバックを実行)をクリックすると、カラーピッカーは機能しなくなります。

何か案は?

4 Answer


15


非同期ラウンドトリップの後、スタートアップスクリプトは実行されません。これは、おそらくAJAXコールバック後に機能しない理由です。 カラーピッカーには、ページの読み込み時に実行する必要がある関数が含まれている可能性があります。

これに何度も遭遇したので、スクリプトビハインドでスクリプトを登録するための小さなメソッドを作成しました。このメソッドは、非同期と非同期の両方の往復を処理します。 基本的な概要は次のとおりです。

private void RegisterClientStartupScript(string scriptKey, string scriptText)
{
    ScriptManager sManager = ScriptManager.GetCurrent(this.Page);

    if (sManager != null && sManager.IsInAsyncPostBack)
    {
        //if a MS AJAX request, use the Scriptmanager class
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), scriptKey, scriptText, true);
    }
    else
    {
        //if a standard postback, use the standard ClientScript method
        scriptText = string.Concat("Sys.Application.add_load(function(){", scriptText, "});");
        this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), scriptKey, scriptText, true);
    }
}

実際に上記をベースページクラスにベイク処理して、作業しているすべてのページが `this.RegisterClientStartupScript(…​)`を呼び出せるようにしました。 そのためには、基本ページクラスを作成してそこに含めるだけです(プライベートではなくprotectedとしてマークするか、継承ページクラスがアクセスできないようにします)。

上記のコードを使用すると、ページがポストバックまたはコールバックを実行しているかどうかに関係なく、クライアントスクリプトを自信を持って登録できます。 外部スクリプトファイルを使用していることに気付いたら、おそらく上記の方法を変更して、インラインではなく外部スクリプトを登録できます。 いくつかのスクリプト登録メソッドがあるため、詳細については、http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx [ScriptManager]クラスを参照してください…​


2


jscolorのソースコードを見た後、ウィンドウのロード時にすべてを初期化することに気付きました。 そのため、おそらく(UpdatePanel内で)次のように再初期化する必要があります。

function yourInit(){
   /* keep in mind that the jscolor.js file has no way to determine
      that the script has already been initialized, and you may end
      up initializing it twice, unless you remove jscolor.install();
   */

   if (typeof(jscolor) !== 'undefined'){
      jscolor.init();
   }
}
if (typeof(Sys) !== 'undefined'){
   Sys.UI.DomEvent.addHandler(window, "load", yourInit);
}
else{
   // no ASP.NET AJAX, use your favorite event
   // attachment method here
}

UpdatePanel内にjscolorスクリプトを配置する場合、jscolor.jsの最後に次のようなものを追加する必要があります。

if(Sys && Sys.Application){
   Sys.Application.notifyScriptLoaded();
}


1


「非同期ポストバックの実行時にサーバーからページにJavaScriptを追加する」ことができるScriptManager.RegisterStartupScriptを試しましたか?


0


カラーピッカーをセットアップするために実行されるjscolor.jsコードは、ページが最初にロードされたときにのみ呼び出されるため、サーバーでコントロールが再生成されると、jscolorによる変更が失われます。 非同期呼び出しが完了したときにjscolorでinitメソッドを呼び出すように、コードビハインドで呼び出されるjavascriptを登録できますか?