asp.net gridView - 响应式网络表单答案

【问题标题】：asp.net gridView - responsive webformasp.net gridView - 响应式网络表单
【发布时间】：2021-07-03 04:30:53
【问题描述】：

我创建了一个有点响应的 GridView。在我将浏览器缩放到某个点后，它不会像在移动设备上那样堆叠。我需要向我的 gridViews 添加什么才能让它们在移动设备上很好地显示？

        <section id="no-more-gridView">
        <asp:GridView ID="GridView1" CssClass="table table-bordered table-hover table-responsive-xl w-100 align-self-auto" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Height="296px" Width="886px" AllowSorting="True" BorderStyle="Groove" HorizontalAlign="Center" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
            <AlternatingRowStyle BackColor="#CCFFFF" />
            <Columns>
                <asp:BoundField DataField="Row#" HeaderText="Row#" SortExpression="Row#" />
                <asp:BoundField DataField="Number" HeaderText="Number" SortExpression="Number" />
                <asp:BoundField DataField="Person" HeaderText="Person" SortExpression="Person" />
                <asp:BoundField DataField="Reason" HeaderText="Reason" SortExpression="Reason" />
                <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
                <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
            </Columns>
            <HeaderStyle HorizontalAlign="Center" CssClass="table table-primary"/>
        </asp:GridView>
        </section>

【问题讨论】：

如果您想要一个响应式网站，那么您可能不应该使用asp 控件。如果可以选择，则根本不应该使用网络表单。
如果您使用Repeater 控件来动态构建您的HTML 标记而不是依赖于GridView，您将对呈现的HTML 进行更多控制，并且可以轻松集成任何响应式CSS 框架。当然，就像 Crowcoder 所说的那样，那时您可能还没有使用 Web 表单。哦 - 我看到您正在使用 SQL 数据源。你真的不应该使用这些。数据库连接不属于您的 Web 窗体。这不利于遵循关注点分离，并且会导致架构难以测试。
完全不相信转储 asp.net 网络表单和 asp.net 可以控制您通过某种魔术获得响应速度更快的页面，而无需付出更多努力。 asp.net + web 表单页面的默认设置是 YEARS 默认包含响应式引导框架。我的意思是，这个问题可能会变成如何让表格更好地折叠以适应较小的屏幕 - 无论如何，gridview/listview/repeater 最终会在和标准 HTML 表格中呈现内容。所以，装腔作势的人本可以很好地询问如何使桌子更好地折叠，并且答案将适用于这里。

标签： c# asp.net gridview webforms responsive

【解决方案1】：

如前所述，默认情况下，引导程序应该可以工作。

要让 gridview 真正缩小并重新调整大小真的很好吗？

我建议这样做：

class="table table-hover table-fixed">

fixed 确实做得很好 - 它试图尝试修复列大小。

因此在 1920 BIG 显示器上，我得到了这个：

但是，将尺寸调整为非常小 - 易于安装在手机上？你得到这个：

现在我们从 1920 像素降到了 517 像素。

我不认为你可以比上面说的更好。如果您还需要更小，那么我认为引导程序或任何响应式框架都不会对您有太大帮助。

所以，我在上面做了这个：

 <asp:GridView ID="GridView1" runat="server"
            AutoGenerateColumns="False" class="table table-hover table-fixed">

我确实发现 table-fixed 似乎在这里做得最好，但您可以尝试其他一些设置：

这样说：

class="table table-responsive"

所以两个都试试。最后一个是最常用的——它在调整大小方面也做得非常好。

【讨论】：