Developing a Mini ASP.NET AJAX Server Centric Based Chat Application - HTML Code

(Page 4 of 5 )

The following lists the key HTML markup code of the login.aspx page:

<form id="form1" runat="server">

<div style="text-align: center">

<span style="font-size: 14pt; color: #3300ff"><strong>

<br />

FIRST LOGIN, THEN CHAT!<br />

</strong></span>

<br />

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<br />

<table width="400" cellpadding="0" cellspacing="2" align="center" border="0">

<tbody>

<tr>

<td>

&nbsp; &nbsp; &nbsp; &nbsp;User Name:</td>

<td>

<asp:TextBox runat="server" ID="txtUserName" /></td>

</tr>

<tr>

<td>

&nbsp; &nbsp; &nbsp; &nbsp;Password:</td>

<td>

<asp:TextBox runat="server" ID="txtPassword" TextMode="Password" />

<br />

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtPassword"

ErrorMessage="The password cannot be empty" Display="Dynamic"></asp:RequiredFieldValidator></td>

</tr>

<tr>

<td>

&nbsp; &nbsp; Input your password again:</td>

<td>

<asp:TextBox runat="server" ID="txtRetypePwd" TextMode="Password" />

<br />

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtRetypePwd"

ErrorMessage="The reentered password cannot be empty" Display="Dynamic"></asp:RequiredFieldValidator>

<br />

<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPassword"

ControlToValidate="txtRetypePwd" ErrorMessage="The two passwords must be the same" Display="Dynamic"></asp:CompareValidator></td>

</tr>

</tbody>

</table>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate>

<div class="loading">

Verifying the logging in info......</div>

</ProgressTemplate>

</asp:UpdateProgress>

<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label runat="server" ID="lblMessage" />

<br />

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />

</ContentTemplate>

</asp:UpdatePanel>

&nbsp;&nbsp;

<ul>

<li style="text-align: center">If it's the first time that you log in , then you can enter any temporary password to enter the chat lobby.</li><li style="text-align: center">

If you've logged into the system and not been overdue, just enter your temporary password to

reenter.</li></ul>

</div>

</form>

As is shown above, when the "login" button is clicked, its related click event handler is triggered to perform the register and logging in operations. This is implemented in the following code:

protected void btnLogin_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(3000);

string userName = this.txtUserName.Text.Trim();//username

string password = this.txtPassword.Text.Trim();//password

string retypePwd = this.txtRetypePwd.Text.Trim();//reentered password

//The user are in the chatting room, but the password just entered is incorrect

if (Room.Instance.UserIsChatting(userName)&&Room.Instance.GetUser(userName).Password != password)

{

this.lblMessage.Text = "Please enter the right password";

}

else//login successfully

{

if (!Room.Instance.UserIsChatting(userName))//The entered username is not chatting

{

Room.Instance.AddUser(userName, password);//add the user

//send out a system message

Room.Instance.SendMessage(String.Format("{0} Enters the chatting room", userName));

}

Room.Instance.GetUser(userName).Update();

FormsAuthentication.RedirectFromLoginPage(userName, false);

}

}

First, check the chat room to see whether the user exists or not. If so, then continue to verify the password. Moreover, if the password is valid, logging in is successful; otherwise, the user is required to re-enter his password. If the current user does not reside in the chat room, then he is joined to the system, and after that, he is allowed to enter the chat room.

Note that to gain a clear impression of the prompt effect when the system is loading, we purposely let the system sleep three seconds.

Next, let us take a look at the main chat Default.aspx page information.

Next: Designing the Default.aspx Page >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Developing a Mini ASP.NET AJAX Server Centric Based Chat Application

· bisedochat   >>> Post your comment now!