溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何使用jQuery,CSS,JSON和ASP.NET創建新聞輪換控件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
這個新聞輪換控件能在網頁上的同一個地方顯示幾條新聞。新聞被拆開幾頁，為了放置在一個指定的區域。每一頁也能包含一對新聞列表。 通過點擊底部的頁碼，能夠在不同的頁面之間導航，點擊頁的每個新聞項，就能查看新聞的詳細信息。新聞能像幻燈片一樣去查看。它提供自動切換下一個（幻燈片）功能，以及過渡的樣式。
使用 JQuery 為了：
1、對 web server 進行 JQuery Ajax Request 請求，得到 JSON 格式新聞
2、綁定數據（JSON 格式的新聞）到 HTML 控件
3、在數據 binding 之后設置控件的樣式
4、新聞之間的導航
5、用戶交互
6、改變和設置樣式
7、實現 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 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 Src="~/TopNews.ascx" TagName="TopNews" TagPrefix="ctrl" %><body><form id="form1" runat="server"><div><ctrl:TopNews runat="server" id="TopNews1" /></div></form></body>3、 一開始控件通過調用 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.4、需要一個服務端來收集新聞。 然后將新聞轉化成 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創建新聞輪換控件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
