zoukankan      html  css  js  c++  java
  • 动态创建ASP.NET AJAX Control Toolkit中的Accordion控件

    在一项目中,欲使用ASP.NET AJAX Control Toolkit中的Accordion控件
    效果如下:

    哈哈,眼熟吧,用的是Matt大牛的东西,这老哥的美工和程序结合的简直太完美了!!!!Matt大牛的原文
    套用了Matt大牛的的css文件和图像文件,开工了!
    麻烦来了,
    Matt大牛原文的数据结构,标题是硬编码的,列表项用的是ListView绑定Obj数据源。
    可我的项目要求,标题和列表项均从数据库中产生。数据用链表形式表示,在一个数据表中。

    改!
    用数据绑定?不行,Accordion控件的数据绑定的数据格式只支持,title,content,这样的结构。我这样的数据结构不支持!
    用MATT大牛的方式,中间再绑定一个ListView,两个数据控件之间的交互比较困难!!头疼啊!!

    用GooGle搜了一下,中文的资料根本就没有,只有老赵的博客中有一篇,描述了将DataTable绑定到Accordion控件,但也是title,content,这样的结构。

    在英文的asp.net的论坛中搜索了一下,找到了一个解决方法:
    原文
    哈哈,改成自己的:
    Aspx代码:

    <ajaxToolkit:Accordion runat="server" ID="accordion" FadeTransitions="false" RequireOpenedPane="true" AutoSize="None" CssClass="accordion" HeaderCssClass="header" ContentCssClass="content">
    </ajaxToolkit:Accordion> 

    c#代码
    /*
    您自己的获取数据库代码
    取得是标题内容
    */

    foreach (res in result)
    {
        i 
    ++;       //计数器,配合创建ID使用
        
    //创建折叠面板对象
        AjaxControlToolkit.AccordionPane p = new AjaxControlToolkit.AccordionPane();
                    
        
    //为折叠面板创建ID
        p.ID = "AccordionPane_" + i.ToString();
                    
        
    //将标题加入折叠面板头部
         p.HeaderContainer.Controls.Add(res.title);

        
    /*
            您自己的取标题链接的数据库内容的代码
        
    */

        
        
    foreach (var menures in menuResult)
        
    {
            
    /*
                根据您自己的需要,创建面板中的内容,我的程序内容格式为
                  <ul>
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    <li>内容4</li>
                    <li>内容5</li>
                    <li>内容6</li>
                </ul>
            
    */

        }

        
    //创建折叠面板内容
         p.ContentContainer.Controls.Add(ul);
        
        
    //将创建的折叠面板加入到页面的控件中。
         accordion.Panes.Add(p);
    }

    编译,测试运行,大功告成!!!

    与同好共勉!!!
  • 相关阅读:
    符合RESTful规范的API
    DRF 认证、权限、限制
    RESTful API终极版序列化封装
    RESTful API
    Django REST Framework
    前端之promise
    VueRouter
    Vue的生命周期
    三种常用的js数组去重方法
    dos命令查看端口状态
  • 原文地址:https://www.cnblogs.com/panda/p/1228293.html
Copyright © 2011-2022 走看看