asp.net - How to design ListView GridView type layout

ListView GridView type layout
ListViewLayoutTypeGridView.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<script runat="server">
    
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>ListView GridView type layout - how to design GridView type layout</title>
    <style type="text/css">
        .TableCSS
        {
            border-style:none;
            background-color:Crimson;
            width: 700px;
            }
        .TableHeader
        {
            background-color:DarkSalmon;
            color:Snow;
            font-size:large;
            font-family:Verdana;
            height:45px;
            text-align:center;
            }    
        .TableData
        {
            background-color:Salmon;
            color:Snow;
            font-family:MS Sans Serif;
            font-size:medium;
            font-weight:bold;
            height:28px;
            }  
        .TablePager
        {
            background-color:IndianRed;
            height:45px;
            }                              
        .PagerButtonCSS
        {
            color:SandyBrown;
            height:35px;
            font-weight:bold;
            font-family:Comic Sans MS;
            }    
        .NumericButtonCSS
        {
            font-size:x-large;
            font-family:Courier New;
            color:Snow;
            font-family:Comic Sans MS;
            font-weight:bold;
            }  
        .CurrentPageLabelCSS
        {
            font-size:xx-large;
            font-family:Comic Sans MS;
            color:White;
            font-weight:bold;
            } 
        .NextPreviousButtonCSS
        {
            font-size:large;
            font-family:Courier New;
            color:BurlyWood;
            font-weight:bold;
            }                                         
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:OliveDrab; font-style:italic;">ListView Example: How To Create GridView Type Layout</h2>
        <hr width="575" align="left" color="LightBlue" />
        <asp:SqlDataSource 
            ID="SqlDataSource1"
            runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="Select ProductName, UnitPrice, QuantityPerUnit From products Order By ProductName"
            >
        </asp:SqlDataSource>
        <br />
        <asp:ListView 
            ID="ListView1"
            runat="server"
            DataSourceID="SqlDataSource1"
            >
            <LayoutTemplate>
                <table runat="server" class="TableCSS">
                    <tr runat="server" class="TableHeader">
                        <td runat="server">Product Name</td>
                        <td runat="server">Unit Price</td>
                        <td runat="server">Quantity Per Unit</td>
                    </tr>
                    <tr id="ItemPlaceholder" runat="server">
                    </tr>
                    <tr runat="server" class="TablePager">
                        <td runat="server" colspan="3">
                            <asp:DataPager ID="DataPager1" runat="server">
                                <Fields>
                                    <asp:NextPreviousPagerField 
                                        ButtonType="Button" 
                                        ShowFirstPageButton="true"
                                        ShowPreviousPageButton="false"
                                        ShowNextPageButton="true"
                                        ButtonCssClass="PagerButtonCSS"
                                        />
                                    <asp:NumericPagerField 
                                        NumericButtonCssClass="NumericButtonCSS"
                                        NextPreviousButtonCssClass="NextPreviousButtonCSS"
                                        CurrentPageLabelCssClass="CurrentPageLabelCSS"
                                        />
                                    <asp:NextPreviousPagerField 
                                        ButtonType="Button"
                                        ShowNextPageButton="false"
                                        ShowLastPageButton="true"
                                        ButtonCssClass="PagerButtonCSS"
                                        />
                                </Fields>
                            </asp:DataPager>
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr class="TableData">
                    <td>
                        <asp:Label 
                            ID="Label1"
                            runat="server"
                            Text='<%# Eval("ProductName")%>'
                            >
                        </asp:Label>
                    </td>
                    <td>
                        <asp:Label 
                            ID="Label2"
                            runat="server"
                            Text='<%# Eval("UnitPrice")%>'
                            >
                        </asp:Label>
                    </td>
                    <td>
                        <asp:Label 
                            ID="Label3"
                            runat="server"
                            Text='<%# Eval("QuantityPerUnit")%>'
                            >
                        </asp:Label>
                    </td>
                </tr>                
            </ItemTemplate>
        </asp:ListView>
    </div>
    </form>
</body>
</html>
More asp.net examples