使用 asp.net 和 bootstrap 的自定义 gridview

Question

我在大学里做一个跨学科的工作，这将是一个简单的 POST 系统，使用 gridview 和 bootstrap/asp.net，到目前为止效果很好，但我参与其中在主页上显示 post，gridview 不是很漂亮，它看起来不像 post，它看起来像这样：

简单的 GridView:

我想要这样的东西：我想要的方式：

你有什么办法吗？

如果不是，我是否必须看到整个 post 单击标题而不是巨大的红色按钮？鼠标一动就不会黑吗？特别是在分页中，像这样：HORRIBLE

aspx 代码：

<div class="container-fluid bg-page" id="conteudo">
      <div class="row">
       <div class="col-lg-12">
                    <asp:GridView ID="gdv_posts" runat="server" CssClass="table table-hover table-striped" GridLines="None" AutoGenerateColumns="false" OnRowCommand="gdv_posts_RowCommand" AllowPaging="True" OnPageIndexChanging="gdv_posts_PageIndexChanging">
                        <Columns>
                            <asp:BoundField DataField="titulo" HeaderText="Titulo" />
                            <asp:BoundField DataField="descrição" HeaderText="Descrição" />
                            <asp:BoundField DataField="data" HeaderText="Data de Criação" />
                            <asp:BoundField DataField="autor" HeaderText="Autor" />
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:Button ID="btn_visualizar" runat="server" Text="Visualizar" class="btn btn-danger" CommandName="Visualizar" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "id")%>' />  
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
       </div>  
      </div> 
     </div>

代码 cs：

        protected void Page_Load(object sender, EventArgs e)
        {
            gdv_posts.UseAccessibleHeader = true;

            if (!Page.IsPostBack)
            {
                preencherGrid();
            }
        }
        
        
        protected void gdv_posts_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            gdv_posts.PageIndex = e.NewPageIndex;
            preencherGrid();
        }

Answer 1

<asp:GridView/> 基本上是一个普通的 table int html。如果您希望您的帖子看起来像提供的图像中那样，您需要 table 1 列和 X 行。为此，您应该使用一个 <asp:TemplateField/> 和一个 <ItemTemplate/> 。然后根据自己的喜好设计里面的内容。

示例：

                <asp:GridView ID="gdv_posts" runat="server" CssClass="table table-hover table-striped" GridLines="None" AutoGenerateColumns="false" OnRowCommand="gdv_posts_RowCommand" AllowPaging="True" OnPageIndexChanging="gdv_posts_PageIndexChanging">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "titulo")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "descrição")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "data")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "autor")%>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

使用 asp.net 和 bootstrap 的自定义 gridview

Custom gridview with asp.net and boostrap

c#

asp.net

post

gridview

twitter-bootstrap