如何使用jQuery,CSS,JSON和ASP.NET创建新闻轮换控件

2023-06-27 10:01

短信预约 -IT技能 免费直播动态提醒

本篇内容介绍了“如何使用jQuery,CSS,JSON和ASP.NET创建新闻轮换控件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

这个新闻轮换控件能在网页上的同一个地方显示几条新闻。新闻被拆开几页，为了放置在一个指定的区域。每一页也能包含一对新闻列表。通过点击底部的页码，能够在不同的页面之间导航，点击页的每个新闻项，就能查看新闻的详细信息。新闻能像幻灯片一样去查看。它提供自动切换下一个（幻灯片）功能，以及过渡的样式。

使用 JQuery 为了：

对 web server 进行 JQuery Ajax Request 请求，得到 JSON 格式新闻

绑定数据（JSON 格式的新闻）到 HTML 控件

在数据 binding 之后设置控件的样式

新闻之间的导航

用户交互

改变和设置样式

实现 javascript 的效果新闻滚动控件使用 ASP.NET 从新闻存储（例如数据库，xml文件，rss，...）汇集新闻。将它转化成指定类型（NewsItem）。然后将 newsItem 对象的集合转化成 JSON 格式的数据，作为新闻的数据来源发送到客户端。

这个控件使用开源的 Json.NET 类库，它使 JSON 格式的数据在 .NET 中使用更加的方便。这个类库的关键的功能包括一个灵活的 JSON 序列化，能快速的将 .net 类转换成 JSON ，将 JSON 转换成 .net 类。

新闻滚动控件主要使用 jQuery Image Rotator sample 的思想。通过 Soh Tanaka 的描述，你能找到更多的关于如何去构造一个滚动的图片效果。

这个新闻滚动控件使用 jQuery Cycle 插件来旋转新闻插件，它是一个轻量级的幻灯片插件，在页面上，这个插件为开发者提供强大的旋转能力来轮转不同类型的 HTML 控件。
你需要使用该控件：
1、引用必要的资源到你的 HTML 页面（.aspx 页面）：

<%@ Register class="lazy" data-src="~/TopNews.ascx" TagName="TopNews" TagPrefix="ctrl" %><body><form id="form1" runat="server"><div><ctrl:TopNews runat="server" id="TopNews1" /></div></form></body>

2、在你的 .aspx 页面中注册和嵌入 TopNews.ascx 控件。

<%@ Register class="lazy" data-src="~/TopNews.ascx" TagName="TopNews" TagPrefix="ctrl" %><body><form id="form1" runat="server"><div><ctrl:TopNews runat="server" id="TopNews1" /></div></form></body>

一开始控件通过调用 DOM 尾部的 JavaScript 的 TopNews() 函数。这个函数向服务端发送一个 Ajax 请求。得到 JSON 格式的新闻。然后将新闻绑定到控件上面。在绑定之后，设置控件的样式，接着滚动新闻。

<script type="text/javascript">new TopNews('#Container', 7,true,6000);</script>

TopNews function parameters:parameter 1(objRoot): newsRotator control container (a jquery selector),the control uses this parameter as a prefix (root object) of everyjquery selector inside the control.this prefix helps to have multiple instanceof control in the page without any worry of jquery selection conflict.parameter 2(newsCountPerPage): number of news items in a page.parameter 3(viewSubtitle): a boolean value makes subtitle sectionof the control enable or disable. the rest of the news titles showsin the subtitle section randomly at the bottom of the current page.parameter 4(Interval): news rotation (slideshow) interval in millisecond.

需要一个服务端来收集新闻。然后将新闻转化成 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 methodsuccess: function(res) { successFn(res, that) },error: errorFn});}

在服务器端，我们像下面这样去实现：

protected void Page_Load(object sender, EventArgs e){// *** Route to the Page level callback 'handler'this.HandleCallbacks();}// Callback routingpublic void 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();}public void FetchAllNews(){List<NewsItem> lsttst = new List<NewsItem>();lsttst.Add(new NewsItem("Environment of Australia",this.ResolveUrl("~/img/news1.jpg"),this.ResolveUrl("~/img/news1_thumb.jpg"),"Australia has a rich variety of endemic legumespecies that thrive in nutrient-poor soils becauseof their symbiosis with rhizobia bacteria and mycorrhizal fungi",DateTime.Now.ToShortDateString()));lsttst.Add(new NewsItem("Economy of Australia",this.ResolveUrl("~/img/news2.jpg"),this.ResolveUrl("~/img/news2_thumb.jpg"),"The Australian dollar is the currency of theCommonwealth of Australia, including Christmas Island,Cocos (Keeling) Islands, and Norfolk Island",DateTime.Now.ToShortDateString()));lsttst.Add(new NewsItem("Demographics of Australia andImmigration to Australia", this.ResolveUrl("~/img/news3.jpg"),this.ResolveUrl("~/img/news3_thumb.jpg"),"Most of the estimated 21.8 million Australians aredescended from colonial-era settlers and post-Federationimmigrants from Europe", DateTime.Now.ToShortDateString()));lsttst.Add(new NewsItem("Religion in Australia",this.ResolveUrl("~/img/news4.jpg"),this.ResolveUrl("~/img/news4_thumb.jpg"),"Australia has no state religion. In the 2006 census,64% of Australians were listed as Christian ofany denomination, including 26% as Roman Catholic and19% as Anglican", DateTime.Now.ToShortDateString()));lsttst.Add(new NewsItem("Education in Australia",this.ResolveUrl("~/img/news5.jpg"),this.ResolveUrl("~/img/news5_thumb.jpg"),"School attendance is compulsory throughout Australia.In most Australian States at 5–6 years of age all childrenreceive 11 years of compulsory education",DateTime.Now.ToShortDateString()));Response.ContentType = "application/json; charset=utf-8";Response.Write(JavaScriptConvert.SerializeObject(lsttst));Response.End();}

“如何使用jQuery,CSS,JSON和ASP.NET创建新闻轮换控件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉