在ASPX页面中格式化Gridview显示

Question

场景：我有一个带Gridview的ASPX页面。每行都有一个列标题和它的值。在记录结束时有一个通用的行。

我的问题是格式化和CSS。

我希望输出如下（我已尝试格式化，但在发布时它正在消失）

---

|客户名称|微软|

|客户城市|西雅图|

| |

|客户名称|道琼斯|

|客户城市|纽约|

客户名称上方是该单元格的中心。同样，它的价值也是（微软）。 CustomerName的颜色为darkblack，“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中使用<tr>和<td>元素。由于网格已经为每一行<tr>...</tr>呈现<td> {Item template's content} </td>，因此结果将是无效的HTML代码。

我认为您应该使用Repeater代替网格，例如像这样的东西：

<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">&nbsp;</td></tr>
  <FooterTemplate></table></FooterTemplate>
</asp:Repeater>