DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Responsive Bootstrap GridView in ASP.NET

Responsive Bootstrap GridView in ASP.NET

A straightforward tutorial to make a responsive UI for your ASP.NET application.

Sanjay Kumar user avatar by
Sanjay Kumar
·
Nov. 02, 15 · Mobile Zone · Tutorial
Like (5)
Save
Tweet
104.81K Views

Join the DZone community and get the full member experience.

Join For Free

The GridView control of Bootstrap provides responsive design quickly and easily.

So, let's start with the following procedure.

  • Package Manager Console
  • PM > Install-Package Twitter.Bootstrap.Bootswatch.Cosmo

  • Grid view Control and Data Binding
  • HeaderStyle-CssClass=" " ItemStyle-CssClass=" "

  • Bootstrap Responsive Classes
  • Table table-striped table-bordered table-hover







    Create a new project using "File" -> "New" -> "Project..." then select Web then select "ASP.Net Web Forms Application". Name it “GridviewResponsive".



    For the new ASP.NET Project select Empty template then select the Web Forms checkbox then click OK.
















    In the Design Source write the code as in the following.

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

    Write this code.

    Default.aspx.cs

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

    Now run the page, it will look like the following Desktop layout.


    Now run the page, it will look like the following Tablet layout.


    Now run the page, it will look like the following Phone layout.















    I hope this article is useful. If you have any other questions then please provide your comments below.

    ASP.NET Bootstrap (front-end framework)

    Published at DZone with permission of Sanjay Kumar. See the original article here.

    Opinions expressed by DZone contributors are their own.

    Popular on DZone

    • JUnit 5 Tutorial: Nice and Easy [Video]
    • How To Integrate Event Streaming Into Your Applications
    • How to Upload/Download a File To and From the Server
    • Fintech and AI: Ways Artificial Intelligence Is Used in Finance

    Comments

    Mobile Partner Resources

    X

    ABOUT US

    • About DZone
    • Send feedback
    • Careers
    • Sitemap

    ADVERTISE

    • Advertise with DZone

    CONTRIBUTE ON DZONE

    • Article Submission Guidelines
    • MVB Program
    • Become a Contributor
    • Visit the Writers' Zone

    LEGAL

    • Terms of Service
    • Privacy Policy

    CONTACT US

    • 600 Park Offices Drive
    • Suite 300
    • Durham, NC 27709
    • support@dzone.com
    • +1 (919) 678-0300

    Let's be friends:

    DZone.com is powered by 

    AnswerHub logo