使用AJAX Toolkit创建新闻列表
我們很多站點上面都需要顯示新聞列表，由標題和正文組成的。一般客戶都希望實現這樣的效果：
開始的時候只是顯示標題，當點擊標題的時候，再展開正文。再點擊，又可縮回去。
這是典型的AJAX效果，或者說以前你也可以通過javascript來實現。我這篇文章中介紹一下使用ASP.NET AJAX框架來實現的效果
?
1. 靜態的做法
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NewPanelSample._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AJAX" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
<html xmlns="http://www.w3.org/1999/xhtml%22 >
<head runat="server">
??? <title>Untitled Page</title>
??? <style type="text/css">
??????? .Header
???????? {
???????????? background-color:Blue;
???????????? color:Red
??????????? }
??? </style>
</head>
<body>
??? <p>
??????? 這個頁面演示了如何創建一個新聞列表，并且支持展開和收起。【陳希章】 <hr />
??? </p>
??? <form id="form1" runat="server">
??????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????? <div>
??????? <table>
??????? <tr>
??????? <td>???????
??????? <AJAX:Accordion ID="Accordion1" runat="server"
???????????? AutoSize="None" SelectedIndex="-1"
???????????? FadeTransitions="true"
???????????? TransitionDuration="250"
???????????? FramesPerSecond="40"
???????????? RequireOpenedPane="false"
???????????? SuppressHeaderPostbacks="true" HeaderCssClass="Header"
????????????? Width="799px"
???????????? >
???????????? <Panes>
??????????????? <AJAX:AccordionPane ID="p1" runat="server">
??????????????????? <Header>
??????????????????????? <b>這是第一個新聞</b>
??????????????????? </Header>
??????????????????? <Content>
??????????????????????? 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br />
??????????????????? </Content>
??????????????? </AJAX:AccordionPane>
??????????????? <AJAX:AccordionPane ID="p2" runat="server">
??????????????????? <Header>
??????????????????????????? <b>這是第二個新聞</b>
??????????????????? </Header>
??????????????????? <Content>
??????????????????????? 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br />
??????????????????? </Content>
??????????????? </AJAX:AccordionPane>
??????????????? <AJAX:AccordionPane ID="p3" runat="server">
??????????????????? <Header>
??????????????????????????? <b>這是第三個新聞</b>
??????????????????? </Header>
??????????????????? <Content>
??????????????????????? 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br /> 這是新聞的內容<br /><br />
??????????????????? </Content>
??????????????? </AJAX:AccordionPane>
???????????? </Panes>
???????????? </AJAX:Accordion></td>
??????? </tr>
??????? <tr>
??????? <td>這是我的文本</td>
??????? </tr>
??????? </table>
??????? </div>
??? </form>
</body>
</html>
?
?
?
2. 動態綁定數據源的做法
我們上面實現了需要的效果，但那些新聞是靜態的，顯然不是很理想。那么我們有沒有辦法去綁定數據庫呢？請參考下面的修改
頁面代碼大大簡化了
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NewPanelSample._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AJAX" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
<html xmlns="http://www.w3.org/1999/xhtml%22 >
<head runat="server">
??? <title>Untitled Page</title>
??? <style type="text/css">
??????? .Header
???????? {
???????????? background-color:Blue;
???????????? color:Red
??????????? }
??? </style>
</head>
<body>
??? <p>
??????? 這個頁面演示了如何創建一個新聞列表，并且支持展開和收起.【陳希章】<hr />
??? </p>
??? <form id="form1" runat="server">
??????? <asp:ScriptManager ID="ScriptManager1" runat="server" />
??????? <div>
??????? <table>
??????? <tr>
??????? <td>???????
??????? <AJAX:Accordion ID="Accordion1" runat="server"
???????????? AutoSize="None" SelectedIndex="-1"
???????????? FadeTransitions="true"
???????????? TransitionDuration="250"
???????????? FramesPerSecond="40"
???????????? RequireOpenedPane="false"
???????????? SuppressHeaderPostbacks="true" HeaderCssClass="Header"
????????????? Width="799px"
???????????? >
???????????? <HeaderTemplate>
??????????????? <asp:Label ID="lbTitle" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
???????????? </HeaderTemplate>
???????????? <ContentTemplate>
??????????????? <asp:Literal ID="lbDetails" runat="server" Text='<%# Eval("Details") %>'></asp:Literal>
???????????? </ContentTemplate>
???????????? </AJAX:Accordion></td>
??????? </tr>
??????? <tr>
??????? <td>這是我的文本</td>
??????? </tr>
??????? </table>
??????? </div>
??? </form>
</body>
</html>
代碼文件中需要添加數據綁定代碼
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace NewPanelSample
{
??? public partial class _Default : System.Web.UI.Page
??? {
??????? protected void Page_Load(object sender, EventArgs e)
??????? {
??????????? if (!IsPostBack)
??????????????? DataBind();
??????? }
??????? public override void DataBind()
??????? {
??????????? var news = new[]{
??????????????? new {Title="第一個新聞", Details="這是新聞詳細信息<br/><br/><br/>這是新聞詳細信息<br/><br/><br/>"}
??????????????? ,new {Title="第二個新聞", Details="這是新聞詳細信息<br/><br/><br/>這是新聞詳細信息<br/><br/><br/>"}
??????????????? ,new {Title="第三個新聞", Details="這是新聞詳細信息<br/><br/><br/>這是新聞詳細信息<br/><br/><br/>"}
??????????? };
??????????? Accordion1.DataSource = news;
??????????? Accordion1.DataBind();
??????? }
??? }
}
3. 封裝為webpart的做法【待續】
有興趣的朋友可以思考一下，如何將該特性封裝為WebPart
轉載于:https://www.cnblogs.com/chenxizhang/archive/2009/05/16/1458516.html
總結
以上是生活随笔為你收集整理的使用AJAX Toolkit创建新闻列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络自顶向下方法【七】——链路层
- 下一篇： python进阶（十七）xml（下）