使用 Jquery AJAX 和 C# Page Methods 检索 Yahoo Calendar
这是一个如何使用 Jquery+C# 获取网络上的任何内容并通过 AJAX 加载到 div 中的示例
介绍
这是一个将 Yahoo 日历显示在您的网站中的实用示例。它仅适用于 Yahoo 日历的事件列表视图。我们从 Yahoo 检索 HTML 文本，在 C# 中对其进行清理，将其加载到隐藏的div中，最后将所需的部分选择到目标div中。特别感谢 Encosia 提供的宝贵信息。
使用方法
此示例使用 Jquery 和 C# 进行 AJAX 加载。 这样，您可以将任何网站上的任何信息加载到您网站的div中。 您实际上可以在index.htm中创建整个网站，并交互式地加载不同的内容。
首先 - 包含一些 JavaScript 以调用页面方法和两个div的index.htm - 一个隐藏的，我们在其中临时加载来自 Yahoo 的网页，另一个是将选择的日历加载到的网页。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
td, th
{
border: 1px solid #CCC;
}
.clickable
{
text-decoration: underline;
cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
//Make an AJAX request to a page method
$.ajax({
type: "POST",
url: "PageMethods.aspx/GetCalendar",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#temp").html(msg); //receive an HTML text from Yahoo and
//load it into a hidden div
var calendar = $("#datatable").html(); //select only the calendar
//which is contained in Datatable element
$("#target").html('<table>' + calendar + '</table>'); //Add <table> tags to
//the content
//Optional - add some binding just to open new windows with Google
//maps on click
$('.type1').bind("click", function(e) {
window.open('http://maps.google.com/maps?f=q&source=s_q&hl=en&
geocode=&q=Lucky+Plaza,+304+Orchard+Rd,+Singapore,
+Singapore&sll=1.334718,103.873329&sspn=0.019907,
0.035191&ie=UTF8&ll=1.307817,103.842001&spn=0.019908,
0.035191&z=15&iwloc=A', '_blank', 'status=no,
menubar=no, width = 1000, height = 700, resizable=yes,
scrollbars=yes, toolbar=no, location=no, directories=no');
});
$('.type2').bind("click", function(e) {
window.open('http://maps.google.com/maps?f=q&source=s_q&hl=en&
geocode=&q=singapore+botanic+garden&sll=1.307817,
103.842001&sspn=0.019908,0.035191&ie=UTF8&z=14&iwloc=A',
'_blank', 'status=no, menubar=no, width = 1000,
height = 700, resizable=yes, scrollbars=yes,
toolbar=no, location=no, directories=no');
});
}
});
});
</script>
</head>
<body>
<div id='target'>
</div>
<div id='temp' style='display: none'>
</div>
</body>
</html>
然后是包含内容检索和清理的PageMethods.aspx.cs
using System;
using System.Web;
using System.IO;
using System.Web.Services;
using System.Net;
public partial class PageMethods : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//nothing here
}
[WebMethod]
public static string GetCalendar()
{
//This method is called from JS to return an HTML text from Yahoo calendar
//Call GetWebPage method
string full = GetWebPage("http://sg.calendar.yahoo.com/YYY,
775da9/srt,0/testingcalendar19/?v=42&POS=");
//Get the content inside <body> tags
int index = full.IndexOf("<body >");
int length = full.IndexOf("</BODY>") - index +
"</BODY>".Length;//Get the length of body
string segment = full.Substring(index, length); //get the inside of
//<body>....</body>
segment = segment.Replace("href", "id");//clean links
segment = segment.Replace("Appointment", "Your event type1");//change types
//to custom
segment = segment.Replace("Anniversary", "Your event type2");
segment = segment.Replace("Bill Payment", "Your event type3");
//some more cleaning of images
segment = segment.Replace("http://us.i1.yimg.com/us.yimg.com/
i/us/pim/r/medici/all/sort_up_1.gif", "");
segment = segment.Replace("alt=\"Up\"", "");
//Add custom types
segment = segment.Replace("event type1",
"<span class='type1 clickable'>event type1</span>");
segment = segment.Replace("event type2",
"<span class='type2 clickable'>event type2</span>");
return segment;
}
//Utility to retrieve a web page
public static string GetWebPage(string url)
{
HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url);
WebResponse rsp = req.GetResponse();
Stream s = rsp.GetResponseStream();
StreamReader r = new StreamReader(s);
string content = r.ReadToEnd();
return (content);
}
}
最后是web.config
<?xml version="1.0"?>
<configuration>
<system.web>
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
</system.web>
</configuration>
最后一点 - 如何设置 Yahoo。转到日历，单击共享，选择任何人都可以查看我的日历，复制下面的日历链接（如下所示 - http://sg.calendar.yahoo.com/testingcalendar19）并单击保存。将此链接粘贴到地址栏并访问此 URL。在屏幕上，选择事件列表选项卡。再次复制 URL - 这是您将使用 C# 检索的 URL。它应该如下所示：
http://sg.calendar.yahoo.com/YYY,086309/srt,0/testingcalendar19/?v=42&POS=0
我设置了一个 Yahoo 帐户，日历可以在这里查看：请记住，此示例仅适用于事件列表视图。
请记住在检索之前放置 AJAX 加载图像，并在成功加载后隐藏它。 另外，请随时向您的项目添加漂亮的样式。
历史
- 2009年5月7日：初始发布