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

Question

我想創建一個響應表。 在我的代碼中，我無法調用CSS，請幫助我。 我已附上以下屏幕截圖。

我有一個網格視圖控件，需要使其響應。 我將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>

Answer 1

該鏈接可以幫助您：

ASP.Net中的響應式GridView

GridView控件提供了響應式設計，並通過快速響應的開發Bootstrap框架輕松實現。

因此，讓我們繼續以下過程。

Package Manager Console 

PM>安裝包Twitter.Bootstrap.Bootswatch.Cosmo

Grid view Control and Data Binding 

HeaderStyle-CssClass =“” ItemStyle-CssClass =“”

Bootstrap Responsive Classes

表表條紋表邊界表懸停

使用“文件”->“新建”->“項目...”創建一個新項目，然后選擇“ Web”，然后選擇“ ASP.Net Web Forms Application”。 將其命名為“ 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>