کنترل GridView واکنشگرا (Responsive) در Asp.Net

در این مقاله نحوه افزودن کنترل GridView واکنشگرا در Asp.Net را توضیح خواهیم داد .

با استفاده از کلاس Bootstrap میتوانیم یک کنترل GridView واکنشگرا ایجاد کنیم .

در ابتدا فایل Package Twitter.Bootstrap.Bootswatch.Cosmo موجود در فایل ضمیمه را به پروژه اضافه می نماییم .سپس کلاس Bootstrap را نیز در قسمت Hedear صفحه اضافه می نماییم .برای ایجاد پروژه جدید مانند مراحل زیر عمل می نماییم :

Project < New < File و در پنجره باز شده در ستون Web گزینه ASP.Net Web Forms Application را انتخاب میکنیم , به طور مثال نام پروژه را GridviewResponsive قرار میدهیم .

سپس داخل پروژه تیک Web Forms را میزنیم و در پنجره بالا Empty را انتخاب می کنیم :

اکنون تگهای مورد نظر را در قسمت Design صفحه اضافه میکنیم :

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

و در قسمت کد نویسی صفحه کد های زیر را اضافه می نماییم :

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
  
namespace GridviewResponsive  
{  
      public partial class Default : System.Web.UI.Page  
      {  
            NorthwindDataContext dc = new NorthwindDataContext();  
            protected void Page_Load(object sender, EventArgs e)  
            {  
                  var qry = from s in dc.Customers  
                  select s;  
                  grdCustomer.DataSource = qry;  
                  grdCustomer.DataBind();  
            }  
      }  
}