Ajax 学习 一 Accordion和AccordionPane 试运行

Ajax 学习 一 Accordion和AccordionPane 试运行

http://www.asp.net/ajax/ajaxcontroltoolkit/samples，看看AjaxControlToolkit能干些什么特别的事，或者说原来的ASPX或HTML页面不能简单做到的事情。

简单拿几个里面的例子看看它是怎么干活的？

第一个控件例子 Accordion，叫折叠控件。要用这个控件，依照以下步骤

第一：VS2008新建web网站AjaxExample。打开默认Default.aspx页面，拖一个Accordion控件放进Form框里。在这里可以看到，VS里自动给咱们的文件添加了下面这些代码

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

意思是 注册程序集名字叫AjaxControlToolkit，命名空间AjaxControlToolkit，标签前缀是asp。这边标签改成ajaxToolkit，比较直观，叫asp怪怪的。

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

页面上控件处的代码是：

<ajaxToolkit:Accordion ID="Accordion1" runat="server">
</ajaxToolkit:Accordion>

 继续，

< ajaxToolkit:Accordion ID = " Accordion1 " runat = " server " >
< Panes >
< ajaxToolkit:AccordionPane runat = " server " >
</ ajaxToolkit:AccordionPane >
</ Panes >
</ ajaxToolkit:Accordion >

这边以为可以了，结果视图报错：呈现控件时出错，发生异常，集合已经修改，可能无法执行枚举操作，为什么报这个错呢？经过多次试验，发现啊，<ajaxToolkit:AccordionPane runat="server">这个玩意不能少2个必要的属性，一个是HeaderCssClass,一个是ContentCssClass.随便给个值，就不报错了，这个设计的。。。

   <ajaxToolkit:Accordion ID="d" runat="server" HeaderCssClass="headerCssClass" ContentCssClass="ContentCssClass">
            <Panes>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        头</Header>
                    <Content>
                        内容</Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>

最简单的可拉伸控件出来了。好了，F5测试，错误。

ID 为“Accordion1_AccordionExtender”的控件需要页面上有 ScriptManager。ScriptManager 必须在任何需要它的控件之前出现。 

告诉我哪边有问题了，好了，拉个ScriptManager过来放控件的前面，注意要在前面.样子比较丑，来添加个CSS样式表

.headerCssClass
{
border : 1px solid #2F4F4F ;
color : white ;
background-color : #2E4d7B ;
font-family : Arial, Sans-Serif ;
font-size : 12px ;
font-weight : bold ;
padding : 5px ;
margin-top : 5px ;
cursor : pointer ;
}
.ContentCssClass
{
background-color : #D3DEEF ;
border : 1px dashed #2F4F4F ;
border-top : none ;
padding : 5px ;
padding-top : 10px ;
}

F5,oK,没有问题。

继续添加一个拉伸子块

   <ajaxToolkit:Accordion ID="d" runat="server" HeaderCssClass="headerCssClass" ContentCssClass="ContentCssClass">
            <Panes>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        头1</Header>
                    <Content>
                        内容1</Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        头2</Header>
                    <Content>
                        内容2</Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>

OK，这样就有2个面板了，满足了切换的基本操作。F5，点了没反应，在这边，花了偶2小时才发现一个问题，太粗心了。细心的人应该在看一个类库时候看完整它里面的内容。VS2008自带的AJAX EXtension 里面有个 ScriptManager ,我想当然的拖了这个上去，其实这边就错了，因为AjaxControlToolkit自身已经自带了一个

ToolkitScriptManager，而且这个ToolkitScriptManager和VS2008里自带的是不兼容的，一个页面只能有一个Manager，所以，一个页面里你要么用VS2008自带的AJAX要么用AjaxControlToolkit这个另外一个类库，两者里面的东西千万不可以混着用,否则错误得找半天。郁闷。。。凡事不能太想当然。

贴出一个完整的代码

View Code

<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " WebForm2.aspx.cs " Inherits = " AjaxExample.WebForm2 " %>

<% @ Register Assembly = " AjaxControlToolkit " Namespace = " AjaxControlToolkit " TagPrefix = " ajaxToolkit111 " %>
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
< title ></ title >
< link href = " StyleSheet.css " rel = " stylesheet " type = " text/css " />
</ head >
< body >
< form id = " form1 " runat = " server " >
< div >
< ajaxToolkit111:ToolkitScriptManager ID = " s " runat = " server " >
</ ajaxToolkit111:ToolkitScriptManager >
< ajaxToolkit111:Accordion ID = " MyAccordion " runat = " server " SelectedIndex = " 0 " HeaderCssClass = " accordionHeader "
ContentCssClass = " accordionContent " FadeTransitions = " false " FramesPerSecond = " 40 "
TransitionDuration = " 250 " AutoSize = " None " RequireOpenedPane = " false " SuppressHeaderPostbacks = " true " >
< Panes >
< ajaxToolkit111:AccordionPane ID = " AccordionPane1 " runat = " server " >
< Header >
aa </ Header >
< Content >
a
</ Content >
</ ajaxToolkit111:AccordionPane >
< ajaxToolkit111:AccordionPane ID = " AccordionPane2 " runat = " server " >
< Header >
< a href = "" class = " accordionLink " > 2 . AutoSize </ a ></ Header >
< Content >
b
</ Content >
</ ajaxToolkit111:AccordionPane >
</ Panes >
</ ajaxToolkit111:Accordion >
</ div >
</ form >
</ body >
</ html >

posted on 2011-02-16 18:25  人的本质是什么？ 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/PirateCaptain/articles/1956346.html