Example - Basics of Filtering records on List Page

1 of 4

Let’s create a List Page for Contract Employee. At First, we will keep it really simple. We will
have filters that search for:”ContractEmployeeName like”,”ContractEmployeeCode like” and
“Status =”.

Later we will extend the example to have more complicated criteria like “Joining Date
before”,”Joining Date after” and “Joining Date Between”. We will use this example later again to
create even more sophisticated search and list pages.

If you are able to do this example and a couple of more examples after this properly, trust me
you are ready for an entry level programmer job in most software application companies in
Mumbai.

So lets start.
Step 1: Add a Page “ContractEmployeeList.aspx” and inherit it from the Master Page.
Step 2: Simple put the Title and the link to “Add a new Contract Employee”.Add the
Markup below.
​<div class="row">
<div class="col-xs-12"><span class="h3">List of Contract Employees</span>
<a href="NewContractEmployee.aspx" class="pull-right"><b>Add a new Contract
Employee</b></a> </div>
</div
Step 3: Now to put the filter criteria. There is a single “row” div and upto 4 column divs
with class as “col-xs-12 col-sm-3” which will show one criteria each.
<div class="row">
<div class="col-xs-12 col-sm-3">
<label>Contract Employee Name like</label>
<asp:TextBox runat="server" ID="TxtContractEmployeeName"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-xs-12 col-sm-3">
<label>Contract Employee Code like</label>
<asp:TextBox runat="server" ID="TxtContractEmployeeCode"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-xs-12 col-sm-3">
<label>and Status is</label>
<asp:DropDownList runat="server" ID="DdlStatus" CssClass="form-control">
<asp:ListItem>Active</asp:ListItem>
<asp:ListItem>Inactive</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-xs-12 col-sm-3">
 Example - Basics of Filtering records on List Page

2 of 4
<label>&nbsp;</label><br />
<asp:Button runat="server" ID="BtnGo" Text="Go" CausesValidation="false"
CssClass="btn btn-default" OnClick="BtnGo_Click" />

</div>
</div>

Step 4: Now we add LblMessage below the Filter Criteria. LblMessage is used to show
the Messages sent from the “Add” and “Edit” pages.
<div class="row">
<div class="col-xs-12 text-center">
<asp:Label runat="server" ID="LblMessage" CssClass="text-success" ></asp:Label>
</div>
</div>

Step 5: Add LblNumberOfRecords

<div class="row">
<div class="col-xs-12 text-center">
Number of Records: <asp:Label runat="server"
ID="LblNumberOfRecords"></asp:Label>
</div>
</div>

Step 6: Now we add the GridView

Observe the following things in the GridView markup.
1. The GridView itself is a child to a div which has a class “table-responsive”. This
class makes sure that the DIv shows a horizontal scroll bar when the GirdView is
bigger horizontally than the screen space available like on small phones
2. GridView has a class =”table table-bordered table-hover”. This formats the
Gridview properly accordig to Bootstrap styles
3. AutoGenerate property of GridView is set to false
4. There are three bound columns and one Hyperlink Column. Observe the
DataNavigateURLField and DataNavigateURLFormatProperties properly.
<div class="table-responsive">
<asp:GridView runat="server" id="GridView1"
AutoGenerateColumns="false" CssClass="table table-bordered table-hover">
<Columns>
<asp:BoundField HeaderText="Contract Employee Name"
DataField="ContractEmployeeName" />
<asp:BoundField HeaderText="Contract Employee Code"
DataField="ContractEmployeeCode" />
<asp:BoundField DataField ="Status" HeaderText="Status" />
 Example - Basics of Filtering records on List Page

3 of 4
<asp:HyperLinkField DataNavigateUrlFields="Id"
DataNavigateUrlFormatString="EditContractEmployee.aspx?ID={0}" Text="Edit"/>
</Columns>
</asp:GridView>
</div>

Step 7: First thing just make a empty function as below

public void ShowGridView()
{
}
Why? Because GridView must be shown
-When Page is loaded for the first time
-And also whenever we click the Go Button.
So we write the code in a function and we will later call this function from Page_Load and
BtnGo_Click

Step 8: Now the Code in Page_Load. Here’s whats being done

When the page first loads (in IsPostBack==false), we set focus on
TxtContractEmployeeName, set BtnGo as default button, take the message sent by New
and Edit Pages from QueryString and display it in LblMessage and finally we call
ShowGridView to display the data.
In the else(when a post back occurs due to go button click), we clear the label
if (this.IsPostBack == false)
{
TxtContractEmployeeName.Focus();
this.Form.DefaultButton = BtnGo.UniqueID;
LblMessage.Text = Request.QueryString["Message"];
ShowGridView();
}
else
LblMessage.Text =String.Empty;

Step 9: Dont forget to call ShowGridView from BtnGo_Cick;

ShowGridView();

Step 10: FInally the code that must be written in the ShowGridView function.Please note
how I have put the “and” clause from the third statement onwards and also notice that I
leave some space at the end and beginning of every clause
"​ ​ContractEmployeeName like'%" + TxtContractEmployeeName.Text.Replace("'", "''") +
"%'​ ​"
This ensures that clasuses dont stick to each other.
Also notice that there is no unnecessary space after ‘% or before %’.
​ string strsql = "select * from ContractEmployee where ";
 Example - Basics of Filtering records on List Page

4 of 4
strsql = strsql + " ContractEmployeeName like'%" +
TxtContractEmployeeName.Text.Replace("'", "''") + "%' ";
strsql = strsql + " and ContractEmployeeCode like'%" +
TxtContractEmployeeCode.Text.Replace("'", "''") + "%' ";
strsql = strsql + " and Status='Active'";
SqlConnection ObjConnection = new
SqlConnection(ConfigurationManager.ConnectionStrings["ParadigmOCRM"].ConnectionString);
ObjConnection.Open();
SqlCommand ObjCommand = new SqlCommand(strsql, ObjConnection);
SqlDataReader ObjReader = ObjCommand.ExecuteReader();
GridView1.DataSource = ObjReader;
GridView1.DataBind();
LblNumberOfRecords.Text = GridView1.Rows.Count.ToString();
ObjConnection.Dispose();

Now that we are done with basic binding, my futher examples will extend the complexties
of this example and eventually lead us to a Industrial Scale Example which has most
possible complications.

One of my bosses always used to keep saying “KISS”.... Keep it Simple and Straight… I
belive him… you should too…:)