利用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%">
<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: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
}