ASP.NET - Pop up window using AJAX in ASP.NET

Logged In users only can post the comment..
Login control is implemented in ASCX file.
Once the user logged in Successfully the user control event get fired in the Login ControlASCX page which is subscribed in the parent ASPX page.

Following are the screen shots for login control page and aspx page.

http://deepumi.files.wordpress.com/2010/03/login.jpg

http://deepumi.files.wordpress.com/2010/03/messageform.jpg

For more information about the user control event bubbling please visit the following links

http://asp.net-tutorials.com/user-controls/events/

http://codebetter.com/blogs/brendan.tompkins/archive/2004/10/06/Easily-Raise-Events-From-ASP.NET-ASCX-User-Controls.aspx

http://odetocode.com/code/94.aspx

Create a new ASCX  file called PopupLoginControl.ascx and copy paste the following markup tags.

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajaxtoolkit” %>

<asp:Button ID=”btnShowPopup” runat=”server” Style=”display: none” />

<ajaxtoolkit:ModalPopupExtender BackgroundCssClass=”modalBackground”
CancelControlID=”btnClose” runat=”server” PopupControlID=”Panel1″ ID=”ModalPopupExtender1″
TargetControlID=”btnShowPopup” />

<asp:Panel ID=”Panel1″ runat=”server” CssClass=”modalPopup” DefaultButton=”btnOk”>
<table width=”100%” border=”0″ cellpadding=”2″ cellspacing=”5″>
<tr>
<td style=”width:35%;padding-top:50px;”>
</td>
<td>
<asp:Label id=”labMsg” runat=”server” />
</td>
</tr>
<tr>
<td align=”right” valign=”middle”>
<strong>Email Id :</strong>
</td>
<td>
&nbsp;<asp:TextBox ID=”txtLogin” runat=”server”></asp:TextBox>
</td>
</tr>
<tr>
<td align=”right” valign=”middle”>
<strong>Password :</strong>
</td>
<td>
&nbsp;<asp:TextBox ID=”txtPassword” runat=”server” TextMode=”Password”></asp:TextBox>
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:Button ID=”btnOk” OnClick=”Login” runat=”server” Text=”Sign In” />
<asp:Button ID=”btnClose” runat=”server” Text=”Cancel” />
</td>
</tr>
</table>
</asp:Panel>

PopupLoginControl.ascx.Cs

 public event EventHandler LoginStatus;
 bool status;

 public Boolean IsLogin
 {
 get { return status; }
 }
 protected void Page_Load(object sender, EventArgs e)
 {

 }
 protected void Login(object sender, EventArgs e)
 {
 labMsg.Text = string.Empty;

 ModalPopupExtender1.Show(); //show pop up window

 if (LoginStatus != null)
 {
 if (txtLogin.Text.Equals("admin") && txtPassword.Text.Equals("admin"))
 {
 status = true;

 LoginStatus(this, EventArgs.Empty); //event get fired here.

 ModalPopupExtender1.Hide(); //hide pop up window once the user logged in successfully.
 }
 else
 {
 labMsg.Text = "<font color=red>Sorry user name and password could not find</font>";
 }
 }
 }
 public void EnableModelDialog(bool visibility)
 {
 if (visibility)
 {
 ModalPopupExtender1.Show();
 }
 else
 {
 ModalPopupExtender1.Hide();
 }
 }

LoginTest.aspx page(Markup)

<%@ Register Src=”PopupLoginControl.ascx” TagName=”PopupLoginControl” TagPrefix=”uc1″ %>

<style type=”text/css”>
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalPopup
{
background-color: White;
height: 250px;
width:500px;
text-align:left;
}
</style>

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”Scriptmanager1″ runat=”server” />

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>

<ContentTemplate>

<asp:LinkButton ID=”lnkWriteMessage” runat=”server” OnClick=”ShowMessage”>Write Comments</asp:LinkButton>

<uc1:PopupLoginControl ID=”PopupLoginControl1″ OnLoginStatus=”PopupLoginCntl_Completed”
Visible=”false” runat=”server” />

<asp:Panel ID=”divComments” Visible=”false” runat=”server”>

<table width=”50%”>
<tr>
<td>
<textarea id=”txtComments” rows=”10″ cols=”60″></textarea>
</td>
</tr>
<tr>
<td>
<asp:Button id=”btnSave” runat=”server” Text=” Save ” onclick=”btnSave_Click” />
</td>
</tr>
</table>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</form>

LoginTest.aspx page(CSharp)

protected void ShowMessage(object sender, EventArgs e)
 {
 PopupLoginControl1.Visible = true;
 PopupLoginControl1.EnableModelDialog(true);
 }

//method get called when the usercontrol event get fired
 protected void PopupLoginCntl_Completed(object sender, EventArgs e)
 {
 if (PopupLoginControl1.IsLogin)
 {
 divComments.Visible = true;
 }
 else
 {
 divComments.Visible = false;
 }
 }

 protected void btnSave_Click(object sender, EventArgs e)
 {
//save your comments here.
 }

For more information about the user control event bubbling please visit the following links

http://asp.net-tutorials.com/user-controls/events/

http://codebetter.com/blogs/brendan.tompkins/archive/2004/10/06/Easily-Raise-Events-From-ASP.NET-ASCX-User-Controls.aspx

http://odetocode.com/code/94.aspx

Hope this help and If you have any comments, please feel free to write your feedback.

http://www.4shared.com/file/245044652/c1777187/AjaxModelExtender.html or copy paste the URL

http://www.4shared.com/file/245044652/c1777187/AjaxModelExtender.html