Форматирование отображения Gridview на странице ASPX

Question

Сценарий: у меня есть страница ASPX с Gridview. Каждая строка имеет один заголовок столбца и его значение. В конце записи есть общая строка.

Моя проблема связана с форматированием и CSS.

Я хотел бы, чтобы вывод был таким, как показано ниже (я пытался отформатировать, но после публикации он теряет)

---

| Имя клиента | Microsoft |

| Клиент Город | Сиэтл |

| |

| Имя клиента | DowJones |

| Клиент Город | Нью-Йорк |

Над именем клиента центрируется эта ячейка. Точно так же это значение также (Microsoft). Также 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 вместо 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>