none
ListViewが生成するTableタグの崩れについて RRS feed

  • 質問

  • はじめまして、こんにちわ。

    ListViewコントロールとButtonコントロールをUpdatePanel内に配置し、Buttonコントロールによる
    非同期ポストバックが発生した際、tdタグが1つずれてしまい、困っています。

    下記に再現するコードを記載します。
    原因や対策方法をご存知の方がいらっしゃいましたらお願い致します。

    ■開発環境と実行環境
    ・Windows7 Professional(32bit)ServicePack1
    ・Microsoft Visual Studio 2010
    ・Microsoft .NET Framework 4
    ・Internet Explorer9
      バージョン:9.0.8112.16421
      更新バージョン:9.0.10(KB2744842)

    ■aspx
    <asp:ScriptManager runat="server" ID="ScriptManager">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
        <ContentTemplate>
            <asp:Button runat="server" ID="UpdateButton" Text="更新" OnClick="UpdateButton_Click" />
            <asp:ListView runat="server" ID="ListView1" ViewStateMode="Disabled">
                <LayoutTemplate>
                    <table border="1">
                        <thead>
                            <tr>
                                <th>
                                    Header1
                                </th>
                                <th>
                                    Header2
                                </th>
                                <th>
                                    Header3
                                </th>
                                <th>
                                    Header4
                                </th>
                                <th>
                                    Header5
                                </th>
                                <th>
                                    Header6
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
                        </tbody>
                    </table>
                </LayoutTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:CheckBox runat="server" ID="CheckBox1" />
                        </td>
                        <td>
                            <asp:Literal runat="server" ID="Literal1" Text='<%# Eval("Column1") %>'></asp:Literal>
                        </td>
                        <td>
                            <asp:Literal runat="server" ID="Literal2" Text='<%# Eval("Column2") %>'></asp:Literal>
                        </td>
                        <td>
                            <asp:Literal runat="server" ID="Literal3" Text='<%# Eval("Column3") %>'></asp:Literal>
                        </td>
                        <td>
                            <asp:Literal runat="server" ID="Literal4" Text='<%# Eval("Column4") %>'></asp:Literal>
                        </td>
                        <td>
                            <asp:Literal runat="server" ID="Literal5" Text='<%# Eval("Column5") %>'></asp:Literal>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:ListView>
        </ContentTemplate>
    </asp:UpdatePanel>

    ■コードビハインド(C#)
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;

    namespace WebApplication1
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (this.IsPostBack) {
                    return;
                }
                this.ListView1.DataSource = GetData();
                this.ListView1.DataBind();
            }
            protected void UpdateButton_Click(object sender, EventArgs e)
            {
                this.ListView1.DataSource = GetData();
                this.ListView1.DataBind();
            }
            private DataTable GetData()
            {
                DataTable result = new DataTable();
                DateTime nowTime = DateTime.Now;
                result.Columns.Add("Column1", typeof(string));
                result.Columns.Add("Column2", typeof(string));
                result.Columns.Add("Column3", typeof(string));
                result.Columns.Add("Column4", typeof(string));
                result.Columns.Add("Column5", typeof(string));
                for (int i = 1; i <= 100; i++)
                {
                    DataRow dr = result.NewRow();
                    dr["Column1"] = "data1_" + i.ToString();
                    dr["Column2"] = "data2_" + i.ToString();
                    dr["Column3"] = "data3_" + i.ToString();
                    dr["Column4"] = "data4_" + i.ToString();
                    dr["Column5"] = "data5_" + i.ToString();
                    result.Rows.Add(dr);
                }
                return result;
            }
        }
    }

    2013年1月28日 5:17

回答

  • 以下、ご参考までに連携します。

    私もASP.NETの開発中に、同様の現象が発生したことがありました。(ASP.NET 4.0)

    レンダリングされるTableタグはとても大きくないですか?

    IE9の既知のバグとして、とても大きいTableタグを表示すると崩れてしまうというものがあるようです。

    ※ 例えば、以下のサイトにあげられている画像のような現象です。これと同じイメージの現象が起きているんですよね?

    HTML table not rendering correctly in IE9

     

    その際の対応としましては、metaタグでIEのレンダリングモードにIE9を利用しないよう指定することで回避しました。

    m.e001さんの環境では同様の回避方法は採用できないかもしれませんが、調査の糸口になればと連携させていただきました。

    • 回答としてマーク m.e001 2013年1月29日 1:10
    2013年1月28日 11:29

すべての返信

  • 以下、ご参考までに連携します。

    私もASP.NETの開発中に、同様の現象が発生したことがありました。(ASP.NET 4.0)

    レンダリングされるTableタグはとても大きくないですか?

    IE9の既知のバグとして、とても大きいTableタグを表示すると崩れてしまうというものがあるようです。

    ※ 例えば、以下のサイトにあげられている画像のような現象です。これと同じイメージの現象が起きているんですよね?

    HTML table not rendering correctly in IE9

     

    その際の対応としましては、metaタグでIEのレンダリングモードにIE9を利用しないよう指定することで回避しました。

    m.e001さんの環境では同様の回避方法は採用できないかもしれませんが、調査の糸口になればと連携させていただきました。

    • 回答としてマーク m.e001 2013年1月29日 1:10
    2013年1月28日 11:29
  • 以下のページと同じ問題のようですね。ひょっとして質問者さんも同じ方でしょうか?

    ListViewとUpdatePanelを組み合わせたときのレイアウト崩れ?
    http://ap.atmarkit.co.jp/bbs/core/fdotnet/31511?page=1#31652

    IE9 のバグのようで、ASP.NET で解決できる問題ではなさそうです。

    2013年1月28日 15:08
  • ご回答の方ありがとうございます。

    やはりIE9のバグなんですね・・。

    kyk_nk様がおっしゃる通り、Tableタグは大きいです。

    試しにタグの数を減らしたところ、レイアウトの崩れは発生しませんでした。

    metaタグでIE9のレンダリングモードを使用しないようにしたいと思います。

    ありがとうございました。

    2013年1月29日 1:10
  • ご回答の方ありがとうございます。

    記載されているURLと同じ問題になりますが、質問している方は別人です。

    >IE9 のバグのようで、ASP.NET で解決できる問題ではなさそうです。

    やはりASP.NETでの解決はできないのですね・・。

    metaタグでIE9のレンダリングモードを使用しないようにしたいと思います。

    ご回答ありがとうございました。

    2013年1月29日 1:35