May 30, 2021 Article blog
This news rotation control displays several news stories in the same place on a Web page. T he news is split several pages in order to be placed in a specified area. E ach page can also contain a pair of news lists. B y clicking on the page number at the bottom, you can navigate between different pages, and you can view the details of the news by clicking on each news item on the page. N ews can be viewed like a slide show. It provides automatic switching to the next (slide) feature, as well as the style of the transition.
Use JQuery to:
1, JQuery Ajax Request request for web server, get JSON format news 2, binding data (JSON format news) to HTML control 3, set the style of the control after the data binding 4, navigation between the news 5, user interaction 6, change and set style 7, implement javascript effect news scroll control using ASP.NET from the news store (e.g. database, xml file, rss). , ... B ringing together the news. C onvert it to a specified type (NewsItem). The collection of newsItem objects is then converted into JSON-formatted data and sent to the client as a data source for the news.
This control uses an open source Json.NET class library, which makes it easier for JSON-formatted data to be used in .NET. K ey features of this class library include a flexible JSON serialization that quickly converts the .net class to the JSON and the JSON to the .net class. L earn more about the Json.NET class library (code). examples, and documentation), click here.
The news scroll control mainly uses the idea of jQuery Image Rotator sample. With Soh Tanaka's description, you'll find out more about how to construct a scrolling picture 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 the power to rotate different types of HTML controls on the page. T
o learn more about the jQuery Cycle plug-in, click here.
You need to use this control:
1. Refer to the necessary resources to your HTML page (.aspx page):
<%@ 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. Register and embed the TopNews.ascx control on your .aspx page.
<%@ 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, the initial control by calling the TopNews() function of JavaScript at the tail of the DOM. T
his function sends an Ajax request to the service side. G
et news in JSON format. T
hen bind the news to the control. A
fter binding, style the control, and then scroll through the news.
<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 every
jquery selector inside the control.this prefix helps to have multiple instance
of 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 section
of the control enable or disable. the rest of the news titles shows
in the subtitle section randomly at the bottom of the current page.
parameter 4(Interval): news rotation (slideshow) interval in millisecond.
4, need a service side to collect news. T he 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 method on the service side.
//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
});
}
On the server side, we do this like this:
protected void Page_Load(object sender, EventArgs e)
{
// *** Route to the Page level callback 'handler'
this.HandleCallbacks();
}
// Callback routing
public void HandleCallbacks()
{
if (string.IsNullOrEmpty(Request.Params["Callback"]))
return;
// *** We have an action try and match it to a handler
switch (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 legume
species that thrive in nutrient-poor soils because
of 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 the
Commonwealth of Australia, including Christmas Island,
Cocos (Keeling) Islands, and Norfolk Island",
DateTime.Now.ToShortDateString()));
lsttst.Add(new NewsItem("Demographics of Australia and
Immigration to Australia", this.ResolveUrl("~/img/news3.jpg"),
this.ResolveUrl("~/img/news3_thumb.jpg"),
"Most of the estimated 21.8 million Australians are
descended from colonial-era settlers and post-Federation
immigrants 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 of
any denomination, including 26% as Roman Catholic and
19% 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 children
receive 11 years of compulsory education",
DateTime.Now.ToShortDateString()));
Response.ContentType = "application/json; charset=utf-8";
Response.Write(JavaScriptConvert.SerializeObject(lsttst));
Response.End();
}