|
Another variation on sending e-mail messages from a Web page is to allow users to e-mail the contents of the page to friends. You ve probably seen this technique on many Web sites. For example, the online magazine Slate (http://www.slate.com/) has an E-Mail link at the top of its articles so that you can send the articles to friends. In our example, we ll practice this technique by allowing people to send pictures as attachments to an e-mail message.
As you did for the Guestbook e-mail alert in the previous section, you ll modify a page that you created earlier namely, that old standby, the slideshow page. You ll need to make two changes to the slideshow page to allow users to e-mail pictures. The first change is to add a button to the slideshow page that reads Send this picture to a friend! The second change is to create a new page where users can enter their own e-mail address and their friend s address and then send the picture. Let s start by adding the Send This Picture button to a slideshow page.
Adding a Send This Picture button to an existing slideshow page is an easy job. You can add the button to any of the slideshow pages that you ve created in this book. I recommend that for now you start with the Slideshow1.aspx page that you created in Chapter 5, because that page is easier to test. When the page runs, it will look like Figure 15-4.
Figure 15-4: A slideshow page with a button that allows users to send the current picture to their friends.
Create a slideshow page with a Send This Picture button
Make a copy of the Slideshow1.aspx file from Chapter 5, and name it Slideshow_Email.aspx.
Drag a button onto the page and position it above the Image control and below the Label control used for the caption.
Set the Button control s ID property to buttonSendPicture and set its Text property to Send this picture to a friend!
Double-click the button to create a Click handler for it, and add the following boldfaced code:
Sub buttonSendPicture_Click(sender As Object, e As EventArgs Session("pictureURL") = imageSlide.ImageUrl Session("caption") = labelCaption.Text Response.Redirect("SendPicture.aspx") End Sub
This code accomplishes two simple tasks. First, the code reads the picture URL from the imageSlide control and the caption from the labelCaption control and stores both values in a Session object so that they can be passed to another page. The code then calls the Response.Redirect method to navigate to the SendPicture.aspx page. The SendPicture.aspx page doesn t exist yet, but we re about to create it.
The page in which users can send the picture is similar to the SendEmail.aspx page that you created earlier in this chapter. You ll prompt the user for a From and a To e-mail address. You ll also prompt for the user s name so that you can include the name in the body of the e-mail message. You ll read the URL and caption of the picture out of the Session object, where the Slideshow_Email.aspx page stored them. To help provide a visual cue to the user, you ll display the picture again in the current page. When the page runs, it will look like Figure 15-5.
Figure 15-5: The SendPicture.aspx page, where users provide information for sending a picture in e-mail.
Create the SendPicture.aspx page
In Web Matrix, create a page named SendPicture.aspx.
Type in the text Send a Picture to a Friend, and apply the Heading 1 block style. If you want, type in some explanatory text for your users, as shown in Figure 15-5.
Using Figure 15-5 as a guide, drag the following controls onto the page and set their properties as indicated. As with the SendEmail.aspx page, the validator controls are optional but highly recommended.
Control | Property Settings |
---|---|
TextBox | ID: textName |
TextBox | ID: textFrom |
RequiredFieldValidator | ControlToValidate: textFrom ErrorMessage: Your e-mail address is required! |
RegularExpressionValidator | ControlToValidate: textFrom ErrorMessage: Invalid e-mail address! ValidationExpression: (the regular expression for Internet e-mail addresses) |
TextBox | ID: textTo |
RequiredFieldValidator | ControlToValidate: textTo ErrorMessage: You must enter a recipient e-mail address! |
RegularExpressionValidator | ControlToValidate: textTo ErrorMessage: Invalid e-mail address! ValidationExpression: (the regular expression for Internet e-mail addresses) |
Button | ID: buttonSend Text: Send |
Hyperlink | Text: Return to slideshow NavigateUrl: Slideshow_Email.aspx |
Label | ID: labelStatus Text: (empty) Font.Bold: True ForeColor: Red |
Image | ID: imagePicture |
When users click the Send This Picture button on the slideshow page, you want the SendPicture.aspx page to appear and display the picture from the slideshow so that users can preview the picture they re about to send. To preview the picture in the SendPicture.aspx page, switch to All view, and add the following declaration as line 2 of the page:
<%@ import Namespace="System.Web.Mail" %>
Switch to Code view, and create a Page_Load handler. In the handler, add the following code:
Sub Page_Load( If Session("pictureURL") Is Nothing The labelStatus.Text = "No picture information is available. buttonSend.Enabled = Fals Els imagePicture.ImageUrl = Session("pictu reURL" End I End Sub
The code reads the picture URL out of the Session object, where you stored it in the Slideshow_Email.aspx page, and uses the URL to display the picture in the imagePicture control. If the code can t find the correct value in the Session object, it displays an error message and disables the Send button. The Session object will not contain the correct value if the user displays the SendPicture.aspx page without first visiting the Slideshow_Email.aspx page and clicking the Send This Picture button on the page.
The SendPicture.aspx page now allows the user to preview the picture. Now you need to actually send the picture in e-mail.
The code that sends the e-mail message in the SendPicture.aspx page is similar to the code from the Guestbook_Email.aspx page. You will again create an e-mail message that s formatted as HTML. (You can safely use HTML formatting because you re not getting the text of the message from users.) The only real difference in the SendPicture.aspx page from the pages you created earlier in this chapter is that you re adding an attachment to the e-mail message namely, the picture. You create the attachment as an object of type MailAttachment, specifying the path of the file you want to attach. You can then add the attachment to the Attachments collection of the e-mail object.
Switch to Design view, and double-click the Send button to create a Click handler for it. In the Click handler, add the following code:
Sub buttonSend_Click(sender As Object, e As Ev entArgs Dim caption As Strin caption = Session("caption" Dim emailMessage As MailMessag emailMessage = New MailMessag emailMessage.From = textFrom.Tex emailMessage.To = textTo.Tex emailMessage.Subject = "Here s a picture you ll like! Dim bodyText As Strin bodyText = "I found the attached picture in a slideshow. bodyText &= "Go to " & "<A HREF= http://www.contoso.com/.../ SlideShow_Email.aspx >" & "Mike s Slideshow</ A> to see the slideshow yourself. bodyText &= "<BR><BR> bodyText &= "The caption for this picture is:<BR><BR> bodyText &= "<b>" & caption & "</b> emailMessage.Body = bodyTex emailMessage.BodyFormat = MailFormat.HTM Dim path As Strin path = Server.MapPath(Request.ApplicationP ath) & "\ Dim emailAttach As New MailAttachment(path & imagePicture.ImageUrl emailMessage.Attachments.Add(emailAttach SmtpMail.SmtpServer="localhost Tr SmtpMail.Send(emailMessage buttonSend.Enabled = Fals labelStatus.Text = "The picture has been sent! Catch ex as exceptio labelStatus.Text = "Error sending picture End Tr End Sub
The general technique for sending an e-mail message will be familiar to you by now. The body text of the e-mail message is a little fancier this time than in previous examples. The body text includes a hard-coded link to the slideshow page. (In your own page, you would need to substitute the appropriate domain and application name.) I added the link to show you that you can include HTML elements such as anchors if you want. The body text also includes some line breaks (<br> tags) and the caption, which is formatted as boldfaced text. It doesn t matter what the body text says or how it s formatted. I added formatting primarily to give you an idea of the types of interesting formatting you can play with.
The picture is attached to the e-mail message with these lines:
Dim path As Strin path = Server.MapPath(Request.ApplicationP ath) & "\ Dim emailAttach As New MailAttachment(path & imagePicture.ImageUrl emailMessage.Attachments.Add(emailAttach)
When you create the MailAttachment object, you pass it the path of the picture to attach. You can create the path using the technique you learned in Chapter 7 combine the Server.MapPath(Request.ApplicationPath) expression with the file name you already have for the Image control s ImageUrl property.
You have one last test to perform and then you ll be done with e-mail for now. With the SendPicture.aspx page open in Web Matrix, press F5. You won t see a picture; instead, you ll see the text No picture information is available because you didn t start out in the Slideshow_Email.aspx page.
Click the Return To Slideshow link. Navigate through the slideshow until you find a picture you like, and then click the Send This Picture To A Friend button. Clicking the button returns you to the SendPicture.aspx page, but this time you see the picture that you want to send. Enter your name. For testing purposes, enter your e-mail address as both your address and your friend s address, as shown in Figure 15-6.
Figure 15-6: Entering test information in the SendPictures.aspx page.
Click Send and verify that the page displays the message Picture has been sent! Open or switch to your e-mail program, and check for new e-mail messages. When the picture arrives in e-mail, you ll get a message that looks like the message shown in Figure 15-7.
Figure 15-7: The picture arrives as an attachment to an e-mail message.
|