آموزش ساخت GridView ریسپانسیو در ASP.NET

مقاله ساخت GridView ریسپانسیو ، مقاله ای به همراه نمونه سورس که برای شما آماده دانلود شده است ، همه ما در پروژه هایی که انجام میدیم از GridView حدالمکان یک بار هم استفاده کرده ایم ، البته در برنامه نویسی وب داررم عررض میکنم ، خوب وقتی از GridView پیش فرض ASP که استفاده میکنم اگر صفحات ما ریسپانسیو باشند امکان داره GridView فرم ها را بهم بریزد،در این مفاله با ساخت یک GridView ریسپانسیو آشنا میشم ، که در همه سایزها بدون مشکل نمایش داده میشود و به راحتی میتوانید در فرم هایی که از بوت استرپ استفاده شده از این گرید ویو نیز استفاده کنید. در ادامه جهت ارائه آموزش همراه من باشید.

با استفاده از “File” -> “New” -> “Project…” یک پروژه جدید ایجاد کنید و سپس Web را اتنخاب کنید و بعد “ASP.Net Web Forms Application” را انتخاب کنید. اسم آن را “GridviewResponsive” بگذارید.

یک صفحه ایجاد کنید و در صفحه Default.aspx کد قسمت کد زیر را وارد کنید :

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

&nbsp;

</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>

, و حال در صفحه Default.aspx.cs کد زیر را وارد کنید.

کد زیر صرفا جهت فرخوانی اطلاعات از دیتابیس هست شما میتوانید کد خود را قرار دهید.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

&nbsp;

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();

}

}

}

حال فرم خود را به هر اندازی ای که دوست دارید تغییر دهید !