|
Introduction
This is the third part in a series of hands-on tutorials that will take you through all the steps to build a complete application using the new SQL Server 2005 database and Visual Studio 2005 IDE tools. This time you will be working with a Web interface to the application.
The .NET WebLinks project is a collection of Internet sources for information about .NET 2.0, Visual Studio 2005 and SQL Server 2005. Links to these articles are collected into a searchable database and categorized by subject. The project will allow all the .NET enthusiasts to add to the database, so that it will grow to become a very valuable tool for the .NET community.
Part 1 defined the database using SQL Server 2005 and business logic using datasets.
Part 2 is a Windows interface to the database, allowing individuals to import links from their Favorites directory, edit the links and upload to the master database.
Part 3 is a Web based interface to allow the general community access to search the database for the desired links.
Part 4 will define the Web services for the project, and how to consume them.
Part 3 - Web Interface Tutorial
Note: This tutorial builds on the work completed in Part 1 but not Part 2. If you did not complete the tutorial in
Part 1, you may download the source code for it here
and continue with this tutorial.
The ASPX engine in Visual Studio 2005 has been greatly improved with many tools added to automate much of the mundane code. Much of the web page can be generated without writing any code.
Open Visual Studio 2005 development environment by selecting it under All Programs / Visual Studio 8 / Visual Studio 2005. -
If you have not done so yet, use the following procedure to setup a properly structured Solution with multiple projects.
From the File Menu, select New, Project...
-
In the left pane choose Visual Studio Solutions under Other Project Types, and in the right pane, Blank Solution. Name the new solution "WebLinks" and choose a directory where you wish to store the solution.
Create the Web User Interface
-
In Visual Studio, right click on the solution and Add a New Web
-
Select an ASP.NET Web Site, using the File System, and choose the folder where you want it (create a new folder called Web under the Weblinks directory.)
-
Visual Studio usually opens the default form in HTML Source mode. Using the tab in the lower left corner, switch to the Design view. With version 2.0, Microsoft has come much closer to allowing complete design control with out needing to edit the HTML.
-
The goal is to create a web page that is similar to the Windows Forms version. There will be a treeview on the left to select the topic, a grid view showing the list of article titles, and a Design view to show the information about each article. Start by dragging a table from the HTML controls section of the Toolbox and dropping it on the form. This will allow the control of the layout of the form.
(Note: you can save time by pasting in the code below into the <Table> section in the Source view instead of the following steps.)
-
The Table control defaults to 3 columns and 3 rows but only two columns are needed. This one place where the Design view does not have enough control, so switch back to Source view. You will see the table with 3 rows (marked as <tr> and inside of the rows are 3 columns marked <td>. Delete the <td></td> set for the 3rd column in each row.
-
Switch back to Design view. Highlight (select) all of the rows and columns and set the border color to Silver
-
Drag a Div control from the HTML section of the Toolbox to each cell of the table (6 of them total).
-
Select each Div and change the Height and Width properties by clicking in the Style property and using the Position tab of the Style Builder as follows:
| 30x200 |
30x500 |
| 200x200 |
200x500 |
| 200x200 |
200x500 |
Select the middle two Div controls and change the Overflow property (on the layout tab of the Style Designer) to "Always use Scrollbars".
The following code should result if you view it in Source view.
<table style="width: 283px; height: 239px">
<tr>
<td bordercolor="silver" >
<div style="width: 200px; height: 30px">
</div>
</td>
<td bordercolor="silver">
<div style="width: 500px; height: 30px">
</div>
</td>
</tr>
<tr>
<td bordercolor="silver">
<div style="width: 200px; height: 200px; overflow: scroll;">
</div>
</td>
<td bordercolor="silver">
<div style="width: 500px; height: 200px; overflow: scroll;">
</div>
</td>
</tr>
<tr>
<td bordercolor="silver">
<div style="width: 200px; height: 150px">
</div>
</td>
<td bordercolor="silver">
<div style="width: 500px; height: 150px">
</div>
</td>
</tr>
</table>
(As you switch back and forth between Design view and Source view, notice that the same controls that are selected in one view will remain selected in the other view.)
Back in Design view, start filling each Div with the proper control. In the Upper left cell, drag a Label
control from the Standard section of the Toolbar. Set the properties: Font size to X-Large,
and the Text to ".NET WebLinks".
In the upper right cell, drag a Label, TextBox, and Button control. Set the Label to Text of
"Search", make the TextBox have a width of 350 and set
the Text of the button to "Go".
In the middle left cell, drop a TreeView control (from the Navigation section).
The treeview cannot be bound to a regular data source, but only a XML or SiteMap source view. So for now the treeview must be populated from code. Right click on the Design view and select View Code.
Add a reference to the Biz project. Right click on the project and select Add Reference. In the dialog, select the Projects tab and the Biz project.
In the code window, past the following code inside the Default class:
Partial Class _Default
Inherits System.Web.UI.Page
Dim ds As New Biz.WebLinksDataSet
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
If Not IsPostBack() Then
Dim dt As New Biz.WebLinksDataSet.TopicDataTable
dt = ds.Topic.GetData
FillTreeview(dt)
End If
End Sub
Protected Sub FillTreeview(ByVal dt As Biz.WebLinksDataSet.TopicDataTable)
For Each row As Biz.WebLinksDataSet.TopicRow _
In dt.Select("ParentTopicID Is null")
Dim newNode As New TreeNode(row.TopicName, row.TopicID)
FillChildNodes(dt, newNode, row.TopicID)
TreeView1.Nodes.Add(newNode)
Next
End Sub
Protected Sub FillChildNodes(ByVal dt As Biz.WebLinksDataSet.TopicDataTable, _
ByVal Node As TreeNode, ByVal ID As Integer)
For Each row As Biz.WebLinksDataSet.TopicRow In dt.Select("ParentTopicID=" & ID)
Dim newNode As New TreeNode(row.TopicName, row.TopicID)
FillChildNodes(dt, newNode, row.TopicID)
Node.ChildNodes.Add(newNode)
Next
End Sub
End Class
The page load builds a DataTable, populates it with a method from the dataset defined in the Business section. The FillTreeView method fills the top level of the treeview and recursively calls the FillChildNodes method to complete the treeview.
Build the project (from the top line Build menu). Right click on the screen and select View In Browser to test the screen so far.
Add a ObjectDataSource to the bottom of the form from the Data section of the Toolbox and name it ObjectDataSource1. Click the smart tag (small right arrow) and select Configure Data Source.
Note: some versions have a DataSource object and a second dialog to allow you to choose the type of data source. Otherwise, skip to the next step.
From the first dialog, select Object type to connect to our business tier dataset.
In the Configure Data Source wizard, from the list, select the TopicLinkTableAdapter from the Biz project.
Click the Next button and select the GetByTopicID method as the Select operation. The other operations will fill in automatically from the Table Adapter.
Click Next and proceed to the Define Parameters screen. For the Parameter source type, select Control from the dropdown list.
In the ControlID dropdown list, select the Treeview1 control. Because the treeview was constructed with the Text property of the TopicName and the Value property of the TopicID, the control will show the value of the TopicID of the selected node. This will be passed as a parameter to the Object Data Source which will retrieve the records for the GridView from the method selected.
In the middle right cell, drag and drop a GridView control from the Data section of the Toolbox. The popup smart task list will prompt you to select a data source. Pick the ObjectDataSource1 just created.
The Wizard throws in all the columns of the table. Select the Edit Columns option from the Smart Task List.
Notice the other options on this list that save a lot of development time. You can add paging, sorting, editing, etc. without writing any code. Check the Enable Selection option so the user can select the desired article from the list.
In the list of selected fields in the lower left section, delete all the columns except the LinkTitle field and the Select column.
The Design view should now look something like this:
Add a new Object Data Source to the bottom of the screen and name it ObjectDataSource2. (Actually you can put it anywhere, but the bottom of the screen is out of the way.)
Choose Configure DataSource, select the Biz.WebLinksDataSet+LinkDataTable and in the next screen, set the Select operation to GetByLinkID method.
In the final screen, fill the parameter from a ControlID and select the GridView1.
Regardless of which columns are in the GridView, the selected value will be the primary key of the table to which it is bound. But what we need is the LinkID. This could be solved by writing a couple lines of code to pass the correct parameter when the row in the grid is selected. An easier way is to modify the query to return the LinkID in the primary key field. There is not need for the TopicLinkID field and the LinkID will be unique when selecting by TopicID, so it will work as a primary key.
From the Data section of the Toolbox, drag a DetailsView control to the bottom right cell of the table. Set the Data Source to the ObjectDataSource2 just created.
From the smart tag, select Edit Fields and remove all the fields except LinkTitle, Description, URL, ArticleDate, and AvgRating.
Size the Design view to fill the cell and save your project. Right click and select View in Browser to see the results. Selecting a node in the treeview will show a list of titles in the grid and selecting a row in the grid will show the details for the link in the Design view control. Close the browser and work on the last cell in the table.
In the lower left cell, add a label with the text "Rate This Article", and a Radio button list
Select the Radio button list and from the smart tag (or the items collection in the property panel) select Edit Items. Create 5 items with the text and value of 1-5.
Set the AutoPostBack property to true and double click on the Radio button list to create a code stub to handle the SelectedIndexChanged event. Add the following code to submit the vote on the article.
Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChanged
Dim LinkID As Integer = GridView1.SelectedDataKey.Value
ds.SubmitRating(LinkID, RadioButtonList1.SelectedValue)
End Sub
Double click on the Open Article button to build a stub for the Click event. Add the following code to open the selected web site.
Protected Sub OpenButton_Click(ByVal sender As Object, ByVal e As _
System.EventArgs) Handles OpenButton.Click
System.Diagnostics.Process.Start(DetailsView1.Fields.Item(0).ToString)
End Sub
To handle the search by key word function, add another ObjectDataSource object to the bottom of the Design View form and give it an DataSourceID of ObjectDataSource3.
For the business object, choose Biz.WebLinksDataSetTableAdapters.TopicLinkTableAdapter and for the Select method, choose GetByKeyWords.
On the Parameters screen, select the source of Control and the ControlID of TextBox1 and click Finish.
To implement the Search code, double click on the Go button to build a stub for the click event and switch the Grid to use the new data source with the following code:
Protected Sub SearchButton_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles SearchButton.Click
If GridView1.DataSourceID <> "ObjectDataSource3" Then
GridView1.DataSourceID = "ObjectDataSource3"
End If
End Sub
When the user clicks back on the tree view, you need to switch the Grid View data source back to the original data source with the following code:
Protected Sub TreeView1_SelectedNodeChanged(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles TreeView1.SelectedNodeChanged
If GridView1.DataSourceID <> "ObjectDataSource1" Then
GridView1.DataSourceID = "ObjectDataSource1"
End If
End Sub
Build the project and open in a browser to test. It should look something like this:
About the Author
David Catherman - CMI Solutions
Email: DCatherman (at) CMiSolutions (dot) com
David Catherman has 20+ years designing and developing database applications with specific concentration for the last 4-5 years on Microsoft .NET and SQL Server. He is currently Application Architect and Senior Developer at CMI Solutions using Visual Studio 2005 and SQL Server 2005. He has several MCPs in .NET and is pursuing MCSD.
|
