ASP.NET 2.0 Instant Results

Wrox Chat Server

The following is a copy of the entire contents of the GetChatRoomList() method:

‘’’ <summary>

‘’’ Retrieves a DataSet of ChatRooms from the database ‘’’ </summary>

Public Shared Function GetChatRoomList() As DataSet Dim dsChatRooms As DataSet = New DataSet()

Try

Using mConnection As New SqlConnection(Config.ConnectionString)

Dim mCommand As SqlCommand = New SqlCommand( _ “sprocChatRoomSelectList”, mConnection)

mCommand.CommandType = CommandType.StoredProcedure

Dim myDataAdapter As SqlDataAdapter = New SqlDataAdapter()

myDataAdapter.SelectCommand = mCommand myDataAdapter.Fill(dsChatRooms) mConnection.Close()

Return dsChatRooms End Using

Catch ex As Exception

‘When we call the “Throw” statement, we are raising the error ‘to the global.asax file, which will use the default error ‘handling page to process/display the custom error to the user Throw

End Try End Function

The preceding logic performs the following steps:

1.Creates a new SqlCommand object, passing in the stored procedure name and the connection:

Using mConnection As New SqlConnection(Config.ConnectionString)

2.Sets the CommandType to be StoredProcedure, and provides the name of sprocChatRoomSelectList:

Dim mCommand As SqlCommand = New SqlCommand( _

“sprocChatRoomSelectList”, mConnection)

mCommand.CommandType = CommandType.StoredProcedure

3.Creates a new DataAdapter, and assigns its SelectCommand property to the mCommand ADO.NET command object reference. The DataAdapter calls the Fill method, which assigns the data to the passed-in dsChatRooms DataSet variable:

Dim myDataAdapter As SqlDataAdapter = New SqlDataAdapter() myDataAdapter.SelectCommand = mCommand myDataAdapter.Fill(dsChatRooms)

4.Closes the connection, and returns the DataSet to the calling function:

mConnection.Close()

Return dsChatRooms

Now that you have had a glimpse at how the business and data layers are structured, the next section looks at the client layer (WebForms), and what the real deal is with callbacks in the graphical user interface execution logic.

87

Chapter 3

WebForms

WebForms are standard ASPX pages that contain the client-side and very visible portion of the application. A few WebForms are of particular importance within the project, as noted in the subsequent sections.

SignIn.aspx

The SignIn.aspx file is the first page that loads when the site is accessed. Within this page is the TextBox control used to capture the e-mail address of the user before he or she continues any further in the application. The e-mail address is needed to reference the person who sent the chat messages to the server, assigning a UserID to the e-mail address upon the user’s first message to any of the chat rooms.

Several specific functions from this page are important to mention. The first one is a common event with logic that is somewhat redundant throughout the application’s ASPX pages. This is the page preinitialization event, as shown here:

‘’’ <summary>

‘’’ this preinit event fires to initialize the page. It allows ‘’’ for the theme and title to be set for this page, which ‘’’ actually pulls from the web.config setting via the shared ‘’’ Config class’s exposed properties.

‘’’ </summary>

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit

Page.Theme = Config.CurrentTheme Page.Title = Config.PageTitle

End Sub

The Page.Theme is the theme property of the Page reference. By setting this Theme property to the Config class’s exposed CurrentTheme value, you are assigning a theme at run time. This model of assignment is ideal, because each page can dynamically utilize the theme that is controlled via the Web.config file without requiring any other file changes.

Default.aspx

The obvious area of special interest is the page’s instance of the TreeView control. The control, new in the ASP.NET 2.0 control library, has been completely rewritten from the ground up for the 2.0 version, and boy does it show! It is especially easy to use and very intuitive. Although you can bind a TreeView control to a SiteMapDataSource control and an XmlDataSource control, this instance of the TreeView control does not do either. Instead, it is dynamically loaded on the first loading of the page, from the DataSet returned by the business layer.

The following steps include references to code found within the Default.aspx.vb code-behind file, and walk you through the loading of the TreeView control’s nodes and subnodes with the appropriate category data and chat room data:

1.First, iterate through the chat room DataSet’s rows using the For-Next syntax:

For Each drChatRoom In dtChatRoom.Rows

2.Next, set the variables:

88

Wrox Chat Server

Dim CategoryId As Integer = _

dtChatRoom.Rows(currentRow).Item(“CatID”).ToString()

Dim CategoryName As String = _

dtChatRoom.Rows(currentRow).Item(“CatName”).ToString()

Dim RoomId As Integer = _

dtChatRoom.Rows(currentRow).Item(“RoomID”).ToString()

Dim RoomName As String = _

dtChatRoom.Rows(currentRow).Item(“RoomName”).ToString()

3.Then, the Load event checks for new CategoryId values, adding nodes at this time for all of the categories before even thinking about adding subnodes (that comes in a minute):

If CategoryId <> lastCategoryID Then

TreeView1.Nodes.Add(New TreeNode(CategoryName, CategoryId))

End If

4.Then, increment the currentRow counter and set the lastCategoryID variable to be the value of the current CategoryId variable from the existing loop. This is a sort of flag or temporary variable used to determine when the category column changes between records:

currentRow = currentRow + 1

lastCategoryID = CategoryId

5.Iterate to the next record:

Next

currentRow = 0

6.Now that you have all of the main categories in the TreeView, iterate through each of the nodes:

For Each mNode As TreeNode In TreeView1.Nodes

7.Now, you need to obtain a row-level set of records for each of the nodes. Because each node has a value, and each of the values is a CategoryId, you can find the exact rows you need from the datatable by using the Select method of the datatable object. The following gets a datatable with rows that are under each node’s category:

For Each drChatRoom In dtChatRoom.Select(“CatID=” & mNode.Value) If Not drChatRoom.IsNull(0) Then

Dim RoomId As Integer = _ drChatRoom.Item(“RoomID”).ToString()

Dim RoomName As String = _ drChatRoom.Item(“RoomName”).ToString()

‘add the chat room node under that category

8.Finally, add the new node, for that ChatRoom specifically:

mNode.ChildNodes.Add(New _

TreeNode(“<a href=’chatroom.aspx?chatRoomID=” _ & RoomId.ToString() & “‘>” & RoomName & “</a>”,

RoomId))

End If

Next

Next

89

Chapter 3

Once the TreeView control on the default page is populated with the chat room records in the database, you can click one of the nodes representing a chat room. These nodes are actually hyperlinks, directing the browser to the ChatRoom.aspx page, explained in the following section.

ChatRoom.aspx

The ChatRoom.aspx WebForm is used to house the chat sending functionality of the application. Its goal and purpose are to provide a one-way channel of asynchronous communication to a web site database, within a specific chat room. This is performed via the technology of the new ASP.NET 2.0 Callback method. A look at providing web-based callbacks is explained in detail within the “Wrox Chat Server Design” section earlier in this chapter. The ChatRoom WebForm implements a Callback method to send data to the server, but purposely ignores the response from the server coming back.

Several methods are located within this ASPX file, as well as its code-behind .vb file. These areas are broken down in the following table:

Method	Location	Description
Page_Load()	Chatroom.aspx.vb	Registers an embedded script for the use
		of the Callback Manager middle layer,
		which provides the necessary JavaScript
		on the client.
MyClickEventHandler()	Chatroom.aspx	Calls the built-in Callback Manager’s
		entry point, which is the CallServer()
		method from the button’s Click event.
		This CallServer() method is embedded
		from the code-behind file when it registers
		the client scripts on the Page_Load event.
RaiseCallbackEvent()	Chatroom.aspx.vb	Captures the call from the client and
		processes it on the server, saving the
		message to the chat room (saves it to the
		database).

These methods provide a send-receive event pair, which makes up the main idea of the callback. Data is captured within the ASPX file (via the MyClickEventHandler event) and sent off to the .vb code-behind file (to the RaiseCallbackEvent event). From there it is saved to the database. No response data is actually sent back to the client in this case, although it may be the case in a typical round-trip callback implementation. In such a case, the other methods on the server and client are used, as they are in the ChatWindow.aspx and its code-behind file, ChatWindow.aspx.vb.

The RaiseCallbackEvent contents are shown in the following code. Notice the call to the ChatRoom.SaveMessage function, and how it accepts the ChatRoomID, the text of the message (eventArgument), and the user’s e-mail address:

‘’’ <summary>

‘’’ the RaiseCallbackEvent captures the content from the

‘’’ chat message from the window...

‘’’ </summary>

90

Wrox Chat Server

Public Sub RaiseCallbackEvent(ByVal eventArgument As String) _ Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent

If eventArgument.Length > 0 Then

ChatRoom.SaveMessage(Request.QueryString(“chatRoomID”), _

eventArgument, Session(“Email”))

End If

End Sub

The button and text area in the WebForm are used to process the user input and send it into the entry point for the asynchronous call, through the local custom JavaScript method, entitled MyClickEventHandler(). The MyClickEventHandler() JavaScript event also performs an important role in making this callback work. From here, the text is processed into the locally registered client callback proxy script. It is the first step to making the server call from a browser script. The following code is the contents of the event. The CallServer method is easy to spot, passing in the txtMessage value as a parameter:

function MyClickEventHandler()

{

//call the built-in function ‘callserver()’ on the click event //this CallServer method is embedded from the codebehind file, as //it registers the client script on the load event...

CallServer(document.getElementById(‘txtMessage’).value, null); //clear the message box for the user document.getElementById(‘txtMessage’).value = ‘’;

}

The load event of the page does something very important for using callbacks. It registers the ReceiveServerData event and the CallServer event on the client. These are the main entry and exit points of the Callback Manager layer, which provides the implementation of the asynchronous xmlHttp posts to the server. Even though this WebForm used only the CallServer event in this case, the ReceiveServerData event is registered on the client because it is useful for future troubleshooting and enhancements to the circular page event cycle. Thus, the chat message is sent up to the server with no response back to the client, because it doesn’t necessarily need any response.

This WebForm uses half of the available ASP.NET 2.0 Callback method. That is, it sends the callback data asynchronously, but does not need to capture anything from the callback response. The other file, ChatWindow.aspx, does just the opposite.

The following is the Page_Load event. Notice the registration of the two methods:

‘’’ <summary>

‘’’ the Page_Load event will allow for the necessary callback script to be ‘’’ embedded into the browser’s javascript

‘’’ </summary>

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim cm As ClientScriptManager = Page.ClientScript Dim cbReference As String

cbReference = cm.GetCallbackEventReference(Me, “arg”, _

91

Chapter 3

“ReceiveServerData”, “”)

Dim callbackScript As String = “”

callbackScript &= “function CallServer(arg, context)” & _ “{“ & cbReference & “; }”

cm.RegisterClientScriptBlock(Me.GetType(), “CallServer”, _ callbackScript, True)

‘retrieve an instance of a chat room class by passing in the ‘chat room id as a parameter to the ‘get’ method

Dim mChatRoom As ChatRoom = ChatRoom.Get( _

Request.QueryString(“ChatRoomId”))

‘set the text of the label to the chat room name property Label1.Text = mChatRoom.Name

End Sub

In addition to the registration of the two items above, some specific HTML and ASP.NET controls play a critical role in implementing this callback function. The following represents the main HTML content of the ChatRoom.aspx WebForm:

<iframe src=”ChatWindow.aspx?ChatRoomID=<%=Request.Querystring (“ChatRoomId”) %>”

class=”ChatWindow” scrolling=”no”> </iframe>

<textarea onkeypress=”return EnterKeyCheck(event);” id=”txtMessage” rows=”4” style=”width: 231px”></textarea>

<input type=”button” value=”Send” onclick=”Javascript:MyClickEventHandler()” style=”width: 57px; height: 60px” id=”Button1”/><br />

The iframe HTML tag is used to insert the view into another WebForm, ChatWindow.aspx, which acts as the chat window the user reads messages from. This is because the actual receiving of messages from the server is quite tricky, but is solved by yet another instance of the use of callbacks.

Now the ChatRoom.aspx WebForm has served its purpose in life. Keep reading, and you will see how the ChatWindow WebForm fits into this experience.

ChatWindow.aspx

The ChatWindow.aspx WebForm uses a completely separate callback implementation to display the messages of all users within this chat room. It is not used to accept any user-chatted messages; however, it does accept the ChatRoomID parameter for which it will retrieve records.

Several methods are located within this ASPX file, as well as its code-behind .vb file. These areas are broken down in the following table:

Method	Location	Description
Page_Load()	ChatWindow.aspx.vb	Registers an embedded script for the use
		of the Callback Manager middle layer,
		which provides the necessary JavaScript
		on the client.

92

			Wrox Chat Server
	Method	Location	Description
	ReceiveServerData()	ChatWindow.aspx	Calls the built-in Callback
			Manager’s exit point, which is the
			ReceiveServerData() method. This
			method is embedded from the code-
			behind file when it registers the client
			scripts on the Page_Load event. This
			JavaScript method contains custom logic
			that displays the result of the callback to
			the user.
	GetCallbackResult()	ChatWindow.aspx.vb	Prepares the return string value to be sent
			back to the client. This string value is in
			this case an HTML string full of message
			data for a particular chat room.

These methods provide a send-receive event pair that makes up the main idea of the callback. Data is accepted within the ChatWindow.aspx file (via the QueryString variable) and sent off to the .vb codebehind file (to the GetCallbackResult event). From there it is used to query the database and find all of the messages for that ChatRoomID. The records are prepared as an HTML string and sent back to the client. This process is invoked via the use of a JavaScript timer event, which sends callback requests at intervals of a second or more. Each callback request that is sent will engage an asynchronous call to the server for the retrieval of more message data.

The following code shows the GetCallbackResult contents. Notice the call to the GetMessagesForChatRoom function, and how it accepts the ChatRoomID as a parameter to retrieving the messages from the database. Then, observe as it iterates through the DataSet and generates an HTML string within the local Message variable. The Message variable is eventually returned to the caller as a string value:

‘’’ <summary>

‘’’ the GetCallbackResult function returns the html string ‘’’ as a response back to the browser

‘’’ </summary>

Public Function GetCallbackResult() As String Implements _ System.Web.UI.ICallbackEventHandler.GetCallbackResult

Dim Message As String

Dim ds As DataSet = ChatRoom.GetMessagesForChatRoom( _ Request.QueryString(“chatRoomID”))

For i As Integer = 0 To ds.Tables(0).Rows.Count - 1

Message += “<b>” & ds.Tables(0).Rows(i)(“Email”).ToString() & _ “</b> said: “ & ds.Tables(0).Rows(i)(“Text”).ToString() & “<BR>”

Next

‘send back to the form...

Return Message & “<a name=’bottom’></a><BR>” End Function

93

Chapter 3

The receiving of data within the browser’s JavaScript is a critical part of the work and allows you to update the browser with the result of the callback. Take a look at the ReceiveServerData method, as the divChatWindow is assigned the text value of the callback results:

function ReceiveServerData(arg, context)

{

//send the value to the html control...

var obj = document.getElementById(“divChatWindow”); obj.innerHTML = arg;

location.href = “#bottom”;

}

The load event of the page does something very important for using callbacks. It registers the ReceiveServerData event and the CallServer event on the client. These are the main entry and exit points of the Callback Manager layer, which provides the implementation of the asynchronous xmlHttp posts to the server. In this case (different from the ChatRoom.aspx WebForm previously mentioned), the application needs both calls for it to provide the messages from the database for a particular chat room. The following code displays the Page_Load event. Notice the registration of the two methods:

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim cm As ClientScriptManager = Page.ClientScript Dim cbReference As String

cbReference = cm.GetCallbackEventReference(Me, “arg”, _ “ReceiveServerData”, “”)

Dim callbackScript As String = “”

callbackScript &= “function CallServer(arg, context)” & _ “{“ & cbReference & “; }”

cm.RegisterClientScriptBlock(Me.GetType(), “CallServer”, _ callbackScript, True)

End Sub

You should now understand the basic usage of each intrinsic and available area of the new ASP.NET 2.0 callback feature, how it works, and what the required code configurations are.

This WebForm uses the entire callback process. That is, it sends the callback data asynchronously and captures HTML in a string variable from the server’s callback response.

Thus, the ChatRoomID is received by the server, passed in as a parameter to a stored procedure call, and data is returned via the asynchronous xmlHttp post. This data being returned is then displayed to the user in the browser window via the local JavaScript receive method.

Phew! You made it. Pat yourself on the back as you skim through the user controls section ahead.

User Controls

Some specific user controls in the site assist with the navigation and content display for multiple pages. Because web user controls promote a practice of creating and using reusable code, they were made to be applicable within multiple pages of the site, depending on the nature of the controls.

94

Wrox Chat Server

header.ascx

The header user control is used to provide the top area of each page with meaningful content. If anything needs to reside at or near the top of a web page, you should add it to the header control so it is visible through all of the pages.

The following code represents entire header.ascx source:

<%@ Control Language=”VB” AutoEventWireup=”false” CodeFile=”header.ascx.vb” Inherits=”Controls_header” %>

<div style=”text-align: center”> <table><tr>

<td><img src=”../Images/headerlogo.gif” /></td> <td><h1><% Response.Write(Page.Title) %></h1> </td>

</tr></table>

</div>

Notice that the <%Response.Write(Page.Title)%> tags are used to write back to the response stream a title of the web site on the top of each page, which originated from the Web.config file.

footer.ascx

The footer user control is used as the bottom section of the site, for each page that uses the master page. That is, the footer control, among others, is a referenced control within the master page. In this way, it is propagated to all pages in the same exact manner.

The content of the footer control is displayed here:

<%@ Control Language=”VB” AutoEventWireup=”false” CodeFile=”footer.ascx.vb” Inherits=”Controls_footer” %>

<a href=”http://wrox.com” target=”_blank”>© 2005 Wrox Press</a>    <a href=”SignIn.aspx” target=”_self”>Login</a>

This excerpt includes a few hyperlinks. One is for the Wrox Press web site, and the other is a link to the Login page for the chat application.

navigation.ascx

The navigation user control is used to provide the reusable menu on each page in the site. The Menu itself is a brand new ASP.NET 2.0 control that binds to a SiteMapDataSource control, also new in the 2.0 version of the .NET Framework. The SiteMapDataSource control is used to bind to an XML file, wherein the site files are listed as entries in the XML file. This is where you can change the data that feeds the menu of the site.

The following excerpt is the HTML markup of the navigation control:

<%@ Control Language=”VB” AutoEventWireup=”false” CodeFile=”navigation.ascx.vb” Inherits=”Controls_navigation” %>

<asp:Menu ID=”Menu1” runat=”server” DataSourceID=”SiteMapDataSource1”

Orientation=”Horizontal”

StaticDisplayLevels=”2”></asp:Menu>

<asp:SiteMapDataSource ID=”SiteMapDataSource1” runat=”server” />

95

Chapter 3

The XML file of the SiteMapDataSource control is shown here:

<?xml version=”1.0” encoding=”utf-8” ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0” > <siteMapNode url=”ContentFiles/default.aspx” title=”Home”>

<siteMapNode url=”ContentFiles/about.aspx” title=”About” /> <siteMapNode url=”ContentFiles/contact.aspx” title=”Contact Us” />

</siteMapNode>

</siteMap>

To add a page to the menu of the web site, you must simply copy and paste (with the necessary modifications) an entry of the preceding XML file. In this way, the master page (which contains the only reference to the navigation control) provides visibility to the menu of the site on each page.

The next section explains in detail how to install and configure the source files of the Wrox Chat Server and how to deploy the site to a server in a production environment.

Setting up the Project

The time has come to learn how to install the Wrox Chat Server and see for yourself how quickly you can be up and running with a working resource application. You can install the web site either as a hosted web site application or as a source codebase for editing in Visual Studio 2005 or VWD.

Hosted Web Site Installation

If you want to install the Wrox Chat Server as a hosted web site on a computer or server without customizations or enhancements at all, follow these steps (assuming the .NET Framework 2.0 is already installed):

1.Open the folder Chapter 03 – Wrox Chat Server from the CD-ROM that came with this book and double-click the setup.exe file.

2.This process installs the files properly for hosting the web site locally to C:\inetpub\wwwRoot\ ChatServer as a file-based web site application. Click Next to install the application, and close the installation program when it completes.

3.Then, browse to your local web site (for example, http://localhost/ChatServer). The Wrox Chat Server application should appear.

4.Finally, if you need to expose the site to the outside world, be sure to configure the public IP address to the IIS web site application. The details of this IIS configuration and its implications are outside the scope of this book, but the Wrox Chat Server is easily configurable as a public web site with a brief tutorial on web site hosting.

Local Developer Installation

If you would like to open the project in Visual Studio or Visual Web Developer, perform the following steps (assuming the .NET Framework 2.0 is installed, along with either Visual Studio 2005 or VWD):

96