在移动设备上运行时更改网格视图列可见性

本文关键字：网格 视图 可见性 运行时 移动 | 更新日期: 2023-09-27 17:59:19

给出网格视图： 

  <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.

非常感谢

在移动设备上运行时更改网格视图列可见性

你可以做这样的事情：

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

如果你坚持使用Visible而不是css类，你必须使用cookie或隐藏字段从客户端发送宽度信息请参阅这篇文章： 如何在服务器端获取客户端屏幕分辨率宽度/高度

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;
  }
 }

如果使用引导程序.css您可以使用：

<asp:BoundField ItemStyle-CssClass="visible-md visible-lg" HeaderStyle-CssClass="visible-md visible-lg">
相关文章：