Doing with Expression what the FrontPage DRW's did
With the FrontPage Database Results Wizard, you could do Insert / Database
Results click your way along, and at some point choose input parameters that a
user would submit on a search form, and the Wizard would create the search form
for you automatically. You didn't have to know or understand how the form passed
the information to the database results.
To accomplish the equivalent using Expression and its ASP.NET controls, we show
how to make a search form that displays the results based on what a user inputs
to a textbox. We will show two examples: one where the search results are on the
same page as the search form, and one with the search results on a different
page.
Search form and results on same page:
First make a page called search.aspx
Open the search.aspx page. Being an aspx page, it already has a form on it. In
Design View drag a TextBox Control on to the form (ASP.NET Controls / Standard /
TextBox). This will be the field a user enters their search term into.
Give the
textbox a useful name for its ID by selecting it, going to the Tag
Properties and changing the value of ID to a meaningful name, for example
"TxtBxLName". You would use such a name if later on the Results.aspx page you
wanted to show the results of a search based on someone's last name in the
database (and, of course, the database needs to have LastName as a field in
each record).
You need a submit button for the form so Drag a Button onto the form (ASP.NET
Controls / Standard / Button). Select the Button, go to Tag Properties and
change the Text attribute of the button to a meaningful name such as
"DoTheSearch"
Under Behavior, set the value of PostBackURL to Search.aspx. This will
cause the value entered by a user into the textbox to become the imput parameter
for the Gridview we will be adding to show the search results on the search page
In Design View, drag a GridView onto the page.
Click on the little arrow in the upper right of the GridView and select
Configure Data Source Choose the database that the user will be searching and
select the fields you want to show in the GridView results (you can select all
the fields by checking the column with the asterisk). sterisk).
Now here is the important part. Click the WHERE button. Choose the field you
want to search on from the Column dropdown list. This should be a field that is
expecting the input text from the search form. For example, if your database
listed FirstName, LastName, City, Phone .... and you are trying to allow someone
to search by last name, then select the LastName field.
Leave the Operator set at "=" for this particular search.
Choose "Control" as the Source, and select the ID of your search
textbox ("TxtBxLName") from the ControlID dropdown list. Click Add, OK,
Next, TestQuery, OK, Finish.
Save the page, preview in browser, and test your search
Search results on a different page:
Thing are a little different if you want to display the Gridview results on a
different page.
Create a results.aspx page and save it. We will display data using a
Gridview on this page using the parameters inputted by the user on the search page.
Open the Search.aspx page you made above. For this example, remove the Gridview
from that page because we will be putting the gridview on the results.aspx page
for this part of the tutorial.
Select the button, and under Behavior, change the value of PostBackURL to
Results.aspx. This will cause
the value entered by a user into the textbox to become the input parameter for
the search results on the Results.aspx page
Save the page and now open the Results.aspx page
in Design View. Drag a gridview onto the page.
Click on the little arrow in the upper right of the GridView and select
Configure Data Source Choose the database that the user will be searching and
select the fields you want to show in the GridView results (you can select all
the fields by checking the column with the asterisk).
Click the WHERE button. Choose the field you
want to search on from the Column dropdown list. This should be a field that is
expecting the input text from the search form. For example, if your database
listed FirstName, LastName, City, Phone .... and you are trying to allow someone
to search by last name, then select the LastName field.
Leave the Operator set at "=" for this particular search. Then a key
thing is to choose "Form" as the Source, and type the ID of the search form field on the
search.aspx page (remember we named the text field on the search form
"TxtBxLastName") in the Parameter Properties Form field box.
NOTE: If you happen to be doing this using a Master Page
the method in this paragraph will fail. See the comments at the bottom of the
tutorial.
Click Add, OK, Next, TestQuery, OK, Finish.
Save the page and close it.
Open search.aspx, preview in browser, and test your search.
You now have accomplished all you could have accomplished with the FrontPage
Database Results Wizard.
If you are using a Master Page: There is an issue passing the value of a textbox
ID from the search page to the
results page when the search page control is in the ContentPlaceHolder of a
Master Page. In this case setting up the WHERE clause as described above will
fail. So what we will do is put a textbox on the Results page and give it the
same ID as was used on the search page, "TxtBxLastName"
Then on the Results page, set your gridview as usual, configure its datasource as
usual, and set up the WHERE choosing Source as a Control and TxBxLastName from
the drop-down list for the paramater properties of the Control ID.
The last step you need some code to run when the Results page loads that assigns
the value to TxtBxLastName that is the same as was entered in that textbox on the
search page. If you use VB, that code looks like:
--------------------------------------
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.PreviousPage Is Nothing Then
Dim placeHolder As Control =
PreviousPage.Controls(0).FindControl("ContentPlaceHolder1")
Dim SourceTextBox As
TextBox = CType(placeHolder.FindControl("TxtBxLastName"), TextBox)
If Not
SourceTextBox Is Nothing Then
TxtBxHSLName.Text = SourceTextBox.Text
End If
End
If
End Sub
--------------------------------------
Now -- the best way to add the code above is using Visual Web Developer Express.
It is a free download from Microsoft, and works well hand-in-hand with
Expression Web. If you are using a database, you should be using VWD to set up
your website in the first place.
Create your Website with VWD, and create each page with VWD before you do
anything with Expression. This will allow you to have VWD automatically create a
VB (or C#) code-behind page for every page. After you have created pages, you
can open the site and work on it with Expression if you like.
To add the code above, you would have your site open to the Results page using
VWD. Double-clicking on a blank spot in the page would open the
code-behind page and you would find the part of the code written in
bold above has already been written for you by
VWD, all you need to do is add the code in-between
Note: You can also open the code-behind page by double-clicking the page name in
the solution explorer window. Then in the upper left dropdown list select Page
Events and the upper right drop down list select Load, and once again, the code
boilerplate is written for you.