Create Mobile Responsive Gridview using Bootstrap in ASP.NET
Mobile responsive Gridview -
(In Red color highlighted code is used for responsive gridview)
Designing Coding--
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SuyamunTask.aspx.cs" Inherits="Software.SuyamunTask" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="Scripts/jquery-3.3.1.js"></script>
<link href="Content/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui.js"></script>
<script src="Scripts/jquery.datetimepicker.js"></script>
<script src="Scripts/footable.min.js"></script>
<link href="Scripts/footable.css" rel="stylesheet" />
<title></title>
<script type="text/javascript">
$(function ()
{
$("#dob").datepicker(
{
onSelect: function (value, ui)
{
var today = new Date();
age = today.getFullYear() - ui.selectedYear;
$('#age').val(age);
},
changeMonth: true,
changeYear: true
})
$("#btnSave").click(function ()
{
var fname, mname, lname, email, dob, age, emailExp;
{
fname = $("#txtFname").val();
mname = $("#txtMname").val();
lname = $("#txtLname").val();
email = $("#txtEmail").val();
dob = $("#dob").val();
age = $("#age").val();
emailExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([com\co\.\in])+$/;
if (fname == '' && mname == '' && lname == '' && email == '' && dob == '' && age == '')
{
alert("Enter All Field");
return false;
}
if (fname == '')
{
alert("Enter First Name");
return false;
}
if (mname == '')
{
alert("Enter Middle Name");
return false;
}
if (lname == '')
{
alert("Enter last Name");
return false;
}
if (email == '')
{
alert("Enter Email Id");
return false;
}
if (emailExp !== '')
{
if (!email.match(emailExp))
{
alert("Invalid Email id");
return false;
}
}
if (dob =='')
{
alert("Enter Date of Birth");
return false;
}
if (age == '')
{
alert("Enter your age");
return false;
}
}
return true;
});
});
</script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1]').footable();
});
</script>
</head>
<body style="background-color:blanchedalmond">
<form id="form1" runat="server">
<h1 class="jumbotron" align="center">Crud Operation With Database</h1>
<h3 align="center" class="auto-style3"><strong>Developed by Pankaj Baviskar</strong></h3>
<div class="col-md-12">
<table align="center" class="table-responsive-md">
<tr>
<td class="text-right">First Name:</td>
<td>
<asp:TextBox ID="txtFname" CssClass="form-control" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right">Middle Name:</td>
<td>
<asp:TextBox ID="txtMname" CssClass="form-control" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right">Last Name:</td>
<td>
<asp:TextBox ID="txtLname" CssClass="form-control" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right">Email:</td>
<td>
<asp:TextBox ID="txtEmail" CssClass="form-control" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right">DOB:</td>
<td>
<asp:TextBox ID="dob" CssClass="form-control" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right">Age:</td>
<td>
<asp:TextBox ID="age" CssClass="form-control" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="btnSave" runat="server" Text="Submit" class="btn-success" OnClick="btnSave_Click"/>
<asp:Button ID="Button1" runat="server" Text="Reset" class="btn-danger" OnClick="Button1_Click" />
</td>
</tr>
</>
<tr>
<td colspan="2">
<asp:GridView ID="GridView1" CssClass="footable" runat="server" CellPadding="3" ForeColor="Black" GridLines="Vertical" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px">
<AlternatingRowStyle BackColor="#CCCCCC" />
<FooterStyle BackColor="#CCCCCC" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
</td>
</tr>
</table>
</div>
<div>
</div>
</form>
</body>
</html>
C# Coding for Responsive Gridview-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace Software
{
public partial class SuyamunTask : System.Web.UI.Page
{
SqlConnection con;
SqlCommand cmd;
SqlDataAdapter da;
DataSet ds;
protected void Page_Load(object sender, EventArgs e)
{
con = new SqlConnection("Your Connection String");
cmd = new SqlCommand();
cmd.Connection = con;
Gridviwe();
ResponsiveBootstrap();
}
private void ResponsiveBootstrap()
{
//Attribute to show the Plus Minus Button.
GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
GridView1.HeaderRow.Cells[2].Attributes["data-class"] = "expand";
//Attribute to hide column in Phone.
GridView1.HeaderRow.Cells[1].Attributes["data-class"] = "phone";
GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
//Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
protected void btnSave_Click(object sender, EventArgs e)
{
cmd.CommandText="Insert into SuyamunTask(Fname,Mname,Lname,Email,DOB,Age)values(@Fname,@Mname,@Lname,@Email,@DOB,@Age)";
cmd.Parameters.AddWithValue("@Fname", txtFname.Text);
cmd.Parameters.AddWithValue("@Mname", txtMname.Text);
cmd.Parameters.AddWithValue("@Lname", txtLname.Text);
cmd.Parameters.AddWithValue("@Email", txtEmail.Text);
cmd.Parameters.AddWithValue("@DOB", dob.Text);
cmd.Parameters.AddWithValue("@Age", age.Text);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
Gridviwe();
ResponsiveBootstrap();
}
private void Gridviwe()
{
cmd.CommandText = "Select * from SuyamunTask ";
da = new SqlDataAdapter(cmd);
ds = new DataSet();
da.Fill(ds, "ASPDB");
GridView1.DataSource = ds;
GridView1.DataBind();
ResponsiveBootstrap();
}
protected void Button1_Click(object sender, EventArgs e)
{
txtFname.Text = "";txtLname.Text = "";txtMname.Text = "";txtEmail.Text = "";dob.Text = "";age.Text = "";
}
}
}
