This article describes an All-In-One framework sample that is available for download. This code sample demonstrates a step-by-step guide that illustrates how to create a web chat application by using ASP.NET AJAX. You can get the sample package from the download icons below.
To download this code sample, click one of the following links:
You should have some experience in chatting with friends on the web. You may think it is complicated to develop a web chat application. However, ASP.NET provides an easy and accessible way to do it. The technical overview introduces how to construct a web chat room by using AJAX.
The principle controls needed to construct a web chat room by using AJAX are not that complicated. As you know, a web chat application needs the following four basic controls:
A list control that is used to show the list of chat room members.
A list control that is used to show the list of chat messages.
A text box control that is used to input messages.
A button that is used to send a message.
Users input a message in the text box, and then they press the Send button. In this situation, the message is sent to the server. The message list is updated every two seconds to get the newest messages in the chat room from the server.
It is difficult to make an AJAX web chat application that behaves the same way as a Windows Form application, because you cannot maintain a continuous connection with the server. Therefore, a lot of events that could be immediately communicated between a client and server cannot be realized. The common workaround is to make the web chat application send a request every few seconds to check for server-side updates.
This code sample is separated into 4 sections:
The Data section. For example, LINQ to SQL.
The Service section. For example, the WCF service.
The Logic section. For example, the classes that are used for the service and that communicate data.
The User interface (UI) section. For example, pages and client scripts.
Download the sample code and follow these steps to get started developing a web chat application.
Create an ASP.NET web application.
Create a database file. For example, you can create an .mdf file.
Open the database file and create the following four tables:
stores chat room data
stores the chat message data temporarily
stores the user session data
stores the active user data
Note For more information about how to design these tables, follow the sample code that you downloaded.
Add LINQ to an SQL file. For example, you can add LINQ to a .dbml SQL file. Drag and drop the tables into the stage of the file in the Visual Studio IDE.
Create the following class files:
In the code sample, there are some static methods to control the data in the database by using LINQ.
It is a DataContract that is used to send the chat room data to the client by using the WCF service.
It is a DataContract that is used to send the message data to the client by using the WCF service.
It is a DataContract that is used to send the talker data in a chat room to the client by using the WCF service.
NoteFor more information about how to design these classes, follow the sample code that you downloaded.
Add an AJAX-enabled WCF service.
Csaspnetajaxwebchat is the namespace for this application.
Transition is the service name.
SuccessCallBack is a function that is called when the service is called successfully.
FailCallBack is a function that is called when the service call fails.
For more information about these script functions, refer to the chatbox.js, chatMessage.js, and chatRoom.js files in this code sample.
Open the Default.aspx page. If there is no Default.aspx page, you need to create one. Create a ScriptManager control, and then insert the following code to add a service reference and a script reference:
These references will improve the look of the sample code. There are some additional UI markup definitions that are referenced in the Default.aspx page in this code sample.
Note For more details about Microsoft Ajax CDN, click the link in the “References” section.
Create a new web page. In this code sample, the new web page is the ChatBox.aspx page. In the ChatBox.aspx page, some UI controls are created to send and receive messages.
Note For more information about the ChatBox.aspx page, see the ChatBox.aspx page in this code sample.
You are now ready to test the application.
Microsoft ASP.NET 3.5
Microsoft ASP.NET 4
This code sample contains the following programming languages:
To run this sample code, you must have the Microsoft .NET Framework installed.
What is All-In-One Code Framework?
All-In-One Code Framework shows most Microsoft development techniques by using code samples in different programming languages. Each example is carefully selected, composed, and documented to show one common code scenario. For more information about All-In-One Code Framework, visit the following Microsoft website:
Microsoft corporation and/or its respective suppliers make no representations about the suitability, reliability, or accuracy of the information and related graphics contained herein. All such information and related graphics are provided "as is" without warranty of any kind. Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information and related graphics, including all implied warranties and conditions of merchantability, fitness for a particular purpose, workmanlike effort, title and non-infringement. You specifically agree that in no event shall Microsoft and/or its suppliers be liable for any direct, indirect, punitive, incidental, special, consequential damages or any damages whatsoever including, without limitation, damages for loss of use, data or profits, arising out of or in any way connected with the use of or inability to use the information and related graphics contained herein, whether based on contract, tort, negligence, strict liability or otherwise, even if Microsoft or any of its suppliers has been advised of the possibility of damages.