Ethan's .NET Development Blog: Sending email using modalpopupextender.

I recently worked on a project where i displayed a list of members using the listview control to display information about the member and a send email link, so instead of having the user to go to another page to send the email then go back to the list of members i decided to implement the ajax modalpopupextender for a better user experience. But for simplicity I am going to show you how to implement the modalpopupextender using a link on simple page. I also included validation and success message which will also be displayed as a modal message that will close after 4 seconds...K, let's get down to it.

Step 1:
Add a script manager to the page right under the form tag.

<body>

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

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

</asp:ScriptManager>

Step 2:
Create the form where we want the user to fill out info and click send email. This step is simple, we just create a table with some rows and columns and add labels and textboxes for the user input such as name subject from email and comments.
Once we have created the form we put a panel around it and set the display property to "None". That way we wont see the form on page load.
We also need to add 2 buttons to this form, btnSendEmail and btnCancel. Add the OnClick event to btnSendEmail...this is where the magic happens and this is excecute on server. BtnCancel is already taken care of by the modalpopupextender, so we dont need any events for this.

<asp:Panel ID="emailPanel" runat="server" Style="display: none" Width="600px" Font-Names="@MS PGothic">

<table border="12" cellpadding="1" cellspacing="0" style="border-style: solid; width: 600px;

heigh: 400px; border-color: #333333; background-color: #ffffff;">

<tr>

<td>

<asp:ValidationSummary ID="ValidationSummary1" ValidationGroup="SendEmail" runat="server" />

<table>

<tr>

<td>

<asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label>

</td>

<td>

<asp:TextBox ID="txtSubject" Width="290px" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>

</td>

<td>

<asp:TextBox ID="txtName" Width="290px" runat="server" />

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Display="none" runat="server"

ControlToValidate="txtName" ErrorMessage="Please enter your name." ValidationGroup="SendEmail"></asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblEmail" runat="server" Text="From"></asp:Label>

</td>

<td>

<asp:TextBox ID="txtEmail" Width="290px" runat="server" />

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="none" runat="server"

ControlToValidate="txtEmail" ValidationGroup="SendEmail" ErrorMessage="Please enter your email address."></asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="Please enter a valid email address."

Display="none" ValidationGroup="SendEmail" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</asp:RegularExpressionValidator>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblComments" runat="server" Text="Comments"></asp:Label>

</td>

<td>

<asp:TextBox ID="txtComments" TextMode="MultiLine" Width="450px" Height="190px" runat="server" />

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" Display="none" runat="server"

ControlToValidate="txtComments" ValidationGroup="SendEmail" ErrorMessage="Please enter comments."></asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td align="right">

</td>

<td align="right">

<asp:Button ID="btnSendEmail" runat="server" Text="Send Email" ValidationGroup="SendEmail" OnClick="Admin_SendEmail" />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

step 4:
We add another panel for the success message and another modalpopupextender that will popup this panel.
step 5:
Now we add a linkbutton to the page, this is what we are going to see where the page loads. Something like Click Here to Send Email.

<asp:LinkButton ID="lbSendEmail" runat="server" OnClientClick="return false;">Send Email</asp:LinkButton>

Step 6:
Write the javacript that will handle showing the modalpopupextender an hide it and also display the success messsage and get it to close automatically.

function showPopup() {

var modalPopupBehavior = $find('mpeSendEmailBehavior');

modalPopupBehavior.show();

function hidepopup() {

var modalPopupBehavior = $find('mpeSendEmailBehavior');

modalPopupBehavior.hide();

function showEmailSuccessPopup() {

var modalPopupBehavior = $find('EmailSuccessBehavior');

modalPopupBehavior.show();

function hideEmailSuccessPopup() {

var modalPopupBehavior = $find('EmailSuccessBehavior');

modalPopupBehavior.hide();

function pageLoad() {

$addHandler($get("lbSendEmail"), 'click', showPopup);

setTimeout("hideEmailSuccessPopup()", 4000);

Last Step:
Now our aspx page is ready all we need is add links to CSS and javascript. and write code to send email and display success message.
If you have any question or comments let me know.

Ethan's .NET Development Blog

Saturday, November 28, 2009

Sending email using modalpopupextender.

No comments:

Post a Comment