格式化 Gridview 在 ASPX 页面中的显示

Question

场景：我有一个带有 Gridview 的 ASPX 页面。每一行都有一个列标题及其值。在记录的末尾有一个通用行。

我的问题是格式和 CSS。

我希望输出如下（我已尝试格式化，但发布后它丢失了）

---

|客户名称 |微软 |

|客户城市 |西雅图 |

| |

|客户名称 |道琼斯 |

|客户城市 |纽约 |

上方的客户名称以该单元格为中心。同样它也有价值（微软）。此外，CustomerName 的颜色为深黑色，“Microsoft”的颜色为黑色。

'-----' 和“|”实际上是表格边框/分隔符。这是典型的带有边框、水平线和垂直线的表格。

请建议。下面是我的代码。

        <div style="width:400px; font-family:Arial; font-size:small">
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        Width="100%" GridLines= "Horizontal">
        <Columns>
          <asp:TemplateField>
          <ItemTemplate> 


            <div style="color:Blue;font-weight:bold">
            <br />
            <tr>
              <td><asp:Label ID="Label5" runat="server" Text='Customer NAME' cssclass ="blackboldhdr" ></asp:Label></td>
              <td><asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"DealerName") %>' cssclass ="blackboldtxt"></asp:Label></td>
            </tr>
            <tr>
              <td><asp:Label ID="Label2" runat="server" Text='Customer City'></asp:Label></td>
              <td><asp:Label ID="Label3" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"City") %>'></asp:Label></td>
            </tr>

            </ItemTemplate>
            </asp:TemplateField>
          </Columns>
        </asp:GridView>
    </div>    

            <style> 
    .blackboldtxt {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color:black;
        font-weight: bold;

    }
    .blackboldhdr
    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        /*color:#FFFFFF;*/
        background-color: #2A3C54;
        width: 152px; 
        text-align:center;
    }
</style> 

Answer 1

我认为您不能在网格的 itemTemplate 中使用 和 元素。由于网格已经为每行渲染 ... 且 {项目模板的内容}，结果将是无效的 HTML 代码。

我认为你应该使用 中继器而不是网格，例如这样的：

<asp:Repeater>
  <HeaderTemplate><table class="..."></HeaderTemplate>
  <ItemTemplate>
    <tr>
      <td class="blackboldhdr">
        <asp:Label runat="server" Text='Customer NAME' cssclass="blackboldhdr"/>
      </td>
      <td>
        <asp:Label runat="server"  cssclass ="blackboldtxt"
           Text='<%#DataBinder.Eval(Container.DataItem,"DealerName") %>' />
      </td>
    </tr>
    <tr>
        ... same as above, but for customer address
    </tr>
  </ItemTemplate>
  <SeparatorTemplate><tr><td colspan="2"> </td></tr>
  <FooterTemplate></table></FooterTemplate>
</asp:Repeater>