在移动设备上运行时更改 Gridview 列的可见性？答案

【问题标题】：Change Gridview columns visibility when running on mobile ?在移动设备上运行时更改 Gridview 列的可见性？
【发布时间】：2021-01-28 18:16:46
【问题描述】：

提供 Gridview：

  <asp:GridView ID="Grid" runat="server" DataSourceID="ODS">   
   <Columns>
    <asp:BoundField HeaderText="Product" 
      DataField="ProductName" SortExpression="ProductName">
    </asp:BoundField>
    <asp:BoundField HeaderText="Unit Price" 
      DataField="UnitPrice" SortExpression="UnitPrice"
        DataFormatString="{0:c}">
        <ItemStyle HorizontalAlign="Right"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField HeaderText="Units In Stock" 
      DataField="UnitsInStock" 
      SortExpression="UnitsInStock"
        DataFormatString="{0:d}">
        <ItemStyle HorizontalAlign="Right"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField HeaderText="Quantity Per Unit" 
      DataField="QuantityPerUnit"></asp:BoundField>
  </Columns>            
  </asp:GridView>

  <asp:ObjectDataSource ID="ODS"
        runat="server"
        SelectMethod="GetItems">     
    </asp:ObjectDataSource>

如何隐藏列，即在设备上将它们设置为 Visible=false 那运行是移动的吗？

我通常使用

 @media screen and (max-width:480px) {
...
}

但它只适用于 CSS 类。

我要做的是使用

在Visible="false" 上设置第一列

Grid.Columns[0].Visible = "false" ;

从后面的代码来看，当设备的分辨率低于max-width:480px 时。

是否可以为此目的使用@media screen and？

我尝试使用 <%= %> 但它不适用于 max-width:480px 。

非常感谢

【问题讨论】：

标签： c# css asp.net gridview mobile

【解决方案1】：

你可以这样做：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        if (Request.Browser.IsMobileDevice)
        {
            Grid.Columns[0].Visible = "false";
            ....
        }
    }
}

我什至在 Chrome 上测试了使用开发者工具使用Toggle device mode 模拟移动设备

您也可以使用这两个属性来获取大小：

Request.Browser.ScreenPixelsWidth

和

Request.Browser.ScreenPixelsHeight

【讨论】：

【解决方案2】：

如果你坚持使用 Visible 而不是 css 类，你必须从客户端发送宽度信息，使用 cookie 或隐藏字段看到这个帖子：How to get client Screen Resolution Width/Height at Server Side

CssClass 有什么问题？您希望 asp.net 根本不呈现该列吗？

<asp:BoundField HeaderText="Product"  CssClass="HideInMobile"
  DataField="ProductName" SortExpression="ProductName">
</asp:BoundField>

在css中：

 @media screen and (max-width:480px) {

   .HideInMobile{
    display:none;
  }
 }

【讨论】：

【解决方案3】：

如果使用 bootstrap.css，您可以使用：

<asp:BoundField ItemStyle-CssClass="visible-md visible-lg" HeaderStyle-CssClass="visible-md visible-lg">

【讨论】：