CIS Logo SVC Logo

   Computing & Information Systems
   Department

 

Schoology Facebook        Search CIS Site      Tutorials

E-commerce App 4



The Goals for this Example


In e-commerce app 3 we displayed the results of a search in a data grid that used paging as well as View buttons. Here, we make small adjustments and improvements. We try link buttons instead of pushbuttons in the datagrid. We also use page numbers instead of previous and next buttons for paging of the results. In addition, we find a way to avoid querying the database again each time that the user goes to a new page of results. Finally, we add data validation to the search form so that users cannot submit nonsense data (or worse yet, data that might help in hacking your application).

Copying the Previous Project

  • Open the previous project, e-commerce app 3, in Visual Studio.
  • Make a copy of this project and name the new project ecommerce4.
  • Close the old solution and open the new ecommerce4 project.
  • Save all of your files.

Adding Data Validation

Required Field Validator

  • Add a required field validator for the text box (to which we gave the ID of SubstringBox) on the search.aspx web form.
  • Place this validator right underneath the text box.
  • For this validator use the error message: "You cannot leave the box empty."

Regular Expression Validator

  • Add a regular expression validator for the text box and place it in a reasonable spot below the box.
  • Use "Only letters, digits, and spaces can be used -- up to 80 characters." as the error message.
  • Use [a-zA-Z0-9 ]{1,80} as the validation expression. Notice that there is a blank character after the 9. This regular expression only allows user input that consists of at least 1 and at most 80 characters, where the allowed characters are alphabetic (lower or upper case), digits, and the blank character. This would seem to be sufficient for users who want to search for our products and leaves out the more unusual characters that hackers like to use.

The search.aspx.vb Code-Behind File

  • This code really does not change.
  • However, now that we have validators on our search.aspx form, the Page.IsValid is really doing some important checking for us.
  • Here is a copy of the code for the Page_Load procedure just to be sure that you have it right:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
Handles MyBase.Load
    'Put user code to initialize the page here
    Dim Target As String
    If IsPostBack Then   'Search button was clicked
        Page.Validate()
        If Page.IsValid Then
            Target = SubstringBox.Text.ToString()
            Session.Add("TargetSubstring", Target)
            Response.Redirect("SearchResults.aspx")
        End If
    End If
End Sub

Adjusting the Search Results Page

  • Save all of your files before going on.
  • We now move to the SearchResults.aspx form.
  • Here we make some small changes in order to see other ways of doing things.

Changes to the DataGrid

  • The changes that we wish to do can be seen in this picture.
  • To switch from push buttons to link buttons, click on the DataGrid. Then click on the Property Builder link. Click on the Columns tab and then on Button Column. Change the Button type to LinkButton.
  • To change from the use of Previous and Next buttons for paging to page numbers, click on the Paging tab in Property Builder. Change the Mode to "Page numbers".
  • The Visual Studio help system tells you that the page number option will then be available and allow you "to specify how many page numbers are displayed at a time on the grid. If the data source contains more pages than the number of page numbers you display, the grid includes an ellipsis (...) to allow users to move to the next set of page numbers." You might use 3 for this option.

A More Efficient Code-Behind File

  • At present, each time a user switches to a different page of search results, the code queries the database again. This tends to be slow and inefficient.
  • Let's just query the database once (in Page_Load) and save the DataTable of results in the session state so that it can be easily retrieved anytime the user chages to a new page of results in the DataGrid.
  • To do this, we insert the following line of code right after the use of DataBind in the Page_Load procedure:

Session.Add("DataTable", dTable)

  • This means that the Page_Load procedure looks like this:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
Handles MyBase.Load
    'Put user code to initialize the page here
    Dim Substring As String

    If Not IsPostBack Then
        If Session.Count = 0 Then   ' No session items were supplied.
            SessionErrorLabel.Visible = True
        Else
            Try
                Substring = Session("TargetSubstring")
                If Substring = "" Then
                    SessionErrorLabel.Visible = True
                Else
                    SqlConnection1.Open()
                    SqlDataAdapter1.SelectCommand.Parameters("@Target").Value = Substring
                    SqlDataAdapter1.Fill(dTable)
                    If dTable.Rows.Count = 0 Then
                        NoDataLabel.Visible = True
                        DataGrid1.Visible = False
                    Else
                        DataView1 = New DataView(dTable)
                        DataGrid1.DataBind()
                        Session.Add("DataTable", dTable)
                        DataGrid1.Visible = True
                    End If
                End If
            Catch exception As System.Data.SqlClient.SqlException
                DatabaseErrorLabel.Visible = True
            Catch exception As Exception
                ErrorLabel.Visible = True
            Finally
                SqlConnection1.Close()
            End Try
        End If
    End If
End Sub

  • We then change the DataGrid1_PageIndexChanged procedure so that it looks up its data in the session state instead of again querying the database.
  • Change this procedure to match the following:

' handles DataGrid1 page changed event
Private Sub DataGrid1_PageIndexChanged(ByVal sender As Object, _
   ByVal e As DataGridPageChangedEventArgs) _
   Handles DataGrid1.PageIndexChanged

    Dim Substring As String

    If Session.Count = 0 Then   ' No session items were supplied.
        SessionErrorLabel.Visible = True
    Else
        dTable = Session("DataTable")
        If dTable.Rows.Count = 0 Then
            NoDataLabel.Visible = True
        Else
            DataView1 = New DataView(dTable)
            DataGrid1.CurrentPageIndex = e.NewPageIndex  'Show new page
            DataGrid1.DataBind()
            DataGrid1.Visible = True
        End If
    End If
End Sub

  • We leave the DataGrid1_ItemCommand procedure unchanged.
  • If the DataTable of search results is large, saving it in the session state might well introduce its own inefficiencies.

Testing Your Web Application

  • Save all files and build your project.
  • Test your new web app in a browser. In particular, check the search functionality and be sure that the paging works correctly for the search results.
  • Also test that the validators work correctly on the search page.
    • If the user leaves the text box empty, the required field validator should display its error message as shown in this screen shot.
    • If the user enters unacceptable characters (not allowed by our regular expression [a-zA-Z0-9 ]{1,80} as used above), then we should see the complaint from the regular expression validator. The same error message should appear if you try to enter more than 80 characters into the text box.

Back to the main page for ASP .NET Web Apps



Author: Br. David Carlson
Last updated: November 04, 2008
Disclaimer