asp.net - 在 ASPX 页面中格式化 Gridview 显示

Question

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

我的问题是格式和 CSS。

我希望输出如下所示(我尝试格式化但在发布时它丢失了)

---

|客户名称 |微软|

|客户城市 |西雅图 |

| |

|客户名称 |道琼斯 |

|客户城市 |纽约 |

客户名称上方以该单元格为中心。同样，它也很有值(value)(微软)。此外，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

我认为你不能使用 <tr>和 <td>网格的 itemTemplate 中的元素。由于网格已经呈现 <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>