How To Send Email With Attachment in ASP.Net Web Pages 2

Introduction

Today we'll learn to send an Email from a website using WebMatrix in ASP.NET Web Pages 2. You can also send an email with an attachment of the file using this article.

Brief

There are many types of scenarios in which you might need to send an email from the website. In that case the WebMail helper is used to send the email to the users. If you are authorized to access the SMTP server then you can use WebMail. The (Simple Mail Transfer Protocol (SMTP) Server is an email server that only forwards messages to the recipient's server; it's the outbound side of email. If you are working on a network, then you can get the SMTP server from the administrator of the IT department. If you are trying to send the email when working at home then you might even be able to test using the ordinary email provider.

There are the following points that are useful:

SMTP Server name
Port number. Usually the port number is 25 or may be 587. In the case of Secure Socket Layer (SSL) for email, contact the administrator.
User Credentials

So, let's proceed with the following sections:

Create an Email Page
Working with Email Process
Email with File Attachment
Working with Email Attachment

Note: Have a look at Create Website in WebMatrix using ASP.NET Web Pages 2.

Create an Email Page

As the caption describes, we'll create a page with which we can send the email. Use the following procedure to do that.

Step 1: Create a new "CSHTML" page named EmailPage.

Step 2: Replace the code with the code below:

@{
Layout = "~/_LayoutPage.cshtml";
Page.Title = "Emailing";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<form method="post" action="ProcessEmail.cshtml">
<table>
<tr>
<td>Your Name:</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td>To:</td>
<td><input type="text" name="UserEmail" /></td>
</tr>
<tr>
<td>Message:</td>
<td><textarea name="UserMessage" cols="35" rows="4"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Send" /></td>
</tr>
</table>
</form>
</body>
</html>

In the code above, the page layout is set to the Layout page that is used to set the layout of this current page in the code block. The action attribute is used in the form that is set to the ProcessEmail page which means that the form will be submitted to that page instead of back to the current page.

Step 3: Now run the page, it will look like this:

Email Page in WebMatrix

Working with Email Process

In this section, we'll create a ProcessEmail page in which we add the code to send the email. Use the following procedure to do that.

Step 1: Create a new "CSHTML" page named ProcessEmail.

Step 2: Replace the code with the code below:

@{
Layout = "~/_LayoutPage.cshtml";
Page.Title = "Emailing";
var Name = Request["Name"];
var UserEmail = Request["UserEmail"];
var UserMessage = Request["UserMessage"];
var errormsg="";
var debuggingflag=false;
try{
WebMail.SmtpServer = "Your-smtp-server-name";
WebMail.SmtpPort= 25;
WebMail.EnableSsl = true;
WebMail.UserName = "Your-UserName";
WebMail.Password = "Your-Password";
WebMail.From = "Your-Email-Address";
WebMail.Send(to: UserEmail,
subject: "Hello: "+ Name,
body: UserMessage
);
}
catch(Exception ex){
errormsg = ex.Message;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Dear <b>@Name</b>.</p>
@if(errormsg == ""){
<p>An email message has been sent to @UserEmail. Please check your email. It has the following message:</p>
<p>@UserMessage</p>
}
else{
<p><b>The email was <em>not</em> sent.</b></p>
<p>Please check that the code in the ProcessEmail page has
correct settings for the SMTP server name, a user name,
a password, and a "from" address.
</p>
if(debuggingflag){
<p>The following error was occured:</p>
<p><em>@errormsg</em></p>
}
}
</body>
</html>

In the code above, the WebMail helper is used to create and send the email to the user. The try/catch block is used here in case of any exception. If any exception occurs then the catch block runs and sets the errormsg variable to the error that has occurred.

Note: You need to modify the following email related settings:

Add the SMTP-Server-Name like "smtp.gmail.com".
Add the user-name to the name for your SMTP Server account.
Add the password of your SMTP Server account.
Add the email-address with which the email is sent from.

Step 3: Run the Email Page again and enter the details.

Email Page with Details in WebMatrix

You can see in the following screenshot that the mail has been sent and the next page opens with the confirmation and email message.

Email Message in WebMatrix

Email with File Attachment

Now in this section we'll send the email with the attachment of the text file. Use the following procedure to do that.

Step 1: Add the Text file to the website named SampleFile.

Adding Text File in WebMatrix

Step 2: Add the following text in that file:

Hello this is the sample file that is used to attach with the email. Thanks.

Note: You can add your own text also.

Step 3: Add the new CSHTML page named EmailWithAttachment.

Step 4: Replace the code with the code below:

@{
Layout = "~/_LayoutPage.cshtml";
Page.Title = "Emailing with File Attachment";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<form method="post" action="EmailProcessAttachment.cshtml">
<table>
<tr>
<td>Your Name:</td>
<td><input type="text" name="UserName" /></td>
</tr>
<tr>
<td>To:</td>
<td><input type="text" name="UserEmail" /></td>
</tr>
<tr>
<td>Subject:</td>
<td><input type="text" size="20" name="EmailSubject" /></td>
</tr>
<tr>
<td>File to Attach:</td>
<td><input type="text" name="AttachedFile" size="20" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Send" /></td>
</tr>
</table>
</form>
</body>
</html>

Step 5: Run the page and it'll look like this:

Email Page with Attachment in WebMatrix

Working with Email Attachment

In this section we'll create the page in which we add the code to send the email with the file attachment. Use the following procedure to do that.

Step 1: Create another CSHTML page named EmailProcessAttachment.

Step 2: Replace the code with the code below:

@{
Layout = "~/_LayoutPage.cshtml";
Page.Title = "Emailing with File Attachment";
var Name = Request["UserName"];
var Email = Request["UserEmail"];
var EmailSubject = Request["EmailSubject"];
var AttachedFile = Request["AttachedFile"];
var errormsg = "";
var debuggingflag = false;
try{
WebMail.SmtpServer = "Your-smtp-server-name";
WebMail.SmtpPort= 25;
WebMail.EnableSsl = true;
WebMail.UserName = "Your-User-Name";
WebMail.Password = "Your-Password";
WebMail.From = "Your-Email-Address";
var attachfile = new string[] {AttachedFile};
WebMail.Send(to: Email,
subject: EmailSubject,
body: "The File is attached from:" + Name,
filesToAttach: attachfile
);
}
catch(Exception ex){
errormsg = ex.Message;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Dear <b>@Name</b>.</p>
@if(errormsg == ""){
<p>An email message has been sent to @Email. Please check your email. It has the following attached file:</p>
<p>@AttachedFile</p>
}
else{
<p><b>The email was <em>not</em> sent.</b></p>
<p>Please check that the code in the EmailProcessAttachment page has
correct settings for the SMTP server name, a user name,
a password, and a "from" address.
</p>
if(debuggingflag){
<p>The following error was occurred:</p>
<p><em>@errormsg</em></p>
}
}
</body>
</html>

Step 3: Run the EmailWithAttachment page and enter the details as shown below:

Attached File Page With Details in WebMatrix

The mail will send successfully and you will receive the next page as shown below:

Email Sent with Attached File

Summary

This article described how to send an email in WebMatrix using WebMail. You can also learn to send the email with a file attachment. Thanks for reading.