AJAX + ASP.NET 2 + C# 联系我们页面，带进度指示器
2.42/5 (7投票s)
简单的 AJAX + ASP.NET 2 + C# 联系我们页面
引言
使用 ASP.NET 发送电子邮件本身没有什么特别之处。这涉及到任何联系我们网页，你填写所有必要字段并点击提交。然后它会以电子邮件的形式发送（有时也可能存储到数据库中）。在这里，我将创建一个简单的基于 AJAX 的联系我们网页。超过 50% 的网站使用传统方法来实现这一点，当用户点击提交按钮时，它会被重定向到另一个页面或页面会刷新。但实际上这非常不方便。
可以使用 AJAX UpdatePanel 控件很好地处理这个问题。只需创建一个联系我们网页，将你的内容拖放到 UpdatePanel 中即可。就完成了。好的，让我们尝试一下。
背景
你需要，
Microsoft Visual Studio 2005 或 Visual Web Developer
下载 AJAX 并安装
使用代码
你的 HTML 界面代码可能如下所示（根据你的需要进行设计）。我添加了一些 CSS 类。<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>
我添加了一个 ScriptManager 控件。一个网页只能添加一个 ScriptManger。
在 UpdatePanel 中创建你的设计（联系我们页面设计）
为了指示发送进度，在设计之外添加 UpdateProgress 控件
现在检查 .cs 文件（你的 C# 代码）
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);
}
}
首先，你必须导入 using System.Net.Mail; 命名空间。然后定义一个新的 SMTP 电子邮件，并收集用户在你的网页中输入的所有信息。最后将所有信息以电子邮件的形式发送给收件人。没有页面重定向，页面没有刷新。它简单而强大。
//为了实现进度指示器，我使用了这个。如果你在互联网上查看此页面，这是可选的。如果你想检查进度指示器，请将以下行添加到你的网页
System.Threading.Thread.Sleep(2000);
最后，不要忘记配置你的 web.config 文件
<!--
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>
使用 127.0.0.1 作为网络主机（这是用于本地主机）
上传时，请记住更改网络主机
结论
在本文中，我们学习了如何创建启用 AJAX 的联系我们网页。
希望你喜欢这篇文章，祝你编码愉快
关于我
你好，我是 P.W.G.S.Poojanath，来自斯里兰卡。我对软件开发很感兴趣。