使用 jQuery CSS JSON和 ASP.NET的Yahoo新闻旋转器 !

分享于 

7分钟阅读

Web开发

  繁體

介绍

这个雅虎新闻转子控制为我们提供了在网页同一区域内显示几个主要新闻故事的可以能。 为了将它们放置在指定区域,新闻被分成几页。 每个页面还包含了几个新闻项目。

控件使用jQuery来:

  • 向web服务器发送一个 jQuery AJAX请求以获取JSON格式的新闻
  • 将数据( JSON形式的新闻) 绑定到HTML控件
  • 在数据绑定之后设置控件样式
  • 在新闻之间导航
  • 用户交互
  • 更改和设置样式
  • JavaScript效果

新闻旋转控件使用 ASP.NET 从新闻存储( 例如数据库,XML文件,RSS,。) 收集消息,将消息转换为自定义类型( NewsItem ),然后将 NewsItem 对象的Collection 转换为JSON格式,并将它的作为消息旋转数据源发送到客户端。

这个组件使用开源 Json.NET 库,使. NET 格式的数据更容易在中使用。 关键特性包括灵活的JSON序列化程序,用于快速将. NET 类转换为JSON并再次返回。 在这里阅读更多关于 Json.NET 库( 代码,示例和文档) 的信息。

新闻旋转控件使用jQuery图像旋转示例的主要思想。 你可以了解更多关于如何创建图像旋转器的更多信息,描述为( css/jquery ) Tanaka ,这里是。

我还通过khaksari对新闻旋转控件做了一些更改,这里有可用的

这个新闻旋转控件使用jQuery循环插入消息,它是一个轻量级的幻灯片插入插件。 这个插件使开发者能够在不同的旋转类型中在页面上旋转HTML控件。 了解更多关于循环插件在这里的内容。

使用代码

你所需要使用的控件是:

  • 在你的HTML页面( .aspx 页) 中引用所需资源:
  • <head><scriptsrc='http://www.codeproject.com/jquery.js'type='text/javascript'></script><scriptsrc='http://www.codeproject.com/jquery.cycle.all.min.js'type='text/javascript'></script><scriptsrc='http://www.codeproject.com/TopNews.js'type='text/javascript'></script><linkhref='http://www.codeproject.com/TopNews.css'rel='stylesheet'type='text/css'/></head>
  • 将 TopNews.ascx 控件嵌入到页中:
  • <%@RegisterSrc="~/TopNews.ascx"TagName="TopNews"TagPrefix="ctrl"%><body><formid="form1"runat="server"><div><ctrl:TopNewsrunat="server"id="TopNews1"/></div></form></body>
  • 通过调用控件DOM末尾的JavaScript TopNews() 函数来启动控件。 这里函数向服务器发送AJAX请求,以JSON格式获取新闻,将新闻绑定到控件,设置控件样式。
  • <scripttype="text/javascript">new TopNews('#Container', 7,true,6000);</script>

TopNews函数参数

  • objRoot: 新闻转子控制容器(。jQuery选择器) ;控件使用这里参数作为每个jQuery选择器 inside的前缀( root 对象)。 这里前缀有助于在页面中有多个控件实例,而不必担心jQuery选择冲突。
  • newsCountPerPage: 页面中的新闻条目数。
  • viewSubtitle: 启用或者禁用控件的字幕部分的布尔值。 新闻标题的其余部分在当前页面底部随机显示在字幕部分。
  • 时间间隔:新闻旋转( 幻灯片放映) 间隔毫秒。

它还需要服务器端机制收集消息。将消息转换为JSON格式,并将它们发送到客户端。

在客户端,我们使用jQuery调用服务器方法,并向它发送AJAX请求。

//call ASP.NET page method asynchronous (send and recives data in JSON format)PageMethod: function(fn, paramArray, successFn, errorFn) {
 var pagePath = window.location.pathname;
 var that = this;
 //Call the page method $.ajax({
 type: "POST",
 url: pagePath + "?Callback=" + fn,
 contentType: "application/json; charset=utf-8",
 data: paramArray,
 dataType: "json",
 //that is a reference to the object calling this callback method success: function(res) { successFn(res, that) },
 error: errorFn
 });
}

在服务器端,我们有:

protectedvoid Page_Load(object sender, EventArgs e)
{
 // *** Route to the Page level callback 'handler'this.HandleCallbacks();
}// Callback routingpublicvoid HandleCallbacks()
{
 if (string.IsNullOrEmpty(Request.Params["Callback"]))
 return;
 // *** We have an action try and match it to a handlerswitch (Request.Params["Callback"])
 {
 case"fetchAllNews":
 this.FetchAllNews();
 break;
 }
 Response.StatusCode = 500;
 Response.Write("Invalid Callback Method");
 Response.End();
}publicvoid FetchAllNews()
{
 List<NewsItem> lsttst = new List<NewsItem>();
 lsttst.Add(new NewsItem("Group 1", 
 this.ResolveUrl("~/img/news1.jpg"), 
 "http://www.yahoo.com", 
 this.ResolveUrl("~/img/news1.jpg"), 
 "This is a description about image 1.. .", 
 DateTime.Now.ToShortDateString()));
 lsttst.Add(new NewsItem("Group 2", 
 this.ResolveUrl("~/img/news2.jpg"), 
 "http://www.msn.com", 
 this.ResolveUrl("~/img/news2.jpg"), 
 "This is a description about image 2.. .", 
 DateTime.Now.ToShortDateString()));
 lsttst.Add(new NewsItem("Group 3", 
 this.ResolveUrl("~/img/news3.jpg"), 
 "http://www.msn.com", 
 this.ResolveUrl("~/img/news3.jpg"), 
 "This is a description about image 3.. .", 
 DateTime.Now.ToShortDateString()));
 lsttst.Add(new NewsItem("Group 4", 
 this.ResolveUrl("~/img/news4.jpg"), 
 "http://www.microsoft.com", 
 this.ResolveUrl("~/img/news4.jpg"), 
 "This is a description about image 4.. .", 
 DateTime.Now.ToShortDateString()));
 Response.ContentType = "application/json; charset=utf-8";
 Response.Write(
 Newtonsoft.Json.JavaScriptConvert.SerializeObject(lsttst));
 Response.End();
}

源代码包含注释以说明有关这里控件如何工作的更多详细信息。

历史记录

  • 20th 2009年12月: 初始版本。

asp  asp-net  NEWS  Yahoo  Rotator  
相关文章