A simple Ajax with .NET tutorial

Start Visual Studio 2008 and create a new ASP.NET Web Application project. The opening screen is your default page with one div layer. To begin using AJAX functionality, find the 'AJAX Extensions' tab in the ToolBox and drag a 'Script Manager' on to your page. Once the Script Manager has loaded, drag an 'Update Panel' on to the page and take note of where the Update Panel is located along with its width and height, as any AJAX functionality will only take place on this panel.

Once the Script Manager and Update Panel have loaded, drag two text boxes on to the page and on top of the Update Panel. Set the focus on the first text box and click on the 'Properties' on the right hand side of Visual Studio and set the 'AutoPostBack' property to 'true' and repeat for the second text box.
Next, find the code behind file and add the following code to the file:

public partial class _Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
  this.TextBox2.TextChanged += new EventHandler(TextBox2_TextChanged);
  }
}

The above code registers an event handler for the second text box's 'TextChanged' event. Next, add the following code inside the same class:

void TextBox2_TextChanged(object sender, EventArgs e)
{
  this.TextBox1.Text = TextBox2.Text;
}

this code sets the text in the first text box to the code in the second text box when the text in the second text box is changed.
Your code behind file should resemble the following:

public partial class _Default : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  this.TextBox2.TextChanged += new EventHandler(TextBox2_TextChanged);
 }

 void TextBox2_TextChanged(object sender, EventArgs e)
 {
  this.TextBox1.Text = TextBox2.Text;
 }
}

Now run the application by clicking on the 'Debug' drop down menu and selecting 'Start Debugging'.

When the page has loaded, enter some text in the second text box and click your mouse outside of the second text box, if everything is right, the text on the first text box should now be identical to the second text box.
Hope this helps and have fun with AJAX!

blog comments powered by Disqus

Lijit Search