AccordionPane ID=”Pane1″ runat=”server”&gtAJAX框架来兑现的效果。

 

俺们多站点上面还需要出示新闻列表,由标题和正文组成的。一般客户还指望实现如此的法力:

 <asp:Accordion ID=”Accordion1″ runat=”server”
ContentCssClass=”content” HeaderCssClass=”header” >
            <Panes>
                <asp:AccordionPane ID=”Pane1″ runat=”server”>
                    <Header>
                        出战成疑!詹皇就与无对抗训练
                    </Header>
                    <Content>
                       
北京时间10月16日,据《克里夫兰老实人》报道,骑士队元帅泰伦-卢表示,勒布朗-詹姆斯就列席了今球队的同一不怎么一些训练,他能否参加常规赛揭幕战及凯尔特人的竞赛还是不得而知。
                       
詹姆斯是以骑士队之教练营中不慎左脚踝扭伤。另外,他在上周铁骑和公牛的季前赛中左脚踝再度受伤,而那是詹姆斯与的绝无仅有一摆季前赛。
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID=”Pane2″ runat=”server”>
                    <Header>
                        大帝缺席合练揭幕战或无由
                    </Header>
                    <Content>
                       
北京时间10月16日,据美媒报道,乔尔-恩比德今天本无到位训练,但费城76总人口帅布雷特-布朗预计他可能会见亮相揭幕战。明天恩比德用会见到全队合练。
据记者Jessica
                       
Camerato发推报道:“恩比德今天不许到场训练,但布朗教练预计他可以到(当地时间)周三对奇才的揭幕战。”
《费城咨询询报》记者Marc
Narducci则报道称,布朗教练透露,恩比德用与明天底球队合练。
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID=”Pane3″ runat=”server”>
                    <Header>
                        马刺以倒下一个先发!
                    </Header>
                    <Content>
                       
北京时间10月16日,据美媒报道,圣安东尼奥马刺近日公布实行德章泰-穆雷合同中第3年之球队选项。但在此之前,穆雷还要先留伤,据格雷格-波波维奇透露,臀部受伤的穆雷有些许僵硬,无法移动。
                       
据NBA官网报道,马刺今天披露,他们已尽了后卫穆雷合同中第3年,即2018-19赛季的球队选项。
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID=”Pane4″ runat=”server”>
                    <Header>
                        新独立三大宗磨合最老紧在当时!
                    </Header>
                    <Content>
                       
北京时间10月16日,据《雅虎体育》报道,拉塞尔-威斯布鲁克认为,俄都雷霆之磨合需要时日,可能用一整个赛季。保罗-乔治感慨追不上威少的脚步,能在场上和威少举行队友是种浪费。主帅比利-多诺万则意味着,三大亨对不同见解还操开放姿态,并甘当尝鲜,他无担心三要员的磨合。
                       
在2016-17赛季开个人传奇的威少,如今虽只要双重寻找如何以组建于三大人物的雷霆阵中持续剧表现。保罗-乔治和卡梅罗-安东尼相继来到,意味着终于有人会分担威少在出击端的重负。
                    </Content>
                </asp:AccordionPane>
            </Panes>
        </asp:Accordion>

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

即时是杰出的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>

图片 1

图片 2

 

 

 

  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”
             >
             <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

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

有趣味之情人可以考虑一下,如何以欠特性封装为WebPart

相关文章