Embedding an image within an email

Not to long ago I remember seeing a post on the ASP.NET forums where someone had a need to embed an image within an email that they generated from their web application. I decided to put together a short sample that does just that. Using the code I'll provide you can embed an image within your email, so that when you open the email up with in Yahoo's Webmail client or any other Web based email client the image will be displayed in-line as opposed to being sent as an attachment. This code is just a sample and can be further improved, but it should get you started. I have verified that the image is embedded in-line when sent to GMail, Yahoo, and Hotmail.

Here is the Sample's HTML.

NOTE: Make sure to add the attribute ValidateRequest="false" to the Page Directive. This is so that you can embeded HTML into your email message. Also please beware that this will also allow for XSS via Javascript.

    <div>
<div>
<asp:Label ID="ToLabel" runat="server" Style="padding-left: 1.8em" Text="To:" />
<asp:TextBox ID="ToTextBox" runat="server" />
</div>
<div>
<asp:Label ID="FromLabel" runat="server" Style="padding-left: .8em" Text="From:" />
<asp:TextBox ID="FromTextBox" runat="server" />
</div>
<div>
<asp:Label ID="SubjectLabel" runat="server" Text="Subject:" />
<asp:TextBox ID="SubjectTextBox" runat="server" />
</div>
<div>
<asp:Label ID="BodyLabel" runat="server" Style="padding-left: .8em" Text="Body:" />
<asp:TextBox ID="BodyTextBox" runat="server" TextMode="MultiLine" Width="250px" Height="100px" />
<asp:Image ID="SelectedImage" runat="server" style="left: 200px; top: 200px;"
Height="100px" Width="100px" />
</div>
<div>
<br />
<asp:Button ID="SendButton" runat="server" Style="margin-left: 10em"
Text="Send" onclick="SendButton_Click" />
</div>
<div>
<br />
<div style="width: 550px; overflow: scroll; height: 100px;">
<asp:DataList ID="ImageDataList" runat="server" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4"
ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center"
RepeatDirection="Horizontal" Height="90px" Width="500px"
onitemcommand="ImageDataList_ItemCommand">
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<SelectedItemStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<asp:ImageButton ID="ProfileImageButton" runat="server"
ImageUrl='<%# Eval("FullName") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</div>
</div>
<br />
<asp:Label ID="StatusLabel" runat="server" />

Here's the Sample's Code make sure to include the following namespaces.

using System.IO;
using System.Net;
using System.Net.Mail;

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
StatusLabel.Visible = false;
DirectoryInfo dir = new DirectoryInfo(Server.MapPath("~/Images"));
int total = dir.GetFiles("*.jpg").Length;
if (total > 3)
{
ImageDataList.RepeatColumns = total + 1;
}

ImageDataList.DataSource = dir.GetFiles("*.jpg");
ImageDataList.DataBind();
}
}

protected void SendButton_Click(object sender, EventArgs e)
{
NetworkCredential loginInfo = new NetworkCredential("username@gmail.com", "yourGMailPassword");
MailMessage msg = new MailMessage();
msg.To.Add(new MailAddress(Server.HtmlEncode(ToTextBox.Text)));
msg.From = new MailAddress(Server.HtmlEncode(FromTextBox.Text));
msg.Subject = Server.HtmlEncode(SubjectTextBox.Text);
msg.Body = BodyTextBox.Text;

AlternateView body = AlternateView.CreateAlternateViewFromString(msg.Subject + "<br /><br />" + msg.Body + "<br /><br /><img src=cid:profile />", null, "text/html");
try
{
LinkedResource profileImg = new LinkedResource(SelectedImage.ImageUrl);
profileImg.ContentId = "profile";
body.LinkedResources.Add(profileImg);
}
catch (ArgumentException argEx)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "An image was not selected.";
return;
}
catch (Exception ex)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "The following error occurred: " + "<br /><br />" + ex.Message;
}

msg.AlternateViews.Add(body);
msg.IsBodyHtml = true;

SmtpClient client = new SmtpClient("smtp.gmail.com", 587);
client.EnableSsl = true;
client.UseDefaultCredentials = false;
client.Credentials = loginInfo;

try
{
client.Send(msg);
}
catch (SmtpException smtpEx)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "The following error occurred: " + "<br /><br />" + smtpEx.Message;
}
catch (Exception ex)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "The following error occurred: " + "<br /><br />" + ex.Message;
}

StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#009966");
StatusLabel.Text = "Email sent successfully.";
}

protected void ImageDataList_ItemCommand(object source, DataListCommandEventArgs e)
{
SelectedImage.ImageUrl = ((ImageButton)e.CommandSource).ImageUrl;
}

Recovering lost AJAX Control Toolkit Controls in VS2008

When using Visual Studio 2008 and you have the AJAX Control Toolkit installed you might have experienced that your AJAX Controls disappear from the Toolbox. If you right-click on a Tab in the Toolbox and select Show All, you'll see that the controls are still there; however, they are all greyed out. This happens when using Visual Studio 2008 and targeting .Net Framework 2.0 in both Web Application Projects and Web Sites. You can resolve this by doing the following for Web Applications and Web Sites.

Web Solutions:

1. Click Project.
2. Select ProjectName Properties.
3. Under Target Framework, change it from .NET Framework 2.0 to .NET Framework 3.5.
4. Click Save.

Web Sites:

1. Click Website.
2. Select Start Options.
3. Select Build and under Target Framework, change it from .NET Framework 2.0 to .NET Framework 3.5.
4. Click OK.

ASP.NET FileUpload Control Issue

I had an issue with file paths when using the ASP.NET 2.0 FileUpload Control that was giving me a fit for a little while. After some searching on Google, I gained a little more insight and discovered that if you use PostedFile that IE saves the file's complete path, which includes the path location of where the file was uploaded from in addition to the location you are saving files to on the server. If you use PostedFile with Firefox, Opera, or Safari, the file's complete path is trimmed to just the filename and the location you are saving files to on the server.

Instead of using for example:

string path = "/uploads/ + FileUpload1.PostedFile;

Use this:

string path = "/uploads/ + FileUpload1.Filename;

This will assign only the file's filename to the variable path, so if you are saving the paths of files in a database and upload files using IE the path will not also contain the location of the file on the client's machine as well as the location you are saving your files to on the server.

I had never used the FileUpload Control before until recently, so hopefully this will help anyone out using it for the first time.

Sending an Activation Email with ASP.NET 2.0 Expanded

I had a request to show an example that would build on my original "Sending an Activation Email with ASP.NET 2.0" to provide a user with a link to log them in. What follows shows how you can place a link on the final Account Details page that when clicked will take the user to a Login page with their username already pre-filled for them.

Activate.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Activate.aspx.cs" Inherits="Activate" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Activation Page</title>
</head>
<body>
<form id="form1" runat="server">
<br />
<asp:Table ID="Table1" runat="server" CellPadding="1" CellSpacing="0" GridLines="Both" BorderStyle="Groove" BackColor="BlanchedAlmond" Caption="Account Information">
<asp:TableRow>
<asp:TableCell HorizontalAlign="Right" runat="server">Username:</asp:TableCell>
<asp:TableCell HorizontalAlign="Left" runat="server"><asp:Label ID="ActiviationNameLabel" runat="server" Style="position: static"></asp:Label></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell HorizontalAlign="Right" runat="server">Account Created:</asp:TableCell>
<asp:TableCell HorizontalAlign="Left" runat="server"><asp:Label ID="ActivationCreationDateLabel" runat="server" Style="position: static"></asp:Label></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell HorizontalAlign="Right" runat="server">Account Status:</asp:TableCell>
<asp:TableCell HorizontalAlign="Left" runat="server"><asp:Label ID="ActivationStatusLabel" runat="server" style="position: static"></asp:Label></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell HorizontalAlign="Right" runat="server">
<br />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Login.aspx">Goto Login Page</asp:HyperLink>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
</body>
</html>

Activate.aspx.cs

This updated code stores the username in a Session variable, so that it can be used to populate the Username field of the Login Control.

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string userID = Request.QueryString["ID"];
Guid gd = new Guid(userID);
MembershipUser user = Membership.GetUser(gd);
user.IsApproved = true;
Roles.AddUserToRole(user.ToString(), "Power Users");
Membership.UpdateUser(user);
ActiviationNameLabel.Text = user.UserName;
ActivationCreationDateLabel.Text = user.CreationDate.ToShortDateString();
if (user.IsApproved)
{
ActivationStatusLabel.Text = "Active";
}
else
{
ActivationStatusLabel.Text = "Pending";
}

Session["UserName"] = user.UserName;
}
}

Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Login Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" DestinationPageUrl="~/Main.aspx">
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
</asp:Login>
</div>
</form>
</body>
</html>

Login.aspx.cs

This simple Login page retrieves the user's Username from the session and assigns it to the Login controls UserName TextBox. It first checks to see if the session variable is null or empty if it is then the Login Control's UserName TextBox is left blank.

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (!(String.IsNullOrEmpty((string)Session["UserName"])))
{
string username = Session["UserName"].ToString();
Login1.UserName = username;
}
else
{
Login1.UserName = string.Empty;
}
}
}

Main.aspx
Upon successful login the user is redirected to a simple welcome page called Main.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Main Website Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
Welcome
<asp:LoginName ID="LoginName1" runat="server" />
!<br />
<br />
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="RedirectToLoginPage"
LogoutPageUrl="~/Login.aspx" />
</LoggedInTemplate>
</asp:LoginView>
&nbsp;</div>
</form>
</body>
</html>

Sending an Activation Email with ASP.NET 2.0

Many sites as you've seen send out an email that contains a link to activate your account after you've filled out all requested information. This is primarily seen on Web Forum sites and other sites that require a membership. I'm going to show a quick example of how to do this using ASP.NET and sending the email via Gmail or some other SMTP server such as your hosting company's smtp server. It is assumed that you have already configured your ASPNETDB with Membership and Roles. This is just a basic email activation you can expand upon it and add other features you might want.

Start by dropping a standard CreateUserWizard Control on a page. I've dropped the control on a page called Default.aspx. You can format it later with any of the available Format templates Microsoft has provided or customize it using CSS if you like.

Below is the code-behind for the Default.aspx page. This code essentially grabs the Username, Password, and Email address that was entered through the CreateUserWizard Control puts the information into a StringBuilder object along with a link to the Activate.aspx page. The UserID is a Guid value that is appended to the Activate URL as a query string.

Using a conditional you can select to send the emails via your Hosting Companies SMTP server, a local SMTP server, or a Gmail account.

#define Gmail
#define SMTP

using System;
using System.Data;
using System.Configuration;
using System.Net;
using System.Net.Mail;
using System.Text;
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;

public partial class _Default : System.Web.UI.Page
{

protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
StringBuilder bodyMsg = new StringBuilder();
TextBox username = (TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("UserName");
TextBox password = (TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("Password");
TextBox email = (TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("Email");

CreateUserWizard cuw = (CreateUserWizard)sender;
MembershipUser user = Membership.GetUser(cuw.UserName);
Guid userID = (Guid)user.ProviderUserKey;

bodyMsg.Append("Thank you for creating your account.\n\nPlease follow this link to activate: ");
bodyMsg.Append("<br /><br /><a href=http://yourserver/SendEmailConfirmationSample/Activate.aspx?ID=" + userID.ToString() + ">Activate Your Account</a>");
bodyMsg.Append("<br />");
bodyMsg.Append("<br />");
bodyMsg.AppendFormat("UserName: {0}", username.Text);
bodyMsg.Append("<br />");
bodyMsg.AppendFormat("Password: {0}", password.Text);
bodyMsg.Append("<br />");
bodyMsg.AppendFormat("Registered Email: {0}", email.Text);

#if SMTP
// Sending email via local or web hosts smtp server.
NetworkCredential loginInfo = new NetworkCredential("yourusername", "yourpassword");
MailMessage msg = new MailMessage();
msg.From = new MailAddress("youremailaddress");
msg.To.Add(new MailAddress(CreateUserWizard1.Email));
msg.Subject = "Account Information";
msg.Body = bodyMsg.ToString();
msg.IsBodyHtml = true;

SmtpClient client = new SmtpClient("smtpserver", 25);
client.Credentials = loginInfo;
client.Send(msg);
#endif

#if Gmail
// Sending email via Gmail.
NetworkCredential loginInfo = new NetworkCredential("yourUsername@gmail.com", "yourGmailPassword");
MailMessage msg = new MailMessage();
msg.From = new MailAddress("yourUsername@gmail.com");
msg.To.Add(new MailAddress(CreateUserWizard1.Email));
msg.Subject = "Account Information";
msg.Body = bodyMsg.ToString();
msg.IsBodyHtml = true;

SmtpClient client = new SmtpClient("smtp.gmail.com", 587);
client.EnableSsl = true;
client.UseDefaultCredentials = false;
client.Credentials = loginInfo;
client.Send(msg);
#endif

Response.Redirect("~/thankyoupage.aspx");
}
}

Signing Up For A New Account.



The Confirmation email that is sent.



Here you can see the email that I received in my Gmail Inbox.



Here are the contents of the email that was sent.



The Activate.aspx page's code behind gets the ID that was passed in the query string and uses it to link the user to the account that was created, as well as adds the user to the Power Users Role in ASPNETDB. The page then displays the Username, Date the account was created, and the Status of the user's account.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Activate.aspx.cs" Inherits="Activate" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Activation Page</title>

</head>

<body>

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

<br />

<asp:Table ID="Table1" runat="server" CellPadding="1" CellSpacing="0" GridLines="Both" BorderStyle="Groove" BackColor="BlanchedAlmond" Caption="Account Information">

<asp:TableRow runat="server">

<asp:TableCell HorizontalAlign="Right" runat="server">Username:</asp:TableCell>

<asp:TableCell HorizontalAlign="Left" runat="server"><asp:Label ID="ActiviationNameLabel" runat="server" Style="position: static"></asp:Label></asp:TableCell>

</asp:TableRow>

<asp:TableRow runat="server">

<asp:TableCell HorizontalAlign="Right" runat="server">Account Created:</asp:TableCell>

<asp:TableCell HorizontalAlign="Left" runat="server"><asp:Label ID="ActivationCreationDateLabel" runat="server" Style="position: static"></asp:Label></asp:TableCell>

</asp:TableRow>

<asp:TableRow runat="server">

<asp:TableCell HorizontalAlign="Right" runat="server">Account Status:</asp:TableCell>

<asp:TableCell HorizontalAlign="Left" runat="server"><asp:Label ID="ActivationStatusLabel" runat="server" style="position: static"></asp:Label></asp:TableCell>

</asp:TableRow>

</asp:Table>

</form>

</body>

</html>

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;



public partial class Activate : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

string userID = Request.QueryString["ID"];

Guid gd = new Guid(userID);

MembershipUser user = Membership.GetUser(gd);

user.IsApproved = true;

Roles.AddUserToRole(user.ToString(), "Power Users");

Membership.UpdateUser(user);



ActiviationNameLabel.Text = user.UserName;

ActivationCreationDateLabel.Text = user.CreationDate.ToShortDateString();

if (user.IsApproved)

{

ActivationStatusLabel.Text = "Active";

}

else

{

ActivationStatusLabel.Text = "Pending";

}

}

}

}

Here are the final Account Details from the Activate.aspx screen.

How-To Auto Collapse Microsoft AJAX Collapsible Panel

Here's a quick tip on how to automatically collapse a Collapsible Panel through code. This is useful in a situation such as having a Collapsible Panel that contains a few controls used in data entry and once the user has entered the data and clicked on a button to submit their data you want the panel to collapse automatically.

You would think that just performing a (control name) CollapsiblePanelExtender1.collapse = True would collapse the panel; however, this will not work by itself. This is due to the fact that there is a short delay between the first rendering of the page and the running of the Javascript to modify it. To have the panel collapse you will need to add one more line, so your code will look like this.

CollapsiblePanelExtender1.Collapsed = True;
CollapsiblePanelExtender1.ClientState = "true";

You can also prevent the PopControlExtender from briefly showing controls it contains by placing the controls within a Panel Control and setting the Panel Control's visibility style to hidden. This will stop the annoying flickering that happens when the page is first rendered.

Cheat Sheets

A co-worker gave me this very useful cheat-sheet resource.

Enjoy!

http://www.ilovejackdaniels.com/cheat-sheets/