asp.net gridview - 使用 updatepanel 在每行的多行中传播绑定数据

Question

我在 gridview 中有一个面板，我需要它的行宽为 'spread'：

别管面板里有什么。我在这里展示的只是为了演示我的需求...我的 HTML:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False"
    CellPadding="3"
    CssClass="myGrid"
    DataKeyNames="Role_Name">
    <AlternatingRowStyle BackColor="#E6E6E6" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_details" BorderStyle="None" BackColor="Transparent" ImageUrl="~/Content/Images/Arrow_Down.png"
                CommandArgument="Show" />
                <asp:Panel ID="pnlRole" runat="server" Style="position: relative;" Visible="false">
                    <asp:Label ID="lblAAA" runat="server" Text="aaa" /><br />
                    <asp:Label ID="lblBBB" runat="server" Text="bbb" /><br />
                    <asp:Label ID="lblCCC" runat="server" Text="ccc" /><br />
                    <asp:Label ID="lblDDD" runat="server" Text="ddd" /><br />
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Role_Name" HeaderText="Name">
            <HeaderStyle Width="100px" />
            <ItemStyle CssClass="myGridItemMaxWidth" HorizontalAlign="Left" Wrap="false" />
        </asp:BoundField>
        <asp:BoundField DataField="Role_Description" HeaderText="Description">
            <HeaderStyle Width="150px" />
            <ItemStyle CssClass="myGridItemMaxWidth" HorizontalAlign="Left" Wrap="false" />
        </asp:BoundField>
    </Columns>
    <HeaderStyle CssClass="myGridHeader" />
    <RowStyle ForeColor="#000066" />
</asp:GridView>

我将不胜感激 help/idea/solution。

编辑：
为了更好地解释我的问题，这是另一张图片：

（不要管面板里有什么，我这里展示的只是演示我的需求...）

Answer 1

很难在 GridView 中正确地做到这一点而又不会变得笨拙。

你最好使用 ListView 并使用那里的功能。

<asp:ListView ID="ListView1" runat="server"
    DataKeyNames="Role_Name"
    OnItemCommand="ListView1_ItemCommand">
    <LayoutTemplate>
        <table class="myGrid">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </theah>
        <tbody>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
        </tbody>
        </table>
    </LayoutTemplate>

    <ItemTemplate>
        <tr>
            <td>
                <asp:ImageButton ID="imgShow" runat="server" BorderStyle="None" BackColor="Transparent" ImageUrl="~/Content/Images/Arrow_Down.png" CommandName="Toggle" />
            </td>
            <td><%# Eval("Role_Name") %></td>
            <td><%# Eval("Role_Description") %></td>
        </tr>
        <tr>
            <td colspan="3">
                <asp:Panel ID="pnlRole" runat="server" Style="position: relative;" Visible="false">
                    <asp:Label ID="lblAAA" runat="server" Text="aaa" /><br />
                    <asp:Label ID="lblBBB" runat="server" Text="bbb" /><br />
                    <asp:Label ID="lblCCC" runat="server" Text="ccc" /><br />
                    <asp:Label ID="lblDDD" runat="server" Text="ddd" /><br />
                </asp:Panel>
            </td>
        </tr>
    </ItemTemplate>

    <EmptyDataTemplate>
        <p>No data found.</p>
    </EmptyDataTemplate>
</asp:ListView>

不幸的是，每行都会有一个额外的 <tr>...</tr>。要解决这个问题，您可以使用 runat="server" 作为 <tr> 代替 Panel。

<tr id="pnlRole" runat="server" Visible="false">
    <td colspan="3">
        <asp:Label ID="lblAAA" runat="server" Text="aaa" /><br />
        <asp:Label ID="lblBBB" runat="server" Text="bbb" /><br />
        <asp:Label ID="lblCCC" runat="server" Text="ccc" /><br />
        <asp:Label ID="lblDDD" runat="server" Text="ddd" /><br />
    </td>
</tr>

现在在代码隐藏中你可以引用这个

protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (e.CommandName == "Toggle")
    {
        HtmlTableRow pnlRole = e.Item.FindControl("pnlRole") as HtmlTableRow;
        pnlRole.Visible = !pnlRole.Visible;

        ImageButton imgShow = e.Item.FindControl("imgShow") as ImageButton;
        if (pnlRole.Visible == true)
            imgShow.ImageUrl="~/Content/Images/Arrow_Down.png";
        else
            imgShow.ImageUrl="~/Content/Images/Arrow_Up.png";
    }
}

Answer 2

这是我想出的-
左边是所有行都是'closed'时的GridView。右边，'opening' 2行后：

标记：

<form id="form1" runat="server" style="">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <table runat="server" style="font-weight: bold; margin: 0 auto; font-family: Arial;">
        <tr>
            <td style="text-align: center; width: 500px; overflow: hidden">
                <asp:GridView ID="grv_Four_Rows" runat="server"
                    AutoGenerateColumns="False" BackColor="black" GridLines="None"
                    CellPadding="3" CssClass="myGrid" DataKeyNames="Test1_First_Name">
                    <HeaderStyle CssClass="myGridHeader" />
                    <RowStyle BackColor="#b5c7de" />
                    <AlternatingRowStyle BackColor="#d1e0e0" />
                    <Columns>
                        <asp:TemplateField>
                            <ItemStyle HorizontalAlign="Left" />
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td style="width: 150px;">First</td>
                                        <td style="width: 150px;">Last</td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <table>
                                    <td>
                                        <asp:UpdatePanel ID="upp_Main_Row" runat="server">
                                            <ContentTemplate>
                                                <asp:Panel runat="server">
                                                    <td>
                                                        <asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_details"
                                                            ImageUrl="~/Content/Images/Arrow_Down.png" CommandArgument="Show" />&nbsp;
                                                    </td>
                                                    <td style="width: 150px"><%# Eval("Test1_First_Name")%></td>
                                                    <td style="width: 150px"><%# Eval("Test1_Last_Name")%></td>
                                                </asp:Panel>
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </td>
                                </table>

                                <table style="border-style: solid; border-width: thin; width: 100%">
                                    <asp:UpdatePanel ID="upp_2nd_row" runat="server" Visible="false">
                                        <ContentTemplate>
                                            <tr>
                                                <td>
                                                    <a style="color: red">Address: </a><%# Eval("Test1_Address")%>
                                                </td>
                                            </tr>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                    <asp:UpdatePanel ID="upp_3rd_row" runat="server" Visible="false">
                                        <ContentTemplate>
                                            <tr>
                                                <td>
                                                    <a style="color: red;">Description: </a><%#Eval("Test1_Description")%>
                                                </td>
                                            </tr>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                    <asp:UpdatePanel ID="upp_4th_row" runat="server" Visible="false">
                                        <ContentTemplate>
                                            <tr style="float: left">
                                                <td>
                                                    <a style="color: red">Note1: </a><%#Eval("Test1_Note_1")%>&nbsp;&nbsp;
                                                    <a style="color: red">Note2: </a><%#Eval("Test1_Note_2")%>
                                                </td>
                                            </tr>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </table>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </td>
        </tr>
    </table>
</form>
<style type="text/css">
    .myGrid {
        border: 1px solid black;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        overflow: hidden;
        background-color: white;
        text-align: center;
        margin: 0 auto;
    }

    .myGridHeader > th {
        text-align: center;
        border: solid 1px;
        font-family: Arial;
        background-color: #DDFFD6;
        font-weight: bold;
        color: #000066;
    }
</style>

C# 代码隐藏：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            load_grv_Four_Rows();
        }
    }
    //================================================================================================
    protected void Show_Hide_details(object sender, EventArgs e)
    {
        ImageButton imgShowHide = sender as ImageButton;
        GridViewRow row = imgShowHide.NamingContainer as GridViewRow;
        if (imgShowHide.CommandArgument == "Show")
        {
            row.FindControl("upp_2nd_Row").Visible = true;
            row.FindControl("upp_3rd_Row").Visible = true;
            row.FindControl("upp_4th_Row").Visible = true;
            imgShowHide.CommandArgument = "Hide";
            imgShowHide.ImageUrl = "~/Content/Images/Arrow_Up.png";
        }
        else
        {
            row.FindControl("upp_2nd_Row").Visible = false;
            row.FindControl("upp_3rd_Row").Visible = false;
            row.FindControl("upp_4th_Row").Visible = false;
            imgShowHide.CommandArgument = "Show";
            imgShowHide.ImageUrl = "~/Content/Images/Arrow_Down.png";
        }
    }
    //================================================================================================
    private void load_grv_Four_Rows()
    {
        try
        {
            SqlConnection con;
            DataSet ds;
            con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["BETSEFER_DB"].ConnectionString);
            string CmdString = "SELECT * FROM tbl_Test1 ORDER BY Test1_First_Name";
            ds = new DataSet();
            using (SqlDataAdapter sda = new SqlDataAdapter(CmdString, con))
            {
                sda.Fill(ds);
                if (ds.Tables.Count > 0)
                {
                    DataView dv = ds.Tables[0].DefaultView;
                    grv_Four_Rows.DataSource = dv;
                    grv_Four_Rows.DataBind();
                }
            }
        }
        catch (SqlException ex)
        {
            Session["mySQL_Error_Msg"] = ex.Message;
            Server.ClearError();
            Response.Redirect("~/Errors.aspx");
        }
    }
    //================================================================================================

table:

我仍然有很多格式和外观问题，但对于那些我会打开一个新的 post。
希望对大家有帮助。

asp.net gridview - 使用 updatepanel 在每行的多行中传播绑定数据

asp.net gridview - spread bound data across multi lines per row with updatepanel

asp.net

gridview

updatepanel

panel

multiline