免費(fèi)AI編程助手
這個(gè)新聞?shì)啌Q控件能在網(wǎng)頁(yè)上的同一個(gè)地方顯示幾條新聞。新聞被拆開(kāi)幾頁(yè)，為了放置在一個(gè)指定的區(qū)域。每一頁(yè)也能包含一對(duì)新聞列表。 通過(guò)點(diǎn)擊底部的頁(yè)碼，能夠在不同的頁(yè)面之間導(dǎo)航，點(diǎn)擊頁(yè)的每個(gè)新聞項(xiàng)，就能查看新聞的詳細(xì)信息。新聞能像幻燈片一樣去查看。它提供自動(dòng)切換下一個(gè)（幻燈片）功能，以及過(guò)渡的樣式。
使用 JQuery 為了：
1、對(duì) web server 進(jìn)行 JQuery Ajax Request 請(qǐng)求，得到 JSON 格式新聞 2、綁定數(shù)據(jù)（JSON 格式的新聞）到 HTML 控件 3、在數(shù)據(jù) binding 之后設(shè)置控件的樣式 4、新聞之間的導(dǎo)航 5、用戶交互 6、改變和設(shè)置樣式 7、實(shí)現(xiàn) javascript 的效果新聞滾動(dòng)控件使用 ASP.NET 從新聞存儲(chǔ)（例如數(shù)據(jù)庫(kù)，xml文件，rss，...）匯集新聞。將它轉(zhuǎn)化成指定類(lèi)型（NewsItem）。 然后將 newsItem 對(duì)象的集合轉(zhuǎn)化成 JSON 格式的數(shù)據(jù)，作為新聞的數(shù)據(jù)來(lái)源發(fā)送到客戶端。
這個(gè)控件使用開(kāi)源的 Json.NET 類(lèi)庫(kù)，它使 JSON 格式的數(shù)據(jù)在 .NET 中使用更加的方便。這個(gè)類(lèi)庫(kù)的關(guān)鍵的功能包括一個(gè)靈活的 JSON 序列化，能快速的將 .net 類(lèi)轉(zhuǎn)換成 JSON ，將 JSON 轉(zhuǎn)換成 .net 類(lèi)。了解更多的 Json.NET 類(lèi)庫(kù)（代碼。示例，和文檔），點(diǎn)擊這里。
新聞滾動(dòng)控件主要使用 jQuery Image Rotator sample 的思想。 通過(guò) Soh Tanaka 的描述，你能找到更多的關(guān)于如何去構(gòu)造一個(gè)滾動(dòng)的圖片效果。
這個(gè)新聞滾動(dòng)控件使用 jQuery Cycle 插件來(lái)旋轉(zhuǎn)新聞插件，它是一個(gè)輕量級(jí)的幻燈片插件，在頁(yè)面上，這個(gè)插件為開(kāi)發(fā)者提供強(qiáng)大的旋轉(zhuǎn)能力來(lái)輪轉(zhuǎn)不同類(lèi)型的 HTML 控件。了解更多的 jQuery Cycle 插件，點(diǎn)擊這里。
你需要使用該控件：
1、引用必要的資源到你的 HTML 頁(yè)面（.aspx 頁(yè)面）：
<%@ 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 頁(yè)面中注冊(cè)和嵌入 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、 一開(kāi)始控件通過(guò)調(diào)用 DOM 尾部的 JavaScript 的 TopNews() 函數(shù)。 這個(gè)函數(shù)向服務(wù)端發(fā)送一個(gè) Ajax 請(qǐng)求。得到 JSON 格式的新聞。然后將新聞綁定到控件上面。 在綁定之后，設(shè)置控件的樣式，接著滾動(dòng)新聞。
<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、需要一個(gè)服務(wù)端來(lái)收集新聞。 然后將新聞轉(zhuǎn)化成 JSON 格式，將它發(fā)送到客戶端。
在客戶端，我們使用 Jquery 發(fā)送一個(gè) Ajax 請(qǐng)求去調(diào)用服務(wù)端的方法。
//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
});
}
在服務(wù)器端，我們像下面這樣去實(shí)現(xiàn)：
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();
}
