Allowing Users to E-Mail Pictures from Your Slideshows


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 the Slideshow

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.

click to expand
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

  1. Make a copy of the  Slideshow1.aspx file from Chapter 5, and name it  Slideshow_Email.aspx.

  2. Drag a button onto the page and position it above the Image control and below the Label control used for the caption.

  3. Set the Button control s ID property to buttonSendPicture and set its Text property to Send this picture to a friend!

  4. 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.

Creating a Page for Sending the Picture

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.

click to expand
Figure 15-5: The SendPicture.aspx page, where users provide information for sending a picture in e-mail.

Create the  SendPicture.aspx page

  1. In Web Matrix, create a page named  SendPicture.aspx.

  2. 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.

  3. 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

Adding Code to Display the Picture

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.

Adding Code to Send the Picture as an E-Mail Attachment

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.

Testing the Send Picture Page

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.

click to expand
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.

click to expand
Figure 15-7: The picture arrives as an attachment to an e-mail message.



Microsoft ASP. NET Web Matrix Starter Kit
Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)
ISBN: 0735618569
EAN: 2147483647
Year: 2003
Pages: 169
Authors: Mike Pope
BUY ON AMAZON

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net