使用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>
 
 这个页面演示了如何创建一个新闻列表，并且支持展开和收起。【陈希章】 <hr />
 
 <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>
 这是第一个新闻
 </Header>
 <Content>
 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 
 </Content>
 </AJAX:AccordionPane>
 <AJAX:AccordionPane ID="p2" runat="server">
 <Header>
 这是第二个新闻
 </Header>
 <Content>
 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 
 </Content>
 </AJAX:AccordionPane>
 <AJAX:AccordionPane ID="p3" runat="server">
 <Header>
 这是第三个新闻
 </Header>
 <Content>
 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 这是新闻的内容 
 </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>

</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="这是新闻详细信息 这是新闻详细信息 "}
 ,new {Title="第二个新闻", Details="这是新闻详细信息 这是新闻详细信息 "}
 ,new {Title="第三个新闻", Details="这是新闻详细信息 这是新闻详细信息 "}
 };

Accordion1.DataSource = news;
Accordion1.DataBind();

}
}
}

3. 封装为webpart的做法【待续】

有兴趣的朋友可以思考一下，如何将该特性封装为WebPart