Build an AJAX Contact Us Form using network callbacks in ASP.NET

by James Fielding 18. March 2010 13:53

Intro | Part 1 | Part 2

So we're on the third instalment of this three-part tutorial series, where you and I are building an AJAX Contact Us form in ASP.NET, a couple of different ways. If you need a recap, here are the links to the introduction and the partial-page updates method. In this article we’re going to put the "less is more" principle into action by initiating our network callbacks directly from client-side JavaScript code, and we'll also build an AJAX-enabled web service to handle our call. As in Part 1, I’m going to assume that you are comfortable using Visual Studio.

You can download the source files for this project AJAXEnabledContactForm.zip (45.6 kb).

So we're going from partial-page updates using the asp:UpdatePanel, to network callbacks through a web service using HTML controls. The main reason you'd go this way is to drastically reduce your data transfer between the client and server. And why is this? Well, for two reasons: First, unlike partial-page updates, we're not passing all the form's data back to the server, just the required parameters in an XML wrapper. Second, we're not executing the page's full life-cycle back on the server from the postback, either. So if you're looking for efficiency, this is the way to go.

We'll be continuing on with the project that we created in Part 1, which we called “AjaxEnabledContactForm”. Let's start with the our web service, which is going to provide the service methods that our Contact Us form calls. So I`ve created a new web service called "ContactUs.asmx". Since we've already seen the some of this code in Part 1, I'll give you the full page first, and then we'll walk through it.

Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel

<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://xmlforasp.net")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class ContactUs
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function Submit(ByVal strEmail As String, ByVal strComment As String) As Boolean
        System.Threading.Thread.Sleep(5000)
        Return SendMail(strEmail, strComment)
    End Function

    Private Function SendMail(ByVal strEmail As String, ByVal strComment As String) As Boolean
        Dim mailMessage As System.Net.Mail.MailMessage = New System.Net.Mail.MailMessage()

        mailMessage.From = New System.Net.Mail.MailAddress("myserver@mysite.com")
        mailMessage.To.Add(New System.Net.Mail.MailAddress("me@mysite.com"))
        mailMessage.ReplyTo = New System.Net.Mail.MailAddress(strEmail.Trim())

        'Set additional options
        mailMessage.Priority = Net.Mail.MailPriority.Normal
        mailMessage.IsBodyHtml = False

        'Set the subjet and body text
        mailMessage.Subject = "Contact Us Form from: " & strEmail.Trim
        mailMessage.Body = strComment

        'Create an instance of the SmtpClient class for sending the email
        'using web.config settings
        Dim smtpClient As System.Net.Mail.SmtpClient = New System.Net.Mail.SmtpClient()

        Try
            smtpClient.Send(mailMessage)
        Catch ex As System.Net.Mail.SmtpException
            Return False
        Catch ex As Exception
            Return False
        Finally
            mailMessage.Dispose()
        End Try

        Return True
    End Function
End Class

The nice thing about doing our Contact Us form through a web service is that we can have both as a separate applications in our production evironment, so if there is a problem in our main application, the service is still available for other applications, or vice-versa. More...

Tags: , , , , , ,

AJAX | Web Development | ASP.NET

Build an AJAX Contact Us form in ASP.NET

by James Fielding 26. February 2010 13:47

Intro | Part 1 | Part 2

When it comes to building a Contact Us page in ASP.NET, then a page with a form tag, some text boxes, and a submit button is the classic and straightforward way to go. If this isn’t what you want to hear, then you’ve come to the right place.

Sure, a simple form may be the easiest, and arguably a more secure way of collecting user feedback, but it just doesn’t have that AJAX sparkle...and what’s the fun in that?!! Over the next two blogs, I’m going to be building an AJAX Contact Us form in ASP.NET using two different methods:

  1. Using Visual Studio’s built in ASP.NET AJAX controls to do dynamic partial-page updates.
  2. Using client-side network callbacks through a web service.

Just a couple of disclaimers before we start: I’m going to keep this as simple as possible, so let’s just say that the UI design is basic, the database/email hookup will be incompete, and we won’t be dealing with any major security concerns. So you’ll obviously want to bolster things before you drop this into a production environment. The point of this is not to provide an enterprise-class solution, but to give you a step-off point to building a great system.

Having said that, let’s get going with Partial Page Updates.
James Fielding

Tags: , , , ,

Web Development | ASP.NET

RecentComments

Comment RSS