Question

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

非常感谢

Answer 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

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

Answer 3

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

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

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

3 个答案: