Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use jQuery,CSS,JSON and ASP.NET to create news rotation controls". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

This news rotation control can display several pieces of news in the same place on the web page. The news was taken apart for several pages in order to be placed in a designated area. Each page can also contain a pair of news lists. By clicking on the page number at the bottom, you can navigate between different pages and click on each news item on the page to view the details of the news. The news can be viewed like a slide show. It provides automatic switching to the next (slide) function, as well as the transition style.

Use JQuery in order to:

1. Make a JQuery Ajax Request request to web server to get news in JSON format

2. Bind data (news in JSON format) to HTML control

3. Style the control after the data binding

4. Navigation between news

5. User interaction

6. Change and set the style

7. Implement the effect of javascript News scrolling control uses ASP.NET to aggregate news from news stores (such as databases, xml files, rss,...). Converts it to the specified type (NewsItem). The collection of newsItem objects is then converted into data in JSON format and sent to the client as a data source for news.

This control uses the open source Json.NET class library, which makes data in JSON format easier to use in .NET. The key features of this class library include a flexible JSON serialization that quickly converts .net classes to JSON and JSON to .net classes.

News scrolling controls mainly use the idea of jQuery Image Rotator sample. Through Soh Tanaka's description, you can find out more about how to construct a scrolling image effect.

This news scrolling control uses the jQuery Cycle plug-in to rotate the news plug-in, which is a lightweight slide plug-in that provides developers with powerful rotation capabilities to rotate different types of HTML controls on the page.

You need to use this control:

1. Quote the necessary resources to your HTML page (.aspx page):

2. Register and embed TopNews.ascx controls in your .aspx page.

3. At first, the control calls the TopNews () function of the JavaScript at the end of the DOM. This function sends an Ajax request to the server. Get news in JSON format. Then bind the news to the control. After binding, style the control, and then scroll the news.

New TopNews: 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. A server is needed to collect news. The news is then converted into JSON format and sent to the client.

On the client side, we use Jquery to send an Ajax request to invoke the server-side method.

/ / 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});}

On the server side, we implement it as follows:

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 = 500th response. Write ("Invalid Callback Method"); Response.End () } public void FetchAllNews () {List lsttst = new List (); 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.8million 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 ();}" how to create news rotation controls using jQuery,CSS,JSON and ASP.NET "ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.