我们很多站点上面都需要显示新闻列表，由标题和正文组成的。一般客户都希望实现这样的效果：

开始的时候只是显示标题，当点击标题的时候，再展开正文。再点击，又可缩回去。

这是典型的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创建新闻列表相关推荐

  1. P35-前端基础-新闻列表

    P35-前端基础-新闻列表 1.概述 通过一个新闻列表案例,总结前面学习CSS的基础知识. 2.新闻列表案例 2.1.案例用到的图片 2.2.案例代码 <!DOCTYPE html> &l ...

  2. 尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS

    跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录 一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结 删除行内元 ...

  3. CSS盒子模型总结（小练习网易新闻列表和京东导航条）

    css盒子模型 边框(border) 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style border-width 默认值为3px 可以用 ...

  4. Ajax — 新闻列表

    注意:本项目主要利用到了template,模板引擎进行编写 模板引擎代码下载地址 <div id="news-list"><!-- 这里放数据 -->< ...

  5. python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)...

    python操作mysql⑥新闻管理后台功能的完善(增.删.改.查) 安装表单验证 D:\python\python_mysql_redis_mongodb\version02>pip inst ...

  6. 一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）

    前面三篇文章实现了第一个目标,即无刷新分页.本文将实现第二个目标,即预览新闻内容.有两种方法可以实现内容的预览,一个是ajax,一个是伪ajax(姑且这么叫). 我们先用伪ajax实现新闻内容的预览. ...

  7. （仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据

    文章目录 一.点击过的新闻列表文字变灰 效果图 实现思路 导入ormlite数据库类依赖 利用ormlite创建数据库和表 创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...

  8. ajax获取网页新闻,基于Ajax的新闻网页动态数据的抓取方法及系统

    主权项: 1.基于Ajax的新闻网页动态数据的抓取方法,其特征是,包括如下步骤:步骤(101):建立新闻网页爬取内容数据库,设置新闻网页爬取内容数据库的编码方式:获得待抓取新闻网页的新闻列表页面的UR ...

  9. React Native ：加载新闻列表

    代码地址如下: http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面 ...

最新文章

  1. ftp+nginx+lua_Nginx+GraphicsMagick来实现目录浏览、实时缩略图
  2. Enews博客/CMS/双模式主题源码
  3. 【英语学习】【Level 08】U05 Better option L3 Everything's a click away
  4. 机器学习1/100天-数据预处理
  5. 是什么让你的ExtJS应用程序运行缓慢？
  6. Android 手机设置CMWAP 接入点
  7. java中使用阻塞队列实现生产这与消费这之间的关系
  8. ubutun 干净卸载删除deepin-wineQQ
  9. unity NOPI 创建word文档
  10. NVIDIA vGPU应用
  11. 西安计算机专业大专排名及分数线,西安所有的大学名单及排名分数线(本科 专科)...
  12. sklearn中make_blobs模块使用
  13. 聊聊我在职场的至暗时刻！
  14. 谷歌的AI布局：机器学习是重心 继续在中国招人
  15. Anaconda打开多个spyder窗口
  16. 【蓝桥杯：嵌入式】\Sre\main: error: argument of type “uint16_t *“ is incompatible with parameter of typ
  17. 软件项目管理和工作流程文集(CMMI)
  18. 大漠天使后台绑定测试工具
  19. Linux操作系统之文件系统详解
  20. 为什么是 import cv2呢

热门文章

  1. 米莱狄的机器人是_王者荣耀2.22更新：米莱狄机器人化身超级兵，狂铁将成T1级战士...
  2. eclipse提示方法已过时_提高效率，eclipse上你可能不知道的技巧
  3. vspy如何在图形面板显示报文_设备实时状态监控：如何进行工业生产设备数据采集？...
  4. 树状数组维护区间和的模型及其拓广的简单总结
  5. 《Python Cookbook 3rd》笔记（5.1）：读写文本数据
  6. python官网网址是什么意思_大家都是怎么部署python网站的？
  7. 哈希表和有序表的简单介绍
  8. 使用openssl开源AES算法，实现aes、aes-cbc和aes-ecb对字符串的加解密
  9. 英语口语-文章朗读Week10 Wednesday
  10. Java命令：jstat — 查看JVM的GC信息