在 ASPX 页面中格式化 Gridview 显示

Question

Scenario：我有一个带有 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 中使用 <tr> 和 <td> 元素。由于网格已经为每一行渲染了<tr>...</tr> 和<td> {Item template's content} </td>，因此结果将是无效的HTML 代码。

我认为您应该使用 Repeater 而不是 Grid，例如像这样：

<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>