Filters & Searches

Here we will add a filter facility to the list view and include a button to link to a form view ready for adding new records (the form view will be implemented later).

Note: This tutorial first requires you complete DAL Filter Parameters to adapt the Data Access Layer appropriately to allow for parameterised queries.

 

By the end of this tutorial we will have created a search panel resembling the image below.

In the markup script, we previously created nested sections and split a row into two columns (sections with the class names 'col-md-8' and 'col-md-4'). The ListView is held in the first column and the Search panel will be created in the second column.

You may have already created the <section class="col-md-4"> tags and these can now be populated with the 'asp:TextBox' controls. The ID property allows us to identify each control while the placeholder text displays instruction text to the user so they know what to enter in the boxes.

An 'asp:Button' is created to initiate the search. You may include some Bootstrap styling using the 'CssClass' property.

<!-- SEARCH container -->
<section class="col-md-4">
  <h3>Search</h3>
  <p><asp:TextBox ID="txtSearchSiteID" runat="server" placeholder="Site ID"></asp:TextBox></p>
  <p><asp:TextBox ID="txtSearchSiteName" runat="server" placeholder="Site Name"></asp:TextBox></p>
  <p><asp:TextBox ID="txtSearchStatus" runat="server" placeholder="Status"></asp:TextBox></p>
  <p><asp:TextBox ID="txtSearchAddress1" runat="server" placeholder="Address Line 1"></asp:TextBox></p>
  <p><asp:TextBox ID="txtSearchAddress2" runat="server" placeholder="Address Line 2"></asp:TextBox></p>
  <p><asp:TextBox ID="txtSearchCity" runat="server" placeholder="City"></asp:TextBox></p>
  <p><asp:TextBox ID="txtSearchPostCode" runat="server" placeholder="Post Code"></asp:TextBox></p>
  <p><asp:Button ID="btnSearchSite" runat="server" Text="Search" CssClass="btn btn-primary"/></p>
</section>

The asp:Button triggers a page refresh, calling the Page_Load() subroutine. Navigating to the code behind we can create a number of string variables to store the values from the asp:Textboxes.

These variables should be declared and assigned before setting the ListView's DataSource property.

The code we previously created to set the DataSource runs the siteAdapter.Get() function and now we can use the siteAdapter.GetByParameters(). This line now needs editing to include our new variables as its parameters (in the order defined by our TableAdapter (Data Access Layer).

The Page_Load subroutine code should be as follows:

protected void Page_Load(object sender, EventArgs e)
{
  string sID = txtSearchSiteID.Text.ToString();
  string sName = txtSearchSiteName.Text.ToString();
  string sStatus = txtSearchStatus.Text.ToString();
  string sAddress1 = txtSearchAddress1.Text.ToString();
  string sAddress2 = txtSearchAddress2.Text.ToString();
  string sCity = txtSearchCity.Text.ToString();
  string sPostCode = txtSearchPostCode.Text.ToString();

  SiteTableAdapter siteAdapter = new SiteTableAdapter();
  LvSiteList.DataSource = siteAdapter.GetByParameters(sID, sName, sStatus, sAddress1, sAddress2, sCity, sPostCode);
  LvSiteList.DataBind();
}

The ListView's code behind should reflect the screenshot below:

We have now finished the Search facility and you should run and test it.

You may like to play with the layout and styling a little using Bootstrap CSS classes. I've also added a hyperlink button that will later take us to the 'new record' Form View.

See the image below for optional changes (the asp:ListView has been cascaded for easier viewing). Take careful note of the section classes such as 'col-xs-8' and 'col-md-12'.

The Site List page after some touch-ups to the design, the addition of a '+' hyperlink button to add new records (will redirect users to the Site View), and the search panel will now look like the screenshot below: