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

Question

提供网格视图：

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

非常感谢

Answer 1

如果您坚持使用 Visible 而不是 css class，您必须从客户端发送宽度信息，使用 cookie 或隐藏字段看到这个 post：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;
  }
 }

Answer 2

你可以这样做：

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

Answer 3

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

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

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

Change Gridview columns visibility when running on mobile ?

css

c#

asp.net

mobile

gridview

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

Change Gridview columns visibility when running on mobile ?

css

c#

asp.net

mobile

gridview

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