AJAX + ASP.NET 2 + C# Contact us page with Progress indicator

• Download contactus.zip - 21.9 KB

Introduction

There is nothing in sending emails using asp.net.This is going behind any contact us web page where you fill up all the necessary fields and click to submit it. Then it is sending as an email (Sometimes it may stored to the database as well). Here I am going to create simple AJAX based contact us web page. More than 50% of websites uses traditional methods to implement this and when user clicks on the submit button it will be redirected to the another page or page will be refreshed. But really it is very inconvenient.

This can be nicely handled using AJAX UpdatePanel control. Simply create a contact us web page just drag and drop your content in to the UpdatePanel.Thats all.Ok lets try to do this.

Background

You need ,

Microsoft Visual Studio 2005 or Visual Web Developer

Download AJAX and install

Using the code

Your HTML interface code may look like this (Design it as you want).I have added some CSS class also.

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

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

<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel id="Panel1" runat="server" Height="238px" Width="492px" 
    BackColor="#D9D1AD">
    <TABLE style="WIDTH: 474px; HEIGHT: 190px">
        <TBODY>
            <TR>
                <TD style="WIDTH: 187px; HEIGHT: 30px">
                    <asp:Label id="lblTo" runat="server" 
                        Text="To :" CssClass="DownText">
                    </asp:Label>
                </TD>
                <TD style="WIDTH: 118px; HEIGHT: 30px">
                    <asp:TextBox id="txtMailTo" runat="server" Height="20px" 
                        Width="219px" BackColor="White" CssClass="DownText" 
                        ReadOnly="True">email@yourdomain.com</asp:TextBox>
                </TD>
                <TD style="WIDTH: 143px; HEIGHT: 30px">
                    <asp:RequiredFieldValidator 
                        id="RequiredFieldValidator1" runat="server" 
                        ControlToValidate="txtMailTo" ErrorMessage="*">
                    </asp:RequiredFieldValidator>
                </TD>
            </TR>
            <TR>
                <TD style="WIDTH: 187px">
                    <asp:Label id="lblEmail" runat="server" 
                        Text="From : (Your Email)" CssClass="DownText">
                    </asp:Label>
                </TD>
                <TD style="WIDTH: 118px">
                    <asp:TextBox id="txtMailFrom" runat="server" 
                        Height="20px" Width="219px" BackColor="White" 
                        CssClass="DownText">
                    </asp:TextBox>
                </TD>
                <TD style="WIDTH: 143px">
                    <asp:RegularExpressionValidator 
                        id="RegularExpressionValidator1" runat="server" 
                        CssClass="redtext" ControlToValidate="txtMailFrom" 
                        ErrorMessage="*" 
                        ValidationExpression=
                        "\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
                    </asp:RegularExpressionValidator>
                </TD>
            </TR>
            <TR>
                <TD style="WIDTH: 187px">
                    <asp:Label id="lblSubject" runat="server" 
                        Text="Subject :" CssClass="DownText">
                    </asp:Label>
                </TD>
                <TD style="WIDTH: 118px">
                    <asp:TextBox id="txtSubject" runat="server" Height="20px" 
                        Width="219px" BackColor="White" CssClass="DownText">
                    </asp:TextBox>
                </TD>
                <TD style="WIDTH: 143px">
                    <asp:RequiredFieldValidator id="RequiredFieldValidator3" 
                        runat="server" ControlToValidate="txtSubject" 
                        ErrorMessage="*">
                    </asp:RequiredFieldValidator>
                </TD>
            </TR>
            <TR>
                <TD style="WIDTH: 187px; HEIGHT: 64px">
                    <asp:Label id="lblMessage" runat="server" 
                        Text="Message :" CssClass="DownText">
                    </asp:Label>
                </TD>
                <TD style="WIDTH: 118px; HEIGHT: 64px">
                    <asp:TextBox id="txtMessage" runat="server" Height="54px" 
                        Width="219px" BackColor="White" CssClass="DownText" 
                        TextMode="MultiLine">
                    </asp:TextBox>
                </TD>
                <TD style="WIDTH: 143px; HEIGHT: 64px">
                    <asp:RequiredFieldValidator id="RequiredFieldValidator2" 
                        runat="server" ControlToValidate="txtMessage" 
                        ErrorMessage="*">
                    </asp:RequiredFieldValidator>
                </TD>
            </TR>
            <TR>
                <TD style="WIDTH: 187px">
                </TD>
                <TD style="WIDTH: 118px">
                </TD>
                <TD style="WIDTH: 143px">
                </TD>
            </TR>
            <TR>
                <TD style="WIDTH: 187px; HEIGHT: 61px">
                </TD>
                <TD style="WIDTH: 118px; HEIGHT: 61px">
                   <TABLE style="WIDTH: 162px; HEIGHT: 38px">
                       <TBODY>
                           <TR>
                               <TD style="WIDTH: 100px; HEIGHT: 34px">
                                   <asp:Button id="btnSubmit" 
                                       onclick="btnSubmit_Click" 
                                       runat="server" Text="Submit" 
                                       CssClass="DownText">
                                   </asp:Button>
                               </TD>
                               <TD style="WIDTH: 100px; HEIGHT: 34px">
                                   <asp:Button id="btnClear" 
                                       onclick="btnClear_Click" runat="server"
                                       Text="Clear" CssClass="DownText">
                                   </asp:Button>
                               </TD>
                               <TD style="WIDTH: 100px; HEIGHT: 34px">
                                   <asp:Image id="imgDisplay" runat="server" 
                                       Height="30px" Width="30px">
                                   </asp:Image>
                               </TD>
                           </TR>
                       </TBODY>
                   </TABLE>
                   <asp:UpdateProgress id="UpdateProgress1" runat="server">
                       <ProgressTemplate>
                           <div class="RedText">
                               <img src="Images/indicator.gif" />
                               Sending....
                           </div>
                       </ProgressTemplate>
                   </asp:UpdateProgress> 
               </TD>
               <TD style="WIDTH: 143px; HEIGHT: 61px">
               </TD>
           </TR>
       </TBODY>
   </TABLE>
</asp:Panel> 
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

I have added a ScriptManager control. You can add only one ScriptManger for one webpage

Within the UpdatePanel create your design (Contact us page design)

To indicate the sending progress add UpdateProgress control out of the design

Now check the .cs file (your C# code)

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Net.Mail;


public partial class Contacts : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

imgDisplay.Visible = false;
}
protected void btnClear_Click(object sender, EventArgs e)
{
// Clear all the fields
txtMailTo.Text = "";
txtMailFrom.Text = "";
txtSubject.Text = "";
txtMessage.Text = "";
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
// No need to check whether or not all the fields are empty using
//script. Because already check using regular expressions

// I have used try catch block to send email to the destination

try
{
// Define new mailmessage
MailMessage mMailMessage = new MailMessage();

// assign from address
mMailMessage.From = new MailAddress(txtMailFrom.Text);

// assign to address
mMailMessage.To.Add(new MailAddress(txtMailTo.Text));

//set subject
mMailMessage.Subject = txtSubject.Text;

//set email body
mMailMessage.Body = txtMessage.Text;

// check email type HTML or NOT
mMailMessage.IsBodyHtml = false;

// define new SMTP mail client
SmtpClient mSmtpClient = new SmtpClient();

//send email using defined SMTP client
mSmtpClient.Send(mMailMessage);

// display result to sender
imgDisplay.Visible = true;
imgDisplay.ImageUrl = "images/done.jpg";

}
catch
{
// display ERROR message to sender
imgDisplay.Visible = true;
imgDisplay.ImageUrl = "images/error.jpg";

}

//To implement progress indicator I have used this. 
//If you are view this in internet this is optional
System.Threading.Thread.Sleep(2000);
}
} 

first off you must import using System.Net.Mail; namespace. Then define new SMTP email and collect all the information user entered in your webpage. Finally send all the information to recipient as an email. No page redirection ,page is not refreshing .It is simple and powerful.

//To implement progress indicator I have used this. If you are view this in internet this is optional. If you want to check Progress Indicator add following line to your webpage

System.Threading.Thread.Sleep(2000);

Finally don't forget to configure your web.config file

<!--

Set configuration to send email using System.Net.Mail();

-->

<system.net>

<mailSettings>

<smtp from="RECIEPIENT-EMAIL-ADDRESS-GOES-HERE">

<network host="127.0.0.1" port="25" userName="" password=""/>

</smtp>

</mailSettings>

</system.net>

Use 127.0.0.1 as network host (this is for localhost)

When you upload keep in mind to change the network host

Conclusion

In this article we learned how to create AJAX enable contact us webpage.

I hope you liked the article, happy coding

About Me

Hi,I am P.W.G.S.Poojanath,from Sri Lanka.I am interesting in Software development.