网站服务器部署,合肥大型网站制,网站开发未来发展趋势,如何做手机app软件我们很多站点上面都需要显示新闻列表#xff0c;由标题和正文组成的。一般客户都希望实现这样的效果#xff1a; 开始的时候只是显示标题#xff0c;当点击标题的时候#xff0c;再展开正文。再点击#xff0c;又可缩回去。 这是典型的AJAX效果#xff0c;或者说以前你也…我们很多站点上面都需要显示新闻列表由标题和正文组成的。一般客户都希望实现这样的效果 开始的时候只是显示标题当点击标题的时候再展开正文。再点击又可缩回去。 这是典型的AJAX效果或者说以前你也可以通过javascript来实现。我这篇文章中介绍一下使用ASP.NET AJAX框架来实现的效果 1. 静态的做法 % Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsNewPanelSample._Default % % Register assemblyAjaxControlToolkit namespaceAjaxControlToolkit tagprefixAJAX % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22 html xmlnshttp://www.w3.org/1999/xhtml%22 head runatserver titleUntitled Page/title style typetext/css .Header { background-color:Blue; color:Red } /style /head body p 这个页面演示了如何创建一个新闻列表并且支持展开和收起。【陈希章】 hr / /p form idform1 runatserver asp:ScriptManager IDScriptManager1 runatserver / div table tr td AJAX:Accordion IDAccordion1 runatserver AutoSizeNone SelectedIndex-1 FadeTransitionstrue TransitionDuration250 FramesPerSecond40 RequireOpenedPanefalse SuppressHeaderPostbackstrue HeaderCssClassHeader Width799px Panes AJAX:AccordionPane IDp1 runatserver 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 IDp2 runatserver 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 IDp3 runatserver 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 LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsNewPanelSample._Default % % Register assemblyAjaxControlToolkit namespaceAjaxControlToolkit tagprefixAJAX % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22 html xmlnshttp://www.w3.org/1999/xhtml%22 head runatserver titleUntitled Page/title style typetext/css .Header { background-color:Blue; color:Red } /style /head body p 这个页面演示了如何创建一个新闻列表并且支持展开和收起.【陈希章】hr / /p form idform1 runatserver asp:ScriptManager IDScriptManager1 runatserver / div table tr td AJAX:Accordion IDAccordion1 runatserver AutoSizeNone SelectedIndex-1 FadeTransitionstrue TransitionDuration250 FramesPerSecond40 RequireOpenedPanefalse SuppressHeaderPostbackstrue HeaderCssClassHeader Width799px HeaderTemplate asp:Label IDlbTitle runatserver Text%# Eval(Title) %/asp:Label /HeaderTemplate ContentTemplate asp:Literal IDlbDetails runatserver 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
