如何使用asp.net創建響應表？

我想創建一個響應表。在我的代碼中，我無法調用CSS，請幫助我。我附上了下面的截圖。如何使用asp.net創建響應表？

我有一個網格視圖控件，我需要使其響應。我用tg-education-detail tg-haslayout jQuery和CSS下面的代碼

<div class="tg-education-detail tg-haslayout"> 
         <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" class="table-striped educations_wrap table" > 
       <Columns> 
        <asp:TemplateField HeaderText="Department" ItemStyle-CssClass="DepartmentID" > 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("DepartmentID") %>' runat="server" /> 
          <asp:TextBox Text='<%# Eval("DepartmentID") %>' runat="server" Style="display: none" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Designation" ItemStyle-CssClass="DesignationID"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("DesignationID") %>' runat="server" /> 
          <asp:TextBox Text='<%# Eval("DesignationID") %>' runat="server" Style="display: none" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="ContactPersonName" ItemStyle-CssClass="ContactPersonName"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("ContactPersonName") %>' runat="server" /> 
          <asp:TextBox Text='<%# Eval("ContactPersonName") %>' runat="server" Style="display: none" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="ContactPersonAddress" ItemStyle-CssClass="ContactPersonAddress"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("ContactPersonAddress") %>' runat="server" /> 
          <asp:TextBox Text='<%# Eval("ContactPersonAddress") %>' runat="server" Style="display: none" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Mobile" ItemStyle-CssClass="Mobile"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("Mobile") %>' runat="server" /> 
          <asp:TextBox Text='<%# Eval("Mobile") %>' runat="server" Style="display: none" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Phone" ItemStyle-CssClass="Phone"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("Phone") %>' runat="server" /> 
          <asp:TextBox Text='<%# Eval("Phone") %>' runat="server" Style="display: none" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="AadhaarCardNo" ItemStyle-CssClass="AadhaarCardNo"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("AadhaarCardNo") %>' runat="server" /> 
          <asp:TextBox Text='<%# Eval("AadhaarCardNo") %>' runat="server" Style="display: none" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField> 
         <ItemTemplate> 
          <asp:LinkButton Text="Edit" runat="server" CssClass="Edit" /> 
          <asp:LinkButton Text="Update" runat="server" CssClass="Update" Style="display: none" /> 
          <asp:LinkButton Text="Cancel" runat="server" CssClass="Cancel" Style="display: none" /> 
          <asp:LinkButton Text="Delete" runat="server" CssClass="Delete" /> 
         </ItemTemplate> 
        </asp:TemplateField> 
       </Columns> 
      </asp:GridView>

來源

2017-08-12 Vanuston Intelligence

-2

您可以使用引導類table-responsive讓所有類型的表&電網響應

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
</head> 
 
<body> 
 

 
<div class="container"> 
 
                       
 
    <div class="table-responsive">   
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Age</th> 
 
     <th>City</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>Anna</td> 
 
     <td>Pitt</td> 
 
     <td>35</td> 
 
     <td>New York</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-08-12 10:54:23

沒有我需要的GridView代碼級的CSS代碼 –

您也可以使用'表responsive'使gridview的responsvie這樣'

' –

檢查此鏈接 http://www.c-sharpcorner.com/UploadFile/47548d/response-grid-view-in-Asp-Net/ 它的工作 –

這鏈接可以幫助你：

響應GridView控件在ASP.Net

GridView控件提供了響應式設計，易於使用和響應速度發展引導框架。

因此，我們繼續下面的過程。

Package Manager Console

PM>安裝-封裝Twitter.Bootstrap.Bootswatch.Cosmo

Grid view Control and Data Binding

HeaderStyle-的CssClass = 「」ItemStyle-的CssClass =「」

Bootstrap Responsive Classes

表表條紋表-bordered table-hover

使用「File」 - >「New」 - >「Project ...」創建一個新項目，然後選擇Web選擇「ASP.Net Web窗體應用程序」。將它命名爲「GridviewResponsive」。

對於新的ASP.NET項目選擇空的模板，然後選擇Web窗體複選框，然後單擊確定。

在設計源代碼寫在下面。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridviewResponsive.Default" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Responsive GridView in ASP.NET</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link href="Content/bootstrap.cosmo.min.css" rel="stylesheet" /> 
    <link href="Content/StyleSheet.css" rel="stylesheet" /> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <br /> 
     <div id="mainContainer" class="container"> 
      <div class="shadowBox"> 
       <div class="page-container"> 
        <div class="container"> 
         <div class="jumbotron"> 
          <p class="text-danger">Responsive GridView in ASP.NET </p> 
          <span class="text-info">Desktop Tablet Phone Different layout </span> 
         </div> 
         <div class="row"> 
          <div class="col-lg-12 "> 
           <div class="table-responsive"> 
            <asp:GridView ID="grdCustomer" runat="server" Width="100%" CssClass="table table-striped table-bordered table-hover" AutoGenerateColumns="False" DataKeyNames="CustomerID" EmptyDataText="There are no data records to display."> 
             <Columns> 
              <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" /> 
              <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" /> 
              <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" ItemStyle-CssClass="visible-xs" HeaderStyle-CssClass="visible-xs" /> 
              <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" /> 
              <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" /> 
              <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" /> 
              <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" /> 
              <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" /> 
              <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" /> 
              <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" /> 
             </Columns> 
            </asp:GridView> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</body> 
</html>

來源

2017-10-25 18:51:26

如何使用asp.net創建響應表？

回答

相關問題