Web Parts With AJAX

I'm very enthusiastic about web parts but I've been a bit disappointed by the quality of the demonstrations and examples that are provided. Usually you are shown how to drop a calendar control into a web part zone and then there is some discussion of how the web part manager works. My general complaint with sample code is that it is either too simple and does not accomplish any task that you would find useful, or it is too complicated and you won't want to tackle it. I have had to struggle to create some web part examples that accomplish something interesting.

I'm going to share a very simple web part that will give you a better idea of how they can be used to create mash ups. My example web part gets the weather from the National Weather Service. I used a XSL file to transform the XML from the web service so there is very little code involved. You can easily combine a variety of RSS feeds and web services into a mash up site using web parts.

I've recently made some improvements to this web part. I added a textbox and a button so you can change the weather station which simply requires using a different station id in the URL. I also added the ability to set a web part property depending upon the user input. Finally, I put everything into an UpdatePanel to avoid the annoyance of a postback. I know this is really simple stuff but it is still a better example than just dumping a control on a web part zone without giving it the slightest functionality.

The WeatherWebPart is a very simple user control:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WeatherWebPart.ascx.cs" Inherits="WeatherWebPart" %>
<div style="font-family: Arial, 'Microsoft Sans Serif';font-size: 10pt;">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Xml ID="Xml1" runat="server" TransformSource="App_Data/Weather.xsl" EnableViewState="false"></asp:Xml>
            Station ID: &nbsp;<asp:TextBox ID="txtStationID" runat="server" Width="51px"></asp:TextBox>
            <asp:Button ID="btnChange" runat="server" Text="Change" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
</div>

The XSL style sheet does all of the work transforming the XML into HTML. I really like using XSLT because it is very portable. I have used this very same XSL file to show the weather in DotNetNuke and Joomla:

The code behind for the web part implements the IWebPart interface in order to set some interesting properties like the title icon:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class WeatherWebPart : System.Web.UI.UserControl, IWebPart
{
protected string _Subtitle = "Williamsport PA";
    protected void Page_Load(object sender, EventArgs e)
    {
        System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
        try
        {
            if (!IsPostBack)
            {
                doc.Load("http://www.weather.gov/data/current_obs/KIPT.xml");
            }
            else
            {
                doc.Load("http://www.weather.gov/data/current_obs/" + txtStationID.Text + ".xml");
                switch (txtStationID.Text)
                {
                    case "KLAX":
                        this.Subtitle = "Los Angeles, CA";
                        break;
                    case "PANC":
                        this.Subtitle = "Anchorage, AK";
                        break;
                }
                Xml1.Document = doc;
            }
        }
        catch
        {
            Xml1.DocumentSource = "App_Data/Weather.xml";
        }
    }

    #region IWebPart Members

    public string CatalogIconImageUrl
    {
        get
        {
            return "~/App_Themes/Default/img/weathergov.ico";
        }
        set
        {
            return;
        }
    }

    public string Description
    {
        get
        {
            return "Local weather from NOAA's National Weather Service";
        }
        set
        {
            return;
        }
    }

    public string Subtitle
    {
        get 
        {
            return _Subtitle; 
        }
        set
        {
            _Subtitle = value;
        }
    }

    public string Title
    {
        get
        {
            return "Local Weather";
        }
        set
        {
            return;
        }
    }

    public string TitleIconImageUrl
    {
        get
        {
            return "~/App_Themes/Default/img/weathergov.ico";
        }
        set
        {
            return;
        }
    }

    public string TitleUrl
    {
        get
        {
            return "~/Default.aspx";
        }
        set
        {
            return;
        }
    }

    #endregion

     }