Question

我目前正致力于在asp.net网站上展示游戏库。我已将游戏信息（如姓名，封面图片等）存储在数据库中，我想从数据库中检索游戏并将其显示在我的网站上。现在，我正在使用GridView来获取数据。它从我的表中获取值uname（视频游戏的名称）和uimg（游戏的封面图像），并显示如下：

enter image description here

但是，我想编辑布局，使其看起来像这样：

enter image description here

正如您所看到的，uname显示在uimg正下方，每行有3个游戏。

到目前为止，代码（仅使用Visual Studio中的标准GridView）看起来像这样。 Default.aspx的：

 <asp:GridView ID="GridView1" runat="server" CellPadding="1" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false">
        <AlternatingRowStyle BackColor="White" />
        <EditRowStyle BackColor="#7C6F57" />
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#E3EAEB" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F8FAFA" />
        <SortedAscendingHeaderStyle BackColor="#246B61" />
        <SortedDescendingCellStyle BackColor="#D4DFE1" />
        <SortedDescendingHeaderStyle BackColor="#15524A" />
        <Columns>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:HyperLink ID="lbl1" runat="server" NavigateUrl='<%#Eval("unavurl") %>' Text='<%#Eval("uname") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Image">
                <ItemTemplate>
                    <asp:HyperLink ID="img" runat="server" ImageUrl='<%#Eval("uimg") %>'  NavigateUrl='<%#Eval("unavurl") %>' ImageHeight="159" ImageWidth="128" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

另外，只需添加它，这里是C＃代码：

 SqlDataAdapter da = new SqlDataAdapter("select uname,uimg,unavurl from games", con);
    DataTable dt = new DataTable();
    da.Fill(dt);
    GridView1.DataSource = dt;
    DataBind();

那么，有谁知道我怎么能做到这一点？这可以用Gridview完成，还是我应该看一些不同的东西？谢谢！

Answer 1

您应该使用DataList属性集的RepeatColumns控件。这可以实现您想要的设计。

这是一个例子

http://adidotnettotal.blogspot.com.au/2013/02/datalist-example-using.html

Answer 2

此custom HTML jQuery Gridview自定义控件专为易于使用而创建，可降低代码复杂性和长度。您只需要为此控件分配datatable，它将根据给定的数据表自动生成HTML gridview。

Answer 3

您应该像这样使用asp：TemplateField：

<asp:GridView runat="server" ID="gvResults" AutoGenerateColumns="False" DataKeyNames="ID" ForeColor="Black" GridLines="None">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
        <asp:TemplateField> 
        <ItemTemplate>
                    <table style="width: 100%;font-size:12px">
                <tr >
                    <td >
                        <div style=" background-color:#F3CE5A; margin:10px; padding:3px; border:1px solid #C49527; border-radius:5px; font-size:13px; font-weight:bold">
                        <asp:Label ID="Label43" runat="server" Text='<%# Bind("TransactionType") %>'></asp:Label> - <asp:Label ID="Label44" runat="server" Text='<%# Bind("BuildingType") %>'></asp:Label> - <asp:Label ID="Label48" runat="server" Text='<%# Bind("Province") %>'></asp:Label> - <asp:Label ID="Label45" runat="server" Text='<%# Bind("City") %>'></asp:Label> - <asp:Label ID="Label46" runat="server" Text='<%# Bind("Region") %>'></asp:Label> - <asp:Label ID="Label47" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                        </div>
                    </td>
                </tr>
            </table>
                    <table style="width: 100%; font-size:12px">
                <tr>
                    <td style=" padding-right:5px">
                        <asp:Label ID="Label2" runat="server" Text="متراژ بنا :" Font-Bold="true"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Bind("Range") %>'></asp:Label><br />
                        <asp:Label ID="Label7" runat="server" Text="مساحت زمین :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label8" runat="server" Text='<%# Bind("Area") %>'></asp:Label><br />
                        <asp:Label ID="Label9" runat="server" Text="تعداد اتاق :" Font-Bold="true"></asp:Label><asp:Label ID="Label10"
                            runat="server" Text='<%# Bind("RoomNo") %>'></asp:Label><br />
                        <asp:Label ID="Label11" runat="server" Text="شماره طبقه :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label12" runat="server" Text='<%# Bind("ClassNo") %>'></asp:Label><br />
                        <asp:Label ID="Label14" runat="server" Text="تعداد کل طبقات :" Font-Bold="true"></asp:Label><asp:Label ID="Label15"
                            runat="server" Text='<%# Bind("ClassTot") %>'></asp:Label><br />
                        <asp:Label ID="Label13" runat="server" Text="تعداد واحد در طبقه :" Font-Bold="true"></asp:Label><asp:Label ID="Label28"
                            runat="server" Text='<%# Bind("UnitsInClass") %>'></asp:Label><br />
                        <asp:Label ID="Label31" runat="server" Text="تعداد کل واحد ها :" Font-Bold="true"></asp:Label><asp:Label ID="Label32"
                            runat="server" Text='<%# Bind("UnitsTot") %>'></asp:Label><br />
                        <asp:Label ID="Label33" runat="server" Text="نمای ساختمان :" Font-Bold="true"></asp:Label><asp:Label ID="Label34"
                            runat="server" Text='<%# Bind("BuildingView") %>'></asp:Label><br />
                        <asp:Label ID="Label35" runat="server" Text="وضعیت سکونت :" Font-Bold="true"></asp:Label><asp:Label ID="Label36"
                            runat="server" Text='<%# Bind("ResidentType") %>'></asp:Label><br />
                        <asp:Label ID="Label37" runat="server" Text="سن بنا :" Font-Bold="true"></asp:Label><asp:Label ID="Label38"
                            runat="server" Text='<%# Bind("YoursOld") %>'></asp:Label><br />
                        <asp:Label ID="Label39" runat="server" Text="چند ساله :" Font-Bold="true"></asp:Label><asp:Label ID="Label40"
                            runat="server" Text='<%# Bind("Old") %>'></asp:Label><br />
                        <asp:Label ID="Label41" runat="server" Text="موقعیت جغرافیائی :" Font-Bold="true"></asp:Label><asp:Label ID="Label42"
                            runat="server" Text='<%# Bind("GeoPosition") %>'></asp:Label><br />
                    </td>
                    <td>
                        <asp:Label ID="Label3" runat="server" Text="کابینت آشپزخانه :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label4" runat="server" Text='<%# Bind("Cabinet") %>'></asp:Label><br />
                        <asp:Label ID="Label5" runat="server" Text="سرویس بهداشتی :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label6" runat="server" Text='<%# Bind("Sanitary") %>'></asp:Label><br />
                        <asp:Label ID="Label29" runat="server" Text="کف پوش :" Font-Bold="true"></asp:Label><asp:Label ID="Label30"
                            runat="server" Text='<%# Bind("Floor") %>'></asp:Label><br />
                        <asp:Label ID="Label49" runat="server" Text="قیمت :" Font-Bold="true"></asp:Label><asp:Label ID="Label50"
                            runat="server" Text='<%# Bind("TotPrice") %>'></asp:Label><br />
                        <asp:Label ID="Label51" runat="server" Text="قیمت متری :" Font-Bold="true"></asp:Label><asp:Label ID="Label52"
                            runat="server" Text='<%# Bind("Price") %>'></asp:Label><br />
                        <asp:Label ID="Label55" runat="server" Text="واحد پول :" Font-Bold="true"></asp:Label><asp:Label ID="Label56"
                            runat="server" Text='<%# Bind("Currency") %>'></asp:Label><br />
                        <asp:Label ID="Label59" runat="server" Text="تعداد پارکینگ :" Font-Bold="true"></asp:Label><asp:Label ID="Label60"
                            runat="server" Text='<%# Bind("Parking") %>'></asp:Label><br />
                        <asp:Label ID="Label61" runat="server" Text="تعداد تلفن :" Font-Bold="true"></asp:Label><asp:Label ID="Label62"
                            runat="server" Text='<%# Bind("TelsNo") %>'></asp:Label><br />
                        <asp:Label ID="Label57" runat="server" Text="دیگر امکانات :" Font-Bold="true"></asp:Label><asp:Label ID="Label58"
                            runat="server" Text='<%# Bind("Other") %>'></asp:Label><br />
                    </td>
                    <td>
                        <asp:Label ID="Label53" runat="server" Text="نوع سند / کاربری :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label54" runat="server" Text='<%# Bind("DocType") %>'></asp:Label><br />
                        <asp:Label ID="Label18" runat="server" Text="نام مالک :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label19" runat="server" Text='<%# Bind("OwnerName") %>'></asp:Label><br />
                        <asp:Label ID="Label20" runat="server" Text="پست الکترونیکی :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label21" runat="server" Text='<%# Bind("EMail") %>'></asp:Label><br />
                        <asp:Label ID="Label22" runat="server" Text="تلفن ثابت :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label23" runat="server" Text='<%# Bind("Tel1") %>'></asp:Label><br />
                        <asp:Label ID="Label24" runat="server" Text="تلفن همراه :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label25" runat="server" Text='<%# Bind("Mobile") %>'></asp:Label><br />
                        <asp:Label ID="Label26" runat="server" Text="زمان ثبت :" Font-Bold="true"></asp:Label><asp:Label ID="Label27"
                            runat="server" Text='<%# Bind("DateTime") %>'></asp:Label>
                    </td>
                </tr>
                </table>
            <table style="width: 100%;">
                <tr>
                    <td>
                    </td>
                </tr>
            </table>
                <table style="width: 100%;font-size:12px">
                <tr>
                    <td>
                    </td>
                    </div>
                </tr>
            </table>

        </ItemTemplate>
        </asp:TemplateField>
        </Columns>

在asp.net中自定义GridView布局

3 个答案: