7/26/12

Chat Application in AJAX

SIGN UP MEMBER LOGIN: Enter User ID or Email
Ask your question or contribute here...

TECHNOLOGIES

ANSWERS

BLOGS

VIDEOS

INTERVIEWS

BOOKS

LINKS

NEWS PREMIUM SPONSORS

Dyna mi cPDF Devel oper Components Nevron Da ta Vi s ua l i za ti on

Crea te a Di rectory i n C#

C# Corner Search

ARTICLE

Chat Application in AJAX

Pos ted by Da vi n Ma rtyn i n Arti cl es | AJAX i n C# on Ja nua ry 06, 2012 Ta gs : AJAX, AJAX Arti cl es , Cha t Appl i ca ti on, Cha t Appl i ca ti on i n AJAX In thi s a rti cl e we a re goi ng to di s cus s how to crea te a cha t a ppl i ca ti on i n AJAX us i ng ASP.NET.
Tw eet 4 Share 0 Like

TRENDING UP
Crea te a Di rectory i n C# Googl e Announces DART Wi ndows Phone 7.8 Ava i l a bl e Now Devel opi ng XNA Apps i n Vi s ua l Studi o 2012 Connecti ng to a web s ervi ce us i ng Bus i nes s Connecti vi ty Servi ces (BCS) Sha rePoi nt 2010 How to Va l i da te Da ta Wi thi n a Stored Procedure DART Q&A Wha t i s Googl e Now Googl e+ App Announced Googl e Nexus 7 Vi ew Al l

2839

Reader Level:

Introduction Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. AJAX helps us to develop web applications and retrieve small amounts of data from the web server. AJAX consists of a different type of technology. JavaScript XML Asynchronous Call to the server Chat The AJAX Chat Sample shows how to build a browser based chat using ASP .NET and AJAX. ASP.NET AJAX is the easiest and most enjoyable way to start writing asynchronous Web applications using ASP.NET. Step 1 : Open Visual Studio 2010. Go to File->New->WebSite Select ASP.NET Empty WebSite

MOST LIKED ARTICLE

Lea rn .NET i n 60 da ys - Pa rt 1 (13 La bs ) Unders ta ndi ng WCF Bi ndi ngs a nd Cha nnel Sta ck TreeVi ew Control i n C# Web Devel opment 2012: Ga me Cha ngi ng Technol ogi es a nd Tool s From Mi cros oft Si mpl e Us er Logi n i n ASP.NET us i ng C#

HOT KEYWORDS

Step 2 : Go to Solution Explorer and right-click. Select Add->New Item Select WebForm Default.aspx page open

.NET ADO.NET ASP.NET C#

Database Datagrid Design DirectoryServices games GridView jquery LINQ MVC SharePoint Silverlight Silverlight 5 silverlight tutorial Thread try tutorials

VB.NET WCF Windows Forms WPF XML

SPONSORED BY
Hire Developer on Demand Hi re a s oftwa re devel oper a nd cons ul ta nt on dema nd. 100% s a ti s fa cti on. Try for 1 week or Money Ba ck. Loca l a nd remove devel opers a va i l a bl e a l l over USA.

www.c-sharpcorner.com/UploadFile/364074/chat-application-in-ajax/

1/7

7/26/12

Chat Application in AJAX

LATEST JOBS
Appl yi ng for job Metro Styl e App Devel oper .NET Devel oper WPF or Si l verl i ght exp Bos ton MA ASP .Net Devel opers Spl i t Tes ti ng Des i gner .NET Devel oper Web Devel oper Appl i ca ti on Engi neer Expert .NET Devel oper Appl i ca ti on Devel oper Vi ew Al l Jobs | Pos t a New Job

Add Some Chat Control Step 3 : Go to the Default.aspx page and click on the [Design] option and drag control from Toolbox. Drag ScriptManager control, UpdatePanel control, Button, Bulleted List,TextBox Define Trigger for UpdatePanel Step 4 : Go to Default.aspx [Design] option and click on the UpdatePanel. Select Properties option Click on Trigger and define ControlIDand Event Name

WHITEPAPERS AND BOOKS

Step 5 : Write code for UpdatePanel control and define AsyncPostBackTrigger. Code : <asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always"> <ContentTemplate> Chatters<br/> <asp:BulletedList ID="ChattersBulletedList" runat="server" BackColor="#FF8000" /> Chat Text<br/> <div id="ChatText" style="width: 440px; height: 140px; overflow: auto; background-color: #B6E2B7;"> <asp:BulletedList runat="server" ID="ChatMessageList" /> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="SendButton" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" /> </Triggers> </asp:UpdatePanel> Add App_Code Folder Step 6 : Go to Solution Explorer and add App_Code Folder for the Chat.cs and Chatter.cs class files, needed to create our test data.
Worki ng wi th Di rectori es i n C# Fi l eInfo i n C# Progra mmi ng Li s t wi th C# Source Code: Gra phi cs Progra mmi ng wi th GDI+ Progra mmi ng Stri ngs us i ng C# Progra mmi ng Di cti ona ry i n C# Es s enti a l s of Ca pa ci ty Pl a nni ng: Mi cros oft Sha rePoi nt Server 2010 Cha pter 15: Cus tomi zi ng the Di s pl a y Cha pter 9: OpenType Font Support Succes s fi rma ti ons : Thi nk, Revea l , Recei ve Vi ew Al l

www.c-sharpcorner.com/UploadFile/364074/chat-application-in-ajax/

2/7

7/26/12

Chat Application in AJAX

Add Some Chatter Step 7 : Go to Solution Explorer and click on the project. Select Add->NewItem Select GlobalApplication class Global.asax page open Define NameSpace <%@ Import Namespace="System.Collections.Generic" %> This is test only data. Code : <%@ Import Namespace="System.Collections.Generic" %> <%@ Application Language="C#" %> <script runat="server"> void Application_Start(object sender, EventArgs e) { List<Chatter> chatters = new List<Chatter>(); chatters.Add(new Chatter(new Guid("CD863C27-2CEE-45fd-A2E0-A69E62B816B9"), "RAJ")); chatters.Add(new Chatter(Guid.NewGuid(), "Bhavana")); chatters.Add(new Chatter(Guid.NewGuid(), "Amit")); chatters.Add(new Chatter(Guid.NewGuid(), "Deepak")); chatters.Add(new Chatter(Guid.NewGuid(), "Manish")); chatters.Add(new Chatter(Guid.NewGuid(), "Sachin")); chatters.Add(new Chatter(Guid.NewGuid(), "Puja")); Application.Add("Chatters", chatters); List<chate> chats = new List<chate>(); chats.Add(new chate()); Application.Add("Chats", chats); foreach (KeyValuePair<Guid, Chatter> chatter in Chatter.ActiveChatters()) { chatter.Value.Join(chate.ActiveChats()[0]); } } void Application_End(object sender, EventArgs e) { // Code that runs on application shutdown } void Application_Error(object sender, EventArgs e) { // Code that runs when an unhandled error occurs| } void Session_Start(object sender, EventArgs e) { // Code that runs when a new session is started } void Session_End(object sender, EventArgs e) { // Code that runs when a session ends. // Note: The Session_End event is raised only when the sessionstate mode // is set to InProc in the Web.config file. If session mode is set to StateServer // or SQLServer, the event is not raised. }

www.c-sharpcorner.com/UploadFile/364074/chat-application-in-ajax/

3/7

7/26/12
</script>

Chat Application in AJAX

Note : Since we want to simulate a group of Chatters that have logged into our site, we will create a list of Chatter objects within the Application_Start method. Step 8 : Go to Default.aspx.cs and define two private variables, one for our Chatter ("RAJ"), and one for the single Chat instance. Code : using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { private chate m_chat = chate.ActiveChats()[0]; private Chatter m_chatter = Chatter.ActiveChatters()[new Guid("CD863C27-2CEE-45fd-A2E0A69E62B816B9")]; protected void Page_Load(object sender, EventArgs e) { _UpdateChatterList(); _UpdateChatMessageList(); } private void _UpdateChatMessageList() { ChatMessageList.DataSource = m_chat.Messages; ChatMessageList.DataBind(); } private void _UpdateChatterList() { ChattersBulletedList.DataSource = m_chat.Chatters; ChattersBulletedList.DataTextField = "Name"; ChattersBulletedList.DataBind(); } protected void SendButton_Click(object sender, EventArgs e) { if (!string.IsNullOrEmpty(NewMessageTextBox.Text)) { string messageSent = m_chat.SendMessage(m_chatter, NewMessageTextBox.Text); NewMessageTextBox.Text = string.Empty; } _UpdateChatterList(); _UpdateChatMessageList(); } } Step 9 : Go to Default.aspx page option and write a code. Code : <body> <form id="form2" runat="server" style="background-color: #ADC9D1"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always"> <ContentTemplate> Chatters<br/> <asp:BulletedList ID="ChattersBulletedList" runat="server" BackColor="#FF8000" /> Chat Text<br/> <div id="ChatText" style="width: 440px; height: 140px; overflow: auto; background-color: #B6E2B7;"> <asp:BulletedList runat="server" ID="ChatMessageList" /> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="SendButton" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" /> </Triggers> </asp:UpdatePanel> Send Message Text<br/>| <asp:TextBox ID="NewMessageTextBox" Columns="50" runat="server" BackColor="White" /><asp:Button EnableViewState="false" ID="SendButton" Text="Send" runat="server" OnClick="SendButton_Click" /> <asp:Timer runat="server" ID="ChatTextTimer" Interval="1000" /> </form> <script type="text/javascript"> function _SetChatTextScrollPosition() { var chatText = document.getElementById("ChatText"); chatText.scrollTop = chatText.scrollHeight; window.setTimeout("_SetChatTextScrollPosition()", 1); } window.onload = function () {

www.c-sharpcorner.com/UploadFile/364074/chat-application-in-ajax/

4/7

7/26/12
_SetChatTextScrollPosition(); } </script>

Chat Application in AJAX

Step 10 : Go to the Chate.cs class and write a code for the test data. Code : using System; using System.Collections; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Web; /// <summary> /// Summary description for chate /// </summary> public class chate { private Guid m_id; public Guid Id { get { return m_id; } } private List<string> m_messages = new List<string>(); public List<string> Messages { get { return m_messages; } } private List<Chatter> m_chatters = new List<Chatter>(); public List<Chatter> Chatters { get { return m_chatters; } set { m_chatters = value; } } public static ReadOnlyCollection<chate> ActiveChats() { if (HttpContext.Current.Application["Chats"] != null) { List<chate> chats = ((List<chate>)HttpContext.Current.Application["Chats"]); return new ReadOnlyCollection<chate>(chats); } else { return new ReadOnlyCollection<chate>(new List<chate>()); } } public string SendMessage(Chatter chatter, string message) { string messageMask = "{0} @ {1} : {2}"; message = string.Format(messageMask, chatter.Name, DateTime.Now.ToString(), message); m_messages.Add(message); return message; } } Step 11 : Now write the code for the chatter.cs class for the chat application. Code : using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; /// <summary> /// Summary description for Chatter /// </summary> public class Chatter { private Guid m_id; public Guid Id { get { return m_id; } } private string m_name; public string Name { get { return m_name; } } public static Dictionary<Guid, Chatter> ActiveChatters() { Dictionary<Guid, Chatter> retval = new Dictionary<Guid, Chatter>();" if (HttpContext.Current.Application["Chatters"] != null) { List<Chatter> chatters = ((List<Chatter>)HttpContext.Current.Application["Chatters"]); foreach (Chatter chatter in chatters)

www.c-sharpcorner.com/UploadFile/364074/chat-application-in-ajax/

5/7

7/26/12
{ retval.Add(chatter.Id, chatter); } } return retval; }| public void Join(chate chat) { chat.Chatters.Add(this); } public Chatter(Guid id, string name) { m_id = id; m_name = name; } } Step 12 : Now run the application by Pressing F5.

Chat Application in AJAX

Step 13 : Write a message inside the Texbox and click on send button.

Logi n to add your contents and source code to this article

THIS FEATURE IS SPONSORED BY

Dyna mi cPDF Merger i s a devel opers drea m for i ntera cti ng wi th a ny exi s ti ng PDF documents . Merge, a ppend, s pl i t, form fi l l , fl a tten s ta mp a nd s o much more.

UpdatePanelAnimationExtender Control in AJAX

Tags: AJAX, AJAX Arti cl es ,
Upda tePa nel Ani ma ti onExtender, Upda tePa nel Ani ma ti onExtender Control i n AJAX

Tags: AJAX, AJAX Arti cl es , Excepti on ha ndl i ng,

Excepti on ha ndl i ng i n AJAX

Exception Handling in AJAX Using ASP.NET

RELATED ARTICLES
Web Ba s ed Cha t Appl i ca ti on Cha t Server wi th Cl i ent Impl emented wi th C#

www.c-sharpcorner.com/UploadFile/364074/chat-application-in-ajax/

6/7

7/26/12
Cha t Server wi th Cl i ent Impl emented wi th C# Socket Cha t Cha t a ppl i ca ti on i n Expres s i on Bl end Us i ng Si l verl i ght Aja x DropSha dowExtender

Chat Application in AJAX

Cons ol e Ba s ed Cha t AJAX Appl i ca ti on i n ASP.NET Mi ke, Ma tt, a nd Ma hes h from Mi cros oft Summi t MSN Vi deo Cha t Appl i ca ti on

POST COMMENT

Tha nks !

Pos ted by Aka s h Ahl a wa t on Ja n 07, 2012 TOP MEMBERS PHOTOS MOST VIEWED TRENDING NOW TRAINING PRIZES AWARDS BOOK REVIEWS SURVEY CERTIFICATIONS DOWNLOADS

Hosted By CBeyond Cloud Services

TIPS

CONSULTING

STUDENTS

MEMBERS

MEDIA KIT

SUGGEST AN IDEA

PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | REPORT ABUSE 2012 C# Corner. Al l contents a re copyri ght of thei r a uthors .

www.c-sharpcorner.com/UploadFile/364074/chat-application-in-ajax/

7/7