Building a Simple Web Chat Application Without SignalR
In this article, we'll explore a method to create a simple web chat application without using SignalR, Data Definition Language (DDL) files, or any other third-party codes. The approach involves using ASP.NET features such as DataList, UpdatePanel, Timer Event, and more. The code provided is based on references from various sites and has been modified to meet specific requirements.
Database Setup
Before diving into the application, let's set up the necessary database tables. The application uses two tables, namely ChatterTable and UserTable.
CREATE TABLE ChatterTable
(
ID int,
SenderUser varchar(25),
ReceiverUser varchar(25),
Message nvarchar(max),
Date datetime,
)
CREATE TABLE UserTable
(
ID int,
Username varchar(25),
Password varchar(25),
)
Login Page
To kickstart the application, a login page is required. Below is the HTML markup for the login page:
<table>
<tr>
<td>Username :</td>
<td><asp:TextBox ID="txtUsername" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password :</td>
<td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2"><asp:Button ID="btnLogin" runat="server" Text="Login"></asp:Button></td>
</tr>
</table>
C# Code for Login Button
The C# code handles the login button click event, redirecting the user to the Chatter.aspx page upon successful login.
// btnLogin Click Event
// if Login successfully then redirect to Chatter.aspx Page
Response.Redirect("Chatter.aspx?Username=" + txtUsername.Text.Trim());
Chatter Page
The main chat page utilizes Labels, DataLists, and an UpdatePanel. Here's a snippet of the HTML markup:
<body>
<asp:Label ID="lblUsername" runat="server" Visible="false"></asp:Label>
<asp:DataList ID="DataListLoadUser" runat="server" RepeatDirection="Vertical" Height="1">
<!-- ... -->
</asp:DataList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- ... -->
<asp:DataList ID="DataListChatterPanel" runat="server"></asp:DataList>
<asp:TextBox ID="txtMessage" runat="server" Width="400px" Height="51px"></asp:TextBox>
<asp:Button ID="btnSend" runat="server" Text="Send" OnClick="btnSend_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger Control="btnSend" Event="Click" />
</Triggers>
</asp:UpdatePanel>
</body>
C# Coding
Load UserList in First DataList
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadUsers();
}
}
public void LoadUsers()
{
string Username = Request.QueryString["Username"].ToString();
// ... (Database query to load users into DataListLoadUser)
}
protected void lnkUserChatter_Click(object sender, EventArgs e)
{
// ... (Load chatbox for the selected user)
}
public void LoadChatbox()
{
// ... (Load chat messages into DataListChatterPanel)
}
protected void Timer1_Tick(object sender, EventArgs e)
{
LoadChatbox();
}
Message Send (btnSend)
protected void btnSend_Click(object sender, EventArgs e)
{
// ... (Insert message into ChatterTable)
}
This article provides a comprehensive guide on creating a simple web chat application using ASP.NET features without relying on SignalR or external libraries. Feel free to adapt and enhance the code according to your specific project requirements.
0 Comments