使用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>

image

image

 

 

 

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();

        }
    }
}

image

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

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

转载于:https://www.cnblogs.com/chenxizhang/archive/2009/05/16/1458516.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/463443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

生活规则

1.朋友请你吃饭&#xff0c;不要觉得理所当然&#xff0c;请礼尚往来&#xff0c;否则你的名声会越来越臭。 2.给自己定目标&#xff0c;一年&#xff0c;两年&#xff0c;五年&#xff0c;也许你出生不如别人好&#xff0c;通过努力&#xff0c;往往可以改变70%的命运。破罐子…

[AX]AX2012 SSRS报表使用Report Data Method

在AX2012的SSRS报表中可以使用c#或者Visual basic .net编写report data method来获取和操作数据&#xff0c;由report data method返回的数据可以用在报表的表达式中&#xff0c;也可以用作dataset的数据源。 使用Report data method首先需要创建AX model工程&#xff0c;在工程…

为什么分布式一定要有redis,redis的一些优缺点

1、为什么使用redis 分析:博主觉得在项目中使用redis&#xff0c;主要是从两个角度去考虑:性能和并发。当然&#xff0c;redis还具备可以做分布式锁等其他功能&#xff0c;但是如果只是为了分布式锁这些其他功能&#xff0c;完全还有其他中间件(如zookpeer等)代替&#xff0c;…

Google protobuf使用技巧和经验

Google protobuf是非常出色的开源工具&#xff0c;在项目中可以用它来作为服务间数据交互的接口&#xff0c;例如rpc服务、数据文件传输等。protobuf为proto文件中定义的对象提供了标准的序列化和反序列化方法&#xff0c;可以很方便的对pb对象进行各种解析和转换。以下是我总结…

show部分书...

继续购入中 转载于:https://www.cnblogs.com/Clingingboy/archive/2009/06/09/1499816.html

HTTP_POST———使用mysql_udf与curl库完成http_post通信模块(mysql_udf,multi_curl,http,post)...

HTTP_POST———使用mysql_udf与curl库完成http_post通信模块&#xff08;mysql_udf,multi_curl,http,post&#xff09; 这个模块其目前主要用于xoyo江湖的sns与kingsoft_xoyo自主研发的TCSQL数据库做数据同步&#xff0c;当有feed插入sns数据库&#xff0c;使用触 发器调用该模…

LevelDb实现原理

原文地址&#xff1a;http://www.samecity.com/blog/Index.asp?SortID12&#xff0c; 最近由于工作上的需求&#xff0c;需要用到leveldb&#xff0c;因此转载此文章用于以后的查询使用。 LevelDb日知录之一&#xff1a;LevelDb 101 说起LevelDb也许您不清楚&#xff0c;但是…

排序 八种经典排序算法

排序(Sorting) 是计算机程序设计中的一种重要操作&#xff0c;它的功能是将一个数据元素(或记录)的任意序列&#xff0c;重新排列成一个关键字有序的序列。 我整理了以前自己所写的一些排序算法结合网上的一些资料&#xff0c;共介绍8种常用的排序算法&#xff0c;希望对大家能…

Redis使用过程出现类型转换异常问题- 20190220

问题描述&#xff1a; 使用redis过程中&#xff0c;出现类型转换异常问题&#xff0c;出现在存数据和取数据时。而且相同代码在本地测试无异常&#xff0c;而提交到测试环境&#xff0c;则会出现问题。 问题原因&#xff1a; 最后定位到&#xff0c;原因在使用redis存取数据时&…

表达式求值Spring.Expressions

简介Spring.Expressions命名空间可以用一种强大的表达式语言在运行时操作对象。这种语言可以读写属性值、调用方法、访问数组/集合/索引器的元素、进行算术和逻辑运算&#xff0c;同时支持命名变量&#xff0c;并且能够通过名称从IoC容器获取对象。 在Spring.NET中&#xff0c…

MarshalByRefObject 的DOME代码

今天研究了下MarshalByRefObject跨程序通讯&#xff0c;由于今天很晚了&#xff0c;先贴出DOME代码。 分别建立2个winform程序&#xff0c;WinClient和WinServer&#xff0c;2个项目中都有CommunicationInfo类&#xff08;你也可以将CommunicationInfo做成一个类库供2个winform…

坐地铁的好心MM们小心啊,周末刚经历了一个地铁新骗术

先废话少说&#xff0c;直奔主题。这个周日&#xff0c;也就是昨天&#xff0c;很开心的和BF坐5号线去东单看电影&#xff0c;在惠新西街南口那站上来一个小姑娘&#xff0c;也就11&#xff0c;12岁那样&#xff0c;穿着小背心、短裤&#xff0c;脖子上还挂着类似学生证一类的牌…

XNA中的Render State管理

XNA中的Render State管理 仅供个人学习使用&#xff0c;请勿转载&#xff0c;勿用于任何商业用途。 The Problem&#xff1a; XNA中一个设计的非常不好的地方&#xff0c;就是把各种render state定义为RenderState类的成员&#xff0c;而不是枚举。在DX/MDX中&#xff0c…

统一项目管理平台(UMPlatForm.NET)-4.7 组织机构管理模块

统一项目管理平台&#xff08;UMPlatForm.NET&#xff09; 4.7 组织机构管理模块 统一项目管理平台&#xff08;UMPlatForm.NET&#xff09;,基于.NET的快速开发、整合框架。 4.7 组织机构管理模块 组织机构管理模块提供直观方便的组织机构管理&#xff0c;以树型结构显示单位和…

开源GIS系统关系图

转载于:https://www.cnblogs.com/penglink/archive/2009/06/26/1511373.html

c++常用知识点,易错点,面试常问点

1.谈谈你对C内存分配的理解1.1 还是的先看看C对内存分为哪几个区&#xff1f;1、栈区&#xff08;stack&#xff09;— 由编译器自动分配释放 &#xff0c;存放函数的参数值&#xff0c;局部变量的值等。其操作方式类似于数据结构中的栈。想知道为什么效率高吗&#xff1f;因为…

利用ACS来实现AAA服务

ACS简介思科安全访问控制服务器&#xff08;Cisco Secure Access Control Sever&#xff09;是一个高度可扩展、高性能的访问控制服务器&#xff0c;提供了全面的身份识别网络解决方案&#xff0c;是思科基于身份的网络服务(IBNS)架构的重要组件。Cisco Secure ACS通过在一个集…

C/C++二维数组名和二级指针的联系与区别

1. 指针 1.1 一个指针包含两方面&#xff1a;a) 地址值&#xff1b;b) 所指向的数据类型。 1.2 解引用操作符&#xff08;dereference operator&#xff09;会根据指针当前的地址值&#xff0c;以及所指向的数据类型&#xff0c;访问一块连续的内存空间&#xff08;大小由指针所…

BN层

论文名字&#xff1a;Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift 论文地址&#xff1a;https://arxiv.org/abs/1502.03167 BN被广泛应用于深度学习的各个地方&#xff0c;由于在实习过程中需要修改网络&#xff0c;修改的…

深入浅出 Javascript API(二)--地图显示与基本操作 转

深入浅出 Javascript API&#xff08;二&#xff09;--地图显示与基本操作 地图显示与基本操作&#xff08;放大、缩小、移动、坐标显示&#xff09;是JavascriptAPI的基本功能&#xff0c;也是一个WebGIS应用的基本内容&#xff0c;Javascript提供了非常便捷的开发方法&#x…