javascript - 如何使用 asp.net 创建响应表？

Question

我想创建一个响应式表格。在我的代码中我无法调用 CSS，请帮助我。我附上了下面的截图。

我有一个 GridView 控件，我需要让它响应。我对以下代码使用 tg-education-detail tg-haslayout jquery 和 CSS

Responsive

<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

Table table-striped table-bordered table-hover

使用"file"->“新建”->“元素...”创建一个新元素，然后选择 Web，然后选择“ASP.Net Web Forms Application”。将其命名为“GridviewResponsive”。

对于新的 ASP.NET 元素，选择空模板，然后选中 Web 窗体复选框，然后单击确定。

在Design Source中编写如下代码。

    <%@ 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>