Getting Started
If you are looking to learn about Page Methods in ASP.NET or Wanted to Learn AJAX or looking for an AJAX Tutorial then you have reached your destination.
When starting out with AJAX in ASP.NET, it can be difficult to determine a good starting point. Visual Web Developer has loads of AJAX controls available to us to help get the job done, but some may be overkill for simple AJAX page functionality. A great place to start is with Page Methods, which allow you to call ASP.NET functions from your page via the wonderful and oh so amazing Javascript. This is a very powerful feature since all of the server communication is done behind the scenes, preventing a refresh of the page your visitor is currently on.
What are we doing?
We’ll build a simple “contact us” form that will allow a visitor to enter their name, their email address, and a comment. Normally, after the user enters the information, we would use some sort of validation technique to verify that the data entered was “good” data, and then redirect the user to some sort of confirmation page letting them know that their message has been sent. Our implementation will be slightly different in that there will be no redirect, and we’ll be using an ASP.NET page method to call an ASP.NET function from our code behind via Javascript.
Yes, it is possible to find a good
web host. Sometimes it takes a while. After trying several, we went with
Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
What you’ll need
Some knowledge of HTML
Some knowledge of Javascript
Some knowledge of ASP.NET
A copy of Visual Web Developer or Visual Studio installed on your PC
A web browser
Let’s build something
We’ll want to start a new project by going into the file menu selecting new project,and then selecting Empty ASP.NET web application. Name the project Contact. This’ll set us up with a basic web application file structure, and allow us to start building our project. Next, add an ASP.NET web form to the project by right-clicking on the application in the solution explorer, selecting Add New Item and then selecting Web Form. Name the form ContactUs.aspx, and click Add.
We are using
Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
The code for the form is very simple, and only consists of a fieldset, 3 labels, 2 input fields for a name and email, a textarea for the comment, and a button to submit. This is how your ContactUs.aspx form should look:
<form id="form1" runat="server">
<fieldset id="contactFieldSet">
<label>
Your Name <br />
<input type='text' id='txtName' /></label>
<label>
Email <br />
<input type='text' id='txtEmail' /></label>
<label>
Comment <br />
<textarea id="txtComment"></textarea></label>
<button id="send" onclick="SendForm(); return false;"> Send </button>
</fieldset>
</form>
Now we’ll add a Script Manager control to our page. This control manages our client side scripting, making it possible to perform AJAX calls on our page. Adding one is simple, and only requires that you drag a Script Manager control from the toolbox, and place it somewhere on the page. Once you’ve done that, go into the properties for the script manager control and set the property called EnablePageMethods to true. Notice that the button on our page has the onclick event handler set to call the function SendForm(). This function is a Javascript function, however since we just enabled page methods, we can also call ASP.NET functions from within it. Here’s the code behind file for our ContactUs.aspx.cs:
using System.Web.UI.WebControls;
using System.Web.Services;
namespace Contact
{
public partial class ContactUs : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e){
}
[WebMethod]
public static void SendForm(string name,string email,string message){
}
}
}
The first thing to notice is that I’ve added the System.Web.Services namespace. This is so that we can use the [WebMethod] attribute in our code behind. This attribute basically allows Javascript to call a method from the client side, whereas normally it would have to be called by ASP on the server side. Let’s take a look at the Javascript file and all its glory. You’ll see that I’m going to call “PageMethods.SendForm”. That code is automatically built by ASP.NET because we added the [WebMethod] attribute to our SendForm function in the code behind file.
function SendForm() {
var name, email, message, error;
name = $get('txtName').value;
email = $get('txtEmail').value;
message = $get('txtComment').value;
PageMethods.SendForm(name, email, message, OnSucceeded);
};
function OnSucceeded() {
$get('contactFieldSet').innerHTML = '<p> Thank you! Your comment was sent</p>';
};
Now, when the user enters data into our form and clicks send, they’ll see a warm and happy “Thank you!” without having to be redirected to another page, or without the page refreshing.
Final Thoughts
This has been a simple example of how to implement Page Methods in ASP.NET. We can now call functions from our code behind files using Javascript, and all of the normal request/response processing is done behind the scenes away from the eyes of our visitors. ASP.NET AJAX is really simple to use, and hopefully this will inspire you to build bigger, better AJAX applications. Enjoy!
