WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

UpdatePanel と ListView

by WebSurfer 2016年11月20日 17:24

先に今回の事例から学んだ教訓を書いておきます。ちょっと今さらながらの感がありますが。

ASP.NET 4 以降では、UpdatePanel を使って非同期ポストバックを行う場合、ポストバックのトリガとするコントロールの ClientIDMode プロパティはデフォルトではなく AutoID にしておくこと。

UpdatePanel に LinkButton を含む ListView を配置した場合、LinkButton をクリックしても非同期ポストバックとならず、同期ポストバックになることからこの問題に気がつきました。(注: GridView の場合は非同期ポストバックがかかります・・・理由後述)

UpdatePanel と ListView

これは LinkButton に限らず、ASP.NET が自動生成するスクリプトの __doPostBack メソッドを利用してポストバックをかけるコントロールすべてに同様です。例えば TextBox の AutoPostBack プロパティを true にしたような場合も非同期ポストバックはかかりません。

そもそもの原因は ASP.NET サイトの記事 ASP.NET 4 Breaking Changes / ClientIDMode Changes にあるように、ASP.NET 4 からは ClientID の命名がデフォルトで Predictable となったからです。(正確に言うと、コントロールの ClientIDMode はデフォルトで Inherit だが、ページの ClientIDMode はデフォルトで Predictable なので、それを継承して結果的に Predictable になるということです)

ScriptManager が生成するスクリプトは前の方法、すなわち AutoID モードでの ClientID を期待しているので、デフォルトの Predictable では非同期ポストバックのトリガとなるコントロールとしては認識されません。

具体的にどういう話かというと、以下の通りです。

上の画像のように ListView 内に LinkButton を配置すると、ASP.NET がそれを html ソースにレンダリングする時、ClientIDMode が Predictable の場合と AutoID の場合とで id は以下のように異なります。上が Predictable、下が AutoID の場合です。

<a id="ListView1_LinkButton1_0" 
 href="javascript:__doPostBack('ListView1$ctrl0$LinkButton1','')">
 LinkButton
</a>

<a id="ListView1_ctrl0_LinkButton1"
 href="javascript:__doPostBack('ListView1$ctrl0$LinkButton1','')">
 LinkButton
</a>

__doPostBack メソッドの第一引数にはコントロールの UniqueID が設定されます。UniqueID の命名規則は、親名前付けコンテナーの ID 値とコントロールの ID 値を '$' で連結するもので、上の例では 'ListView1$ctrl0$LinkButton1' となります。

AutoID の場合、UniqueID の '$' を '_' に置き換えた文字列が id の文字列と同じになるとことに注目してください。Predictable ではそうはなりません。

ScriptManager がページに配置されると、それが生成する JavaScript のコードでポストバックを制御するようになりますが、その時 UniqueID を使ってトリガとなった html 要素を探し、同期 or 非同期どちらのトリガになるかを判定します。

具体的には、ScriptManager が生成する _doPostBack という名前のメソッドの中で、ポストバックのトリガとなったコントロールの UniqueID の '$' を '_' に変換した id で getElementById メソッドを使って要素を探しに行きます。

なので、ClientIDMode がデフォルトでは見つからない、AutoID の場合は見つかるということになります。

上のステップで html 要素が見つかった場合は非同期ポストバックのトリガと判定され、直ちに非同期ポストバックがかかるようになっています。

上のステップで直接当該要素を見つけられなかった場合は、_findNearestElement というメソッドを使って上位の要素を探しに行きます。上の例の html ソースの UniqueID の場合は最終的に ListView1 という名前の id の要素を探しに行きます。

ところが ID="ListView1" という ListView コントロールから ASP.NET が生成する html 要素(table)の id は "ListView1_itemPlaceholderContainer" になり、ListView1 という名前の id の要素は見つからないという結果になります。

直接見つからず、その親も見つからなかった場合は、当該要素は非同期ポストバックのトリガとは見なされず、同期ポストパックがかかるという結果になります。

ただし、ListView に代えて GirdView を使った場合は、その中に配置した LinkButton クリックでも非同期ポストパックがかかります。その理由は、例えばサーバー側での ID を "GridView1" とした場合、html 要素(table)の id は同じく "GridView1" になるので、_findNearestElement メソッドで親が見つかるからです。

しかし、やはり正解は、ListView、GridView に関係なく、UpdatePanel を使って非同期ポストバックを行う場合トリガとするコントロールの ClientIDMode プロパティは AutoID にしておくことだと思います。

Tags: , ,

AJAX

UpdatePanel 内の TextBox に focus

by WebSurfer 2010年11月21日 17:22

IE を使った場合、UpdatePanel 内に配置した TextBox に、ボタンクリックで非同期ポストバックした後、JavaScript でフォーカスを当てても無視されるという問題があります。

UpdatePanel 内の TextBox に focus

上の画像は以下のコードで描いたものです。UpdatePanel の外のボタンを操作した場合は TextBox にフォーカスを当てられますが、UpdatePanel の中のボタンを操作した場合は無視されます。

ちなみに、Firefox 3.6.12, Chrome 7.0.517.44, Opera 10.63, Safari 5.0.3 は、UpdatePanel の中/外どちらのボタンを操作しても期待通り TextBox にフォーカスが当たります。

解決策は、IE8 の場合のみですが、$('#TextBox1').focus().focus(); のように focus を 2 回かけることによって、UpdatePanel の中のボタンを操作した場合でもフォーカスが当たるようになります。ただし、IETester で試した限り、IE6, IE7 ではうまくいきません。IE6, IE7 の場合の解決策を検討中です。

<%@ 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 FocusTextBox1_Click(object sender, EventArgs e)
  {
    ScriptManager.RegisterHiddenField(Page, "Focus", "TextBox1");
  }

  protected void FocusTextBox2_Click(object sender, EventArgs e)
  {
    ScriptManager.RegisterHiddenField(Page, "Focus", "TextBox2");
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Focus TextBox in ControlPanel</title>
  <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
    $(function () {
      var manager = Sys.WebForms.PageRequestManager.getInstance();
      manager.add_pageLoaded(OnPageLoaded);
    });

    function OnPageLoaded(sender, args) {
      var target = $('#Focus').val();
      if (target == 'TextBox1') {
        $('#TextBox1').focus();
      }
      else if (target == 'TextBox2') {
        $('#TextBox2').focus();
      }
    }
  //-->
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <h3>Focus TextBox in ControlPanel</h3>    
  <asp:Button ID="Button1" 
    runat="server" 
    Text="Focus TextBox1" 
    OnClick="FocusTextBox1_Click" />
  <asp:Button ID="Button2" 
    runat="server" 
    Text="Focus TextBox2" 
    OnClick="FocusTextBox2_Click" />
  <div style="border: solid 1px Silver; padding: 2px 5px;">
    UpdatePanel<hr />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        TextBox1: 
        <asp:TextBox ID="TextBox1" runat="server" />
        <asp:Button ID="Button3" 
          runat="server" 
          Text="Focus TextBox1" 
          OnClick="FocusTextBox1_Click" />
        <br />
        TextBox2: 
        <asp:TextBox ID="TextBox2" runat="server" />
        <asp:Button ID="Button4" 
          runat="server" 
          Text="Focus TextBox2" 
          OnClick="FocusTextBox2_Click" />
      </ContentTemplate>
    </asp:UpdatePanel>
  </div>
  </form>
</body>
</html>

------------ 2010/4/24 追記 ------------

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

Tags: , ,

AJAX

About this blog

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

Calendar

<<  2017年8月  >>
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar