Пользовательский gridview с asp.net и boostrap

Question

Я делаю междисциплинарную работу в колледже, которая представляет собой простую систему POST, использующую gridview и bootstrap / asp.net, до сих пор она работала нормально, но я в части ПОКАЗЫВАЮ сообщение на домашней странице и gridview не очень красивое, оно не похоже на пост, оно выглядит так:

Просто GridView:

И я хотел что-то подобное: Как я и хотел:

У вас есть какой-нибудь способ сделать это?

Если нет, то должен ли я видеть весь пост, щелкнув заголовок, а не гигантскую красную кнопку? Не может ли быть темно, когда я двигаю мышью? особенно в нумерации страниц, как это: УЖАСНО

Код 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/> - это в основном простая таблица int html. Если вы хотите, чтобы ваши сообщения выглядели так, как показано на рисунке, вам понадобится таблица из 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>