Skip to Main Content

Monday, April 17, 2006

Quick AJAX Overview

For those precious few who have held out on learning about AJAX, here is a quick overview of how to implement it.

AJAX Example


One of the first things you will need to do is to reference a function on an HTML element's event. In our example, we will use the <body> tag's onload event:

  1. <body onload="getData();">

Next, we create the getData() function to establish the AJAX connection and retrieve the data from the server (in this case, its an XML document).


  1. var ajax;
  2.  
  3. function getData()
  4. {
  5. //Checks if it's a modern browser
  6. if(document.getElementById)
  7. {
  8. //Creates the AJAX Object bases on browser type
  9. if(window.ActiveXControl)
  10. {
  11. ajax = new ActiveXOject("Microsoft.XMLHTTP");
  12. }
  13. else
  14. {
  15. ajax = new XMLHttpRequest();
  16. }
  17.  
  18. //If the ajax object was created successfully
  19. if(ajax)
  20. {
  21. //Process the response (calls the processResponse function)
  22. ajax.onreadystatechange = processResponse;
  23.  
  24. //XML/RSS/Web service URL
  25. ajax.open("GET", "/services/data.xml", true);
  26.  
  27. //Parameters to send to the URL (null in this case)
  28. ajax.send(null);
  29. }
  30. }
  31. }

If you notice, I'm using a .xml file. This could also be a web service, an rss feed, or even just a web page that returns xml.

Next, we create the "processResponse" function. In the code example above, we assign the ajax.onreadystatechange a reference to a function. This function will provide a way to access the response of the xml returned.


  1. function processResponse()
  2. {
  3. if(ajax.readyState == 4 && ajax.status == 200)
  4. {
  5. //Assign the XML returned to a local variable
  6. var xml = ajax.responseXML;
  7. alert(xml);
  8. }
  9. }


While the above example doesn't do anything fancy, it demonstrates how easy it is to create a quick asynchronous connection to get some data without refreshing the page.

I will be creating an XMLHttpRequest tutorial in the next post, so look forward to learning more AJAX.

Adios

posted by Ron Wheeler @ 12:13 AM   0 comments

Thursday, April 13, 2006

Change Meta Tags Programmatically in ASP.NET 2.0

There is a problem in ASP.NET 2.0. The problem is that when you use MasterPages in an .aspx file, you cannot override the <meta> tags.

The issue that I came across was that I had a <meta name="description"> tag in my MasterPage file for use by search engines. It's nice to display a paragraph saying exactly what you want people to know about a particular page/site. However, if you want to change the description on every page, you are out of luck. Visual Studio 2005 tricked me into thinking it was nice and easy. How?

Well, if you want to change the title of each page that uses a MasterPage, you can specify the title in the @Page directive as follows:

  1. <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master"
    CodeFile="default.aspx.cs" Inherits="_default" Title="My Page Title" %>

However, I was tricked into think I could change the meta description because there is a Description attribute in the @Page directive just like title.

To get around this, you must make the change programmatically. There are two ways to do it:
  1. Create a HtmlMeta control for each page, set the properties, and add the control the the page's Header object.

  2. Create a public method in the MasterPage that changes the meta tag and call that method from each page.

Personally, I chose the latter (Number 2) because it was just a little bit less code.

Here's the code:
In the MasterPage.aspx page, I created a <meta> tag in the <head> section:
  1. <meta runat="server" name="description" id="description">

Next, in the MasterPage.aspx.cs file, I created a public method that takes a string parameter and replaces the description with the parameter:
  1. public void ChangeMetaDescription(string description)
  2. {
  3. description.Attributes["content"] = description;
  4. }

Finally, in my .aspx.cs file, I called the ChangeMetaDescription() method in the Page_Load event:
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. MasterPage master = Master as MasterPage;
  4. master.ChangeMetaDescription("This is my new description.");
  5. }

In Conclusion
Although I used this strictly for the meta-description, you can use this method for any control inside the MasterPage.

posted by Ron Wheeler @ 11:02 AM   1 comments