AJAX控件——多重合弹出Accordion使用AJAX Toolkit创建新闻列表。

 

咱多站点上面都得展示新闻列表,由标题和正文组成的。一般客户还要实现如此的职能:

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

betway必威官网 1

betway必威官网 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();

        }
    }
}

betway必威官网 3

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

出趣味的恋人可以考虑一下,如何用欠特性封装为WebPart

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图