Navigating Records without using any built-in Data Control
Navigating Records without using any built-in Data Control
The Concept
In ASP.Net there are built-in Data Controls such as FormView, DetailsView which can be used to navigate between records using First, Previous, Next and Last buttons.
However, we can also write our own code to navigate between records. The following Code Snippet describes how you can navigate through a set of records that can be fetched from the database.
The Requirement
1) The page will have a set of Labels which will display the fields.
2) There will be 4 buttons for moving to the First, Previous, Next and Last record.
3) When the cursor is in the first record we cannot move to previous record. Similarly, when the cursor is in the last record we cannot move to the Next record.
4) A TextBox will hold the value of current record. Where, we can put the record number and move to the corresponding record.
5) If the user put a record number which is less than 0 or more than the number of records, the cursor will move to the first or last record respectively.
Code
Design
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="width: 127px">
<asp:Label ID="Label1" runat="server" Text="Employee ID:"></asp:Label></td>
<td style="width: 354px">
<asp:Label ID="LblEmployeeID" runat="server" Text="Label"></asp:Label></td>
</tr>
<tr>
<td style="width: 127px">
<asp:Label ID="Label3" runat="server" Text="Employee Name:"></asp:Label></td>
<td style="width: 354px">
<asp:Label ID="LblEmployeeName" runat="server" Text="Label"></asp:Label></td>
</tr>
<tr>
<td style="width: 127px">
<asp:Label ID="Label5" runat="server" Text="Date of Join:"></asp:Label></td>
<td style="width: 354px">
<asp:Label ID="LblDateOfJoin" runat="server" Text="Label"></asp:Label></td>
</tr>
<tr>
<td style="width: 127px">
<asp:Label ID="Label7" runat="server" Text="Salary:"></asp:Label></td>
<td style="width: 354px">
<asp:Label ID="LblSalary" runat="server" Text="Label"></asp:Label></td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="BtnFirst" runat="server" Text="|<" OnClick="BtnFirst_Click" Width="20px" />
<asp:Button ID="BtnPrior" runat="server" Text="<" OnClick="BtnPrior_Click" Width="20px" />
<asp:TextBox ID="TxtCurrentRecord" runat="server" Width="17px" AutoPostBack="True" OnTextChanged="TxtCurrentRecord_TextChanged"></asp:TextBox>
<asp:Label ID="LblTotalRecords" runat="server"></asp:Label>
<asp:Button ID="BtnNext" runat="server" Text=">" OnClick="BtnNext_Click" Width="20px" />
<asp:Button ID="BtnLast" runat="server" Text=">|" OnClick="BtnLast_Click" Width="20px" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
C# Code Behind
static DataTable dt;
static int currec, totrec;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
dt = GetData();
}
totrec = dt.Rows.Count;
if (!Page.IsPostBack)
ShowData(0);
ScrollControl();
}
protected void BtnFirst_Click(object sender, EventArgs e)
{
currec = 0;
ShowData(currec);
ScrollControl();
}
protected void BtnPrior_Click(object sender, EventArgs e)
{
currec -= 1;
ShowData(currec);
ScrollControl();
}
protected void BtnNext_Click(object sender, EventArgs e)
{
currec += 1;
ShowData(currec);
ScrollControl();
}
protected void BtnLast_Click(object sender, EventArgs e)
{
currec = totrec - 1;
ShowData(currec);
ScrollControl();
}
protected void TxtCurrentRecord_TextChanged(object sender, EventArgs e)
{
currec = Convert.ToInt32(TxtCurrentRecord.Text) - 1;
if (currec + 1 > totrec)
{
currec = totrec - 1;
}
else if (currec < 0)
{
currec = 0;
}
ShowData(currec);
ScrollControl();
}
public void ShowData(int cr)
{
DataRow dr = dt.Rows[cr];
LblEmployeeID.Text = Convert.ToString(dr["empid"]);
LblEmployeeName.Text = Convert.ToString(dr["empname"]);
LblDateOfJoin.Text = Convert.ToString(dr["dateofjoin"]);
LblSalary.Text = Convert.ToString(dr["salary"]);
TxtCurrentRecord.Text = (currec + 1).ToString();
LblTotalRecords.Text = " of " + totrec.ToString();
}
public DataTable GetData()
{
DataTable DtEmp = new DataTable();
DataColumn dc = new DataColumn("empid", typeof(string));
DtEmp.Columns.Add(dc);
dc = new DataColumn("empname", typeof(string));
DtEmp.Columns.Add(dc);
dc = new DataColumn("dateofjoin", typeof(int));
DtEmp.Columns.Add(dc);
dc = new DataColumn("salary", typeof(DateTime));
DtEmp.Columns.Add(dc);
DtEmp.Rows.Add("E001", "Rahul Mehera", 12000, new DateTime(2010, 1, 1));
DtEmp.Rows.Add("E002", "Bhuban Agarwal", 16000, new DateTime(2009, 10, 1));
DtEmp.Rows.Add("E003", "Ranjjit Roy", 18500, new DateTime(2009, 7, 5));
DtEmp.Rows.Add("E004", "Mohit Garg", 32000, new DateTime(2003, 12, 1));
DtEmp.Rows.Add("E005", "Ipsita Patel", 22000, new DateTime(2002, 9, 10));
DtEmp.Rows.Add("E006", "Anisha Basu", 20000, new DateTime(2007, 11, 1));
DtEmp.Rows.Add("E007", "Bibek Shetty", 35000, new DateTime(2010, 7, 3));
DtEmp.Rows.Add("E008", "Namrata Roy", 45000, new DateTime(2010, 12, 3));
return DtEmp;
}
void ScrollControl()
{
if (totrec == 0)
{
BtnFirst.Enabled = false;
BtnPrior.Enabled = false;
BtnNext.Enabled = false;
BtnLast.Enabled = false;
}
else if (currec >= totrec - 1)
{
BtnFirst.Enabled = true;
BtnPrior.Enabled = true;
BtnNext.Enabled = false;
BtnLast.Enabled = false;
}
else if (currec <= 0)
{
BtnFirst.Enabled = false;
BtnPrior.Enabled = false;
BtnNext.Enabled = true;
BtnLast.Enabled = true;
}
else
{
BtnFirst.Enabled = true;
BtnPrior.Enabled = true;
BtnNext.Enabled = true;
BtnLast.Enabled = true;
}
}
Code Explanation
The above code has a method GetData which creates DataTable instantly return the same. However, the code can be replaced to fetched data from the Database and fill the DataTable. The ScrollContrl method will enable or disable the navigation buttons according to the cursor position.
Thanks & Regards
Paritosh Mohapatra