MACCA认为分享就是乐趣

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

利用AJAX、UPDATE PANEL和www.163.com上显示天气的XML开发的显示天气控件,希望对大家有所帮助
开发环境,可直接将页面和代码部分复制到ascx上即可
asp.net2.0+ajax+xml(163上的xml)+iframe(blogweather.net) 组合而成的天气控件
如以上海为默认,就引用 http://www.163.com/inc/weatherxml/58367.xml 上的内容
设计效果在 www.77215.com/news_ajax/index.aspx 左上角的天气显示

1.页面显示部分
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ghfWeather.ascx.cs" Inherits="include_ghfWeather" %>
<script type="text/javascript">
function chkWeather()
{  
   var tdweather=$get("tdweather");
   var spweather=$get("spweather");
   var trweather=$get("trweather");
   var dropdown=$get("dropdown");
   var frmWeather=$get("frmWeather");
   tdweather.style.display=tdweather.style.display=="none"?"":"none";
   addFrameSrc();
   trweather.style.display=tdweather.style.display=="none"?"":"none";
   spweather.innerHTML=tdweather.style.display=='none'?'更多各地天气':'隐藏详细';
   dropdown.style.visibility=tdweather.style.display=="none"?"visible":"hidden";
   }
   function addFrameSrc() //此处为了不多次加载IFRAME,现设计为只加载一次,以加快页面显示
   {
     var frmSrc=$get("frmWeather");
     if(frmSrc.src.length<1)
     {
     var src="http://www.blogweather.net/AllCityWeather.aspx?Area=China&Name=Shanghai&Language=Chinese&Color=Green&";
     frmSrc.src=src; 
     }
   }
</script> 
<table width="160" id="TABLE1" style="left: 0px;top: 0px">
                <tr>
                    <td style="width:98%">
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>                     
                                           
                          <table width="100%">
                            <tr align="center">                             
                              <td style="width:30%">
                              &nbsp;<asp:DropDownList ID="DropDownList1" AutoPostBack="true" Font-Size="Smaller" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Visible="True">
                              </asp:DropDownList></td>                             
                              <td title="各地天气采用其他网站信息,无法显示或提示更新中请刷新!若有广告链接请见谅!">
                              <span id="spweather" onclick="chkWeather()" onmouseover="this.style.cursor='hand'" style=" background-color:#33CCFF; ">更多各地天气</span>
                              </td>
                            </tr>
                            <tr id="trweather">
                                <td colspan="2">
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style=" width:100%;text-align:center;"><span style="background-color:#ce0049; color:#fff;"> Loading Data...</span></div>
</ProgressTemplate>
</asp:UpdateProgress>
                                    &nbsp;<asp:Label ID="lbWeather" runat="server" Width="100%" style=" text-align:center"></asp:Label></td>
                            </tr>
                            </table>    
                            </ContentTemplate>
                        </asp:UpdatePanel>                  
                     </td>
                </tr>
                <tr>
                    <td id="tdweather" style="display:none;width:98%" ><iframe id="frmWeather" width="158" height="310" frameBorder="0" scrolling="no"></iframe>
                        </td>
                </tr>
            </table>

2.后台代码部分
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;
using System.Xml;
using System.Xml.Xsl;
using System.Xml.XPath;
using System.IO;

public partial class include_ghfWeather : System.Web.UI.UserControl
{
    //与WWW.163.COM上城市与城市代码一致
    string[] city = new string[] { "上海", "北京", "安徽", "黑龙江", "山东", "湖北", "山西", "福建", "湖南", "陕西", "甘肃", "吉林", "广东", "江苏", "四川", "广西", "江西", "天津", "贵州", "辽宁", "西藏", "海南", "内蒙古", "新疆", "河北", "宁夏", "云南", "河南", "青海", "浙江", "重庆" };
    string[] citycode = new string[] { "58367", "54511", "58321", "50953", "54823", "57494", "53772", "58847", "57679", "57036", "52889", "54161", "59287", "58238", "56294", "59431", "58606", "54527", "57816", "54342", "55591", "59758", "53463", "51463", "53698", "53614", "56778", "57083", "52866", "58457", "57516" };
    protected void Page_Load(object sender, EventArgs e)
    {       
        if (!IsPostBack)
        {
            DropDownList1.Items.Clear();
            for (int i = 0; i < city.Length; i++)
            {
                DropDownList1.Items.Add(city[i].ToString());
            }
            lbWeather.Text = getWeather("0");
        }      

    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        for (int i = 0; i < citycode.Length; i++)
        {
            if (DropDownList1.SelectedValue == city[i].ToString())
            {
                lbWeather.Text = getWeather(citycode[i]);
                DropDownList1.SelectedValue = city[i].ToString();
                break;
            }
        }
    }

    public string getWeather(string cityCode)//获取www.163.com上的XML天气,此处以上海为默认,上海的城市代码在163上就是"58367"
    {
        if (cityCode.Length <= 4) cityCode = "58367";
        XmlDocument xmlDoc = new XmlDocument();
        try
        {
            xmlDoc.Load("http://www.163.com/inc/weatherxml/"+cityCode+".xml");
        }
        catch(Exception ex)
        {
            ex.Message.ToString();
        }
        XmlNode xnode = xmlDoc.DocumentElement;
        XmlNode node = xnode.FirstChild;
//直拉获取XML上的子节点的信息
        string weather = node.Attributes.Item(0).Value + ":" + node.Attributes.Item(2).Value + " <br>温度:" + node.Attributes.Item(3).Value + " <br>阵风:" + node.Attributes.Item(4).Value;
        return (weather);
    }
    //    //http://www.163.com/inc/weatherxml/58367.xml
}

/Files/stevegu1978/include.rar

posted on 2007-07-10 13:44  MACCA  阅读(786)  评论(4编辑  收藏  举报