WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

UpdatePanel と半角スペース

by WebSurfer 24. May 2011 22:40

下の画像のように、複数連続していた半角スペースが、非同期ポストバックで再描画されると 1 文字になってしまうという話です。

複数連続していた半角スペースが 1 文字になってしまう

Label に表示する文字列の中の連続する半角スペースをブラウザ上でそのまま表示したいので、Label コントロールの CssClass に white-space: pre; と設定していたとします。さらに、その Label コントロール を UpdatePanel に配置していたとします。

初期画面では、半角スペースは設定したとおり連続してブラウザに表示されます(white-space: pre; の設定がないと、複数連続した半角スペースを Label に設定しても、ブラウザに表示された時は一個になってしまいます)。

ところが、非同期ポストバックをかけて UpdatePanel 内を部分更新すると、初期画面と同様に複数連続した半角スペースを Label に設定しても、ブラウザに表示された時は一個になってしまいます。もちろん CssClass の white-space: pre; の設定は有効な状態でです。

なお、これはブラウザに依存する問題で、IE6 と IE7 で発生します(それ以前のバージョンは未検証)。IE8, IE9, Firefox, Chrome, Safari は期待通り UpdatePanel 内を部分更新しても問題ありません。

何故でしょう?

最初は ASP.NET AJAX に関係する問題と思っていたのですが、そうではなかったです。ヒントはブラウザに依存するというところです。

原因は AJAX の部分レンダリングの際、JavaScript によって innerHTML を書き換えるとき、JavaScript が複数スペースを一個にしてしまうところにありました。

書き換えられた後は一個しかスペースがないので、いくら white-space: pre; としても複数のスペースは表示されないというわけでした。

という訳で、ASP.NET AJAX とは関係ありませんでした。IE6, IE7 で JavaScript を使って innerHTML を書き換えてやるだけで、この問題は再現できます。例えば、以下のコードのように。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rewrite innerHTML with multiple white space</title>
    <script type="text/javascript">
    //<![CDATA[
        var str = "<h1>半角スペース>     <5 文字??</h1>";

        function RewriteInnerHTML(id, innerHtml){
            document.getElementById(id).innerHTML = innerHtml;
        }
    //]]>
    </script>
</head>
<body>
    <div id="div1" style="white-space: pre;">
        <h1>半角スペース>     <5 文字</h1>
    </div>
    <input type="button" 
        value="innerHTML 書き換え" 
        id="button1" 
        onclick="RewriteInnerHTML('div1', str);" />
</body>
</html>

上記のコードを IE6 で実行し、[innerHTML 書き換え]ボタンをクリックした時のものがこの記事の一番上に示した画像です。

Tags:

AJAX

クライアントコールバック

by WebSurfer 2. April 2011 19:29

クライアント側のスクリプトによって、現在ブラウザに表示されているのと同じ URL に対して帯域外呼び出しを行い、その要求に従ってサーバー側で必要な処置を実行して、結果をクライアントに返すという、クライアントコールバックの話です。

クライアントコールバックの実行

今は、帯域外呼び出しの機能を自動化している ASP.NET AJAX Extensions の UpdatePanel などが利用できるので、この記事に書いたクライアントコールバックを実装する機会はないかもしれませんが、せっかくいろいろ調べて分かったことがありますので、備忘録として書いておきます。

ASP.NET クライアントコールバックは、XMLHttpRequest の必要な呼び出しをラッピングして独自の JavaScript API を提供してくれますので、開発者が帯域外呼び出しを実行するための JavaScript コードを自力で書く必要はありません。

代わりに、Page.ClientScript オブジェクトの GetCallbackEventReference メソッドを利用して、帯域外呼び出しを実行するために使用する JavaScript コードを生成します。このコードは、クライアント側のイベントハンドラに設定して利用します。

サーバー側では、ICallbackEventHandler インターフェイスの RaiseCallbackEvent が呼び出されて必要なサーバー側での処置が実行され、次にブラウザへのレスポンスが生成されるときに GetCallbackResult メソッドが呼び出されます。

上の画像を表示したコードをアップしておきます。画像は Callback ボタンをクリックしてコールバック前にクライアント側で実行されるスクリプト(例では alert)が実行されたところです。

alert ダイアログの OK ボタンをクリックするとコールバックがかかり、表示されている「コールバック前」という文字列が「クライアントからサーバーに渡した文字列 + サーバー側で追加した文字列」に書き換えられます。

<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  // ICallbackEventHandler インターフェイスを実装し、
  // RaiseCallbackEvent メソッドを提供している必要がある。 
    
  private string returnValue;

  // サーバー側でコールバックを実行するためにこのメソッド
  // が呼び出される。
  public void RaiseCallbackEvent(string arg)
  {
    // 引数 arg にはクライアントスクリプト CallServer 
    // 関数の第一引数に設定した文字列が渡される。
    returnValue = arg + " + サーバー側で追加した文字列";
  }

  // コールバック結果をクライアントに返すメソッド。
  public string GetCallbackResult()
  {
    return returnValue;
  }

  protected void Page_Load(object sender, EventArgs e)
  {
    ClientScriptManager cm = Page.ClientScript;

    // サーバーに実際に要求を行うヘルパー関数。
    // この例では cbReference は以下のようになる。
    // WebForm_DoCallback('__Page',arg,
    //        ReceiveServerData,"",null,false);
    string cbReference = 
      cm.GetCallbackEventReference(this, "arg", 
        "ReceiveServerData", "");

    // サーバーに要求を行うクライアントスクリプト。
    // arg は RaiseCallbackEventメソッドの引数に渡さ
    // れる文字列。context はコールバック前にクライ
    // アント側で実行されるスクリプト。
    String callbackScript = 
      "function CallServer(arg, context) {"
          + cbReference + "; }";

    // この例では以下のクライアントスクリプトが登録
    // される。
    // function CallServer(arg, context) {
    //     WebForm_DoCallback('__Page',arg,
    //         ReceiveServerData,"",null,false);
    // } 
    cm.RegisterClientScriptBlock(this.GetType(),
        "CallServer", callbackScript, true);
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Client Callback</title>
  <script type="text/javascript">
  //<![CDATA[
    // クライアント コールバック関数
    // コールバック イベントを処理したサーバーコード
    // から呼び出され、結果を表す文字列を受け取る。
    function ReceiveServerData(arg, context) {
      // 2011/11/19 修正(下の追記参照)
      var element = document.getElementById("Message");
      if (typeof element.textContent != "undefined") {
        element.textContent = arg;
      } else {
        element.innerText = arg;
      }
    }

    var str = "クライアントからサーバーに渡した文字列";

    // コールバック前に実行するクライアントスクリプト
    function DoBeforeCallback() {
        alert('コールバック前に実行された alert');
    }
  //]]>
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h1>Client Callback</h1>
    <input type="button" value="Callback" 
      onclick="CallServer(str, DoBeforeCallback());"/>
    <br />
    <span id="Message">コールバック前</span>
  </div>
  </form>
</body>
</html>

クライアントコールバックの問題は、クライアントとサーバー間の受け渡しが文字列に限定されていることです。文字列の内容は自由ですが、カスタムオブジェクトを受け渡したい場合はシリアル化と逆シリアル化は開発者が自力でコードを書かなければなりません。

というわけで、今後この方法を使うことはなさそうです。

------------ 2010/4/14 追記 ------------

この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。

------------ 2010/11/19 追記 ------------

Firefox では span id="Message" の「コールバック前」の文字列が書き換わらなかったので修正しました。修正したのは ReceiveServerData 関数の中身のコードです。

最初は、getElementById を使わず Message.innerText = arg; というようにしていたのが原因と思っていましたが、それだけが原因ではなくて、Firefox では innerText は使えないのでした。

Firefox では textContent を使うらしいです。ただし、これは IE では使えないのでtextContent を使えないブラウザがあるらしいので(IE では使えないという話がありますが IE9 は問題なかったです)、使えるか否かを判定して innerText と使い分ける必要があります。

加えて、コメントに「ここで定義せず GetCallbackEventReference メソッドの第 4 引数に設定することも可能。」と書いてあったのですが、これは間違っていたので削除しました。正しくは、第 4 引数はコールバック前に実行するクライアントスクリプトの文字列だったのです。(汗)

Tags:

AJAX

二度押し防止

by WebSurfer 12. December 2010 12:20

UpdatePanel を利用した非同期ポストバックを行う際に、最初の部分ページ更新が完了するまで 2 回目以降のリクエストをキャンセルする(いわゆる、ボタンの二度押し防止)方法の紹介です。

二度押し防止

その前に、ちょっと前置きが長くなりますが、それを実現するために利用する PageRequestManager クライアントオブジェクトについて説明します。

ASP.NET AJAX Extensions の ScriptManager と UpdatePanel コントロールを使用して部分ページ更新を行う場合、自力でクライアントスクリプトを書く必要はありません。

ただし、以下ような操作を行う場合は、クライアント側で適切なタイミングで発生するイベントを利用して、クライアントスクリプトで処置する必要があります。

  1. 複数の非同期ポストバックの処理方法を制御する。
  2. 部分ページ更新のリクエストをキャンセルする。
  3. 部分ページ更新のプログレスを表示する。
  4. 部分ページ更新時にデータを受け渡す。
  5. クライアントスクリプトでエラーを処理する。

開発者が XMLHttpRequest オブジェクトを直接管理している場合は、リクエストとレスポンスを完全に制御して、上記のような操作ができるらしいです。

しかしながら、自分には「XMLHttpRequest オブジェクトを直接管理」などということは無理です。だから ASP.NET AJAX Extensions を利用しているわけですし。

従って、XMLHttpRequest オブジェクトを管理している ASP.NET AJAX Extensions がイベントモデルを提供してくれない限り、自分には何もできません。

ScriptManager と UpdatePanel コントロールを使用しての非同期ポストバックは、内部で XMLHttpRequest オブジェクトを呼び出す PageRequestManager クライアントオブジェクトが関係しています。

PageRequestManager が提供している以下のイベントを利用して、開発者が部分ページ更新のリクエストとレスポンスの処理をカスタマイズできます。

  • initializeRequest
  • beginRequest
  • pageLoading
  • pageLoaded
  • endRequest

詳しくは MSDN ライブラリの ASP.NET PageRequestManager クラスの概要 および PageRequestManager のイベントの処理 を参照してください。

前置きが長くなりましたが、ここでは、上記 1 項の「複数の非同期ポストバックの処理方法を制御する」でボタンの二度押しを防止する方法と、上記 2 項の「部分ページ更新のリクエストをキャンセルする」で未完了のリクエストをユーザーがキャンセルできる方法の例を示したコードを紹介します。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  protected void Button_Click(object sender, EventArgs e)
  {
    System.Threading.Thread.Sleep(5000);
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>二度押し防止</title>
  <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdatePanel3 { 
      width: 200px; 
      height: 250px; 
      border: gray 1px solid;
      position: relative;
      float: left; 
      margin-left: 10px; 
      margin-top: 10px;
    }
    #UpdateProgress1 {
      width: 400px; 
      background-color: #FFC080;
      border: gray 1px solid;
      bottom: 0%; 
      left: 0px; 
      position: absolute;
    }
    .labalposition {
      bottom: 0%;
      left: 0px; 
      position: absolute;
    }
  </style>
  <script type="text/javascript">
    <!--
    var manager;
    var initiatingButtonId;

    function pageLoad(sender, args) {
      if (args.get_isPartialLoad() === false) {
        manager = Sys.WebForms.PageRequestManager.getInstance();
        manager.add_initializeRequest(OnInitializeRequest);
        manager.add_endRequest(OnEndRequest);
      }
    }

    function OnInitializeRequest(sender, args) {
      if (manager.get_isInAsyncPostBack()) {
        var buttonId = args.get_postBackElement().id.toLowerCase();
        if (buttonId == "button1" && 
          initiatingButtonId == "button1") {
          $get("Label1").innerHTML = "このパネルの更新中";
        }
        else if (buttonId == "button1" && 
          initiatingButtonId == "button2") {
          $get("Label1").innerHTML = "Panel B 更新中";
        }
        else if (buttonId == "button2" && 
          initiatingButtonId == "button1") {
          $get("Label2").innerHTML = "Panel A 更新中";
        }
        else if (buttonId == "button2" && 
          initiatingButtonId == "button2") {
          $get("Label2").innerHTML = "このパネルの更新中";
        }

        args.set_cancel(true);
      }
      else {
        initiatingButtonId = 
          args.get_postBackElement().id.toLowerCase();
      }
    }

    function OnEndRequest(sender, args) {
      $get("Label1").innerHTML = "";
      $get("Label2").innerHTML = "";
    }

    function AbortPostBack() {
      if (manager.get_isInAsyncPostBack()) {
        manager.abortPostBack();
      }
    }
    //-->
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <asp:UpdatePanel ID="UpdatePanel1" 
    UpdateMode="Conditional" 
    runat="server">
    <ContentTemplate>
      Panel A
      <hr />            
      <%=DateTime.Now.ToString() %> <br />
      <asp:Button ID="Button1" 
        runat="server" 
        Text="Refresh Panel" 
        OnClick="Button_Click" />    
      <br />
      前の非同期ポストバック処理が終了しないと、
      次の非同期ポストバックはできません。
      ボタンをクリックしてもキャンセルされます。
      <br />
      <asp:Label ID="Label1" 
        runat="server" 
        CssClass="labalposition" />
        </ContentTemplate>
  </asp:UpdatePanel>

  <asp:UpdatePanel ID="UpdatePanel2" 
    UpdateMode="Conditional" 
    runat="server">
    <ContentTemplate>
      Panel B
      <hr />
      <%=DateTime.Now.ToString() %> <br />
      <asp:Button ID="Button2" 
        runat="server" 
        Text="Refresh Panel" 
        OnClick="Button_Click"/>
      <br />
      こちらも、左のパネルと同様、
      前の非同期ポストバック処理が終了しないと、
      ボタンをクリックしてもポストバックはキャンセルされます。
      <asp:Label ID="Label2" 
        runat="server" 
        CssClass="labalposition" />    
    </ContentTemplate>
  </asp:UpdatePanel>    
  <asp:UpdateProgress ID="UpdateProgress1" 
    runat="server">
    <ProgressTemplate>
      非同期ポストバックで更新中です・・・  
      <input type="button" 
        value="stop" 
        onclick="AbortPostBack()" />            
    </ProgressTemplate>
  </asp:UpdateProgress>
  </form>
</body>
</html>

通常のポストバックにおける二度押し防止では、制御対象のボタンがクリックされた時に document.readyState が complete になっていない場合を通信中と判断し、通信処理を行わないように制御する手段が取られることがあります。しかしながら、UpdatePanel を利用した非同期ポストバックでは document.readyState は即 complete となるため、その方法は使えませんので注意してください。

他に、上記 4 項の「部分ページ更新時にデータを受け渡す」例が、先の記事 ModalPopup で編集・更新操作 に書いてありますので、興味があればそちらも見てください。pageLoaded イベントと ScriptManager の RegisterDataItem メソッドを使っています。

------------ 2010/4/14 追記 ------------

この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。

Tags: ,

AJAX

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  November 2021  >>
MoTuWeThFrSaSu
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

View posts in large calendar