Home > Ajax, Asp.Net, C# > Asp.Net 3.5 Ajax Modal Popup Extender with User Control Event Bubbling

Asp.Net 3.5 Ajax Modal Popup Extender with User Control Event Bubbling


I had a requirement to implement login control in a pop up window using Ajax Modal Popup extender. In this article I am discussing how to implement Usercontrol event bubbling (ie subscribe the user control event  in the parent page)  and the AjaxModal popup extender.

You can download the entire article from here

For more information about Ajax Model Popup Extender please visit http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx

If you find the Ajax Modal Popup code library useful, please consider donating



Scenario

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 Control ASCX page which is subscribed in the parent ASPX page.

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

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.

You can download the entire article from here or copy paste the URL

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

If you find the Ajax Modal Popup code library useful, please consider donating


Thanks
Deepu

About these ads
  1. June 26, 2010 at 3:10 pm

    this artical is very useful for me.Thank so much.

  2. Frank
    July 13, 2010 at 1:26 pm

    The perfect article: It is simple, to the point, and I learned something. Many thanks!

  3. khushbu
    July 21, 2010 at 1:39 pm

    its good

  4. August 14, 2010 at 4:38 am

    vere niceeeeeee

  5. Ganesan
    August 26, 2010 at 9:45 am

    User Control Page is Accessed not properly

    • August 26, 2010 at 2:43 pm

      The code which I provided is a working one…
      Did you change the usercontrol class name ?

      Thanks
      Deepu

  6. September 28, 2010 at 9:14 am

    Thanks for providing me this site.By this we are using the deficient information. really its a great article with simple method.

  7. Jordi
    November 4, 2010 at 4:45 pm

    Thank you very much. It has helped me a lot with my ‘customer selector’. I had found an implementation for VB and had translated into C# and delegates. But it is much more easy directly in C#.
    In my case, I’ve inserted a GridView in the modal popup with filter and paging capabilities and when the user selects one, the parent page does the work with the selected ID. Thank you again.

  8. referee
    December 6, 2010 at 4:21 pm

    if i open window and the again do this operation
    at page will duplicate same code:
    Sys.Application.add_init(function() {
    2 $create(AjaxControlToolkit.ModalPopupBehavior, {“BackgroundCssClass”:”modalBackground”,”CancelControlID”:”PopupLoginControl1_btnClose”,”PopupControlID”:”PopupLoginControl1_Panel1″,”dynamicServicePath”:”/AjaxModelExtender/LoginTest.aspx”,”id”:”PopupLoginControl1_ModalPopupExtender1″}, null, null, $get(“PopupLoginControl1_btnShowPopup”));
    3});

    how fix this?

    • December 8, 2010 at 2:20 am

      Can you send me the code..

      Thanks
      Deepu

  9. July 27, 2011 at 12:05 pm

    Thank you very much. It has helped me a lot with my ‘customer selector’. I had found an implementation for VB and had translated into C# and delegates. But it is much more easy directly in C#.
    In my case, I’ve inserted a GridView in the modal popup with filter and paging capabilities and when the user selects one, the parent page does the work with the selected ID. Thank you again.

  10. s
    November 16, 2011 at 11:09 am

    this is good for devloper

  11. s
    November 16, 2011 at 12:23 pm

    Thank you very much. It has helped me a lot with my ‘customer selector’. I had found an implementation for VB and had translated into C# and delegates. But it is much more easy directly in C#.
    In my case, I’ve inserted a GridView in the modal popup with filter and paging capabilities and when the user selects one, the parent page does the work with the selected ID. Thank you again.

  12. Pravesh Singh
    December 30, 2011 at 9:11 pm

    This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url…

    http://mindstick.com/Articles/e963d60f-c06e-4cde-a135-05d5204ea50e/?Ajax%20Toolkit%20ModalPopupExtender%20Control%20in%20ASP.Net

    Thanks

  13. nirav
    December 31, 2011 at 9:59 pm

    how to get popuplogincontrol ?

    • January 1, 2012 at 8:57 pm

      If you follow the article..you will understand.. or please try the sample mentioned in the blog

      Thanks
      Deepu

  14. Sumawigena
    May 14, 2012 at 8:06 am

    Good works !

    Thanks a lot

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 29 other followers

%d bloggers like this: