Ajax控件练习 Accordion 和 Cascade

Accordion快速回顾
Accordion快速回顾
   1.Accordion 
      1.静态的 Accordion（n多属性） Panes AccordionPane（一个runat="server" 加2个节点Header Content）
      2.动态的 Accordion（n多属性）+ 后台代码
        1.foreach AccordionPane pane = new AccordionPane();//实例化面板
        2.pane.HeaderContainer.Controls.Add(hlTitle);//加头
        3.foreach pane.ContentContainer.Controls.Add(hlContent);//加内容
        4.Accordion2.Panes.Add(pane);//面板加到Accordion
   2.Accordion的几个属性
      1.FramesPerSecond是指伸缩内容区域的动画桢数，桢数越大动画就越流畅。
      2.TransitionDuration是指伸缩区域所需要的时间，单位是毫秒，时间越大，伸缩区域所需要的时间就越长。
      3.Autosize
        None（高度可随内容 无限增加）
        Limit（如果不超过Height，就按内容高度，超过就滚动条）
        Fill（始终Height，超过时加滚动条）
   3.我喜欢的设置（当然最后还要加3个样式）
     AutoSize="Fill"//固定后不会影响页面布局
     Height="500"
     BorderWidth="1"
     TransitionDuration="50"//越小切换速度越快，单位毫秒
     FramesPerSecond="100"//越大看着越舒服
     SelectedIndex="0"

CascadingDropDown回顾
1.页面放2个CascadingDropDown（关联服务Ws_Cascade和DropDownList）和2个DropDownList
2.服务Ws_Cascade里有2个方法（都是用来得到集合数据）
3.CascadingDropDown_Category 是将服务里方法（GetCategory）得到的集合数据 绑定到ddl_Category
4.CascadingDropDown_Product 是通过参数得到集合数据（参数knownCategoryValues是绑定在ddl_Category控件上）
    当点击ddl_Category，CascadingDropDown_Category就会根据自己的category属性（"Category"）和ddl_Category
    所选的SelectedValue产生一个knownCategoryValues（Category：1）,这样CascadingDropDown_Product就会顺利
    执行方法，并和ddl_Product绑定

1.Accordion练习（可折叠控件，单词意思：手风琴）
  0.准备工作：
     1.先搭建三层（简单方法：先复制一个项目，把三层留下，其他的全部删除，以后可以用模板生成）
     2.最好新建一个模板页（放ScriptManager），然后，把样式复制到项目，再拖到模板页
     3.再新建Accordion.aspx（继承模板页）
  1.静态的，Accordion（n多属性） Panes AccordionPane（一个runat="server" 加2个节点Header Content）
            在Accordion.aspx放一个Accordion_1，然后配置下Accordion_1，就可以看到效果了

静态Accordion代码
                <cc1:Accordion ID="Accordion1"
                 runat="server"
                 AutoSize="Fill"
                 Height="500"
                 BorderWidth="1"
                 TransitionDuration="50"
                 FramesPerSecond="15"
                 SelectedIndex="0"

                 HeaderCssClass="accordionHeader" 
                 HeaderSelectedCssClass="accordionHeaderSelected"
                 ContentCssClass="accordionContent"
                 >
                 <Panes>
                 <cc1:AccordionPane ID="AccordionPane1" runat="server" >
                    <Header>标题1</Header>
                    <Content>内容1<br/>内容2<br/>内容3<br/>内容4<br/></Content>
                 </cc1:AccordionPane>
                 </Panes>
                 <Panes>
                 <cc1:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>标题2</Header>
                    <Content>内容1<br/>内容2<br/>内容3<br/>内容4<br/></Content>
                 </cc1:AccordionPane>
                 </Panes>
                 <Panes>
                 <cc1:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>标题3</Header>
                    <Content>内容1<br/>内容2<br/>内容3<br/>内容4<br/></Content>
                 </cc1:AccordionPane>
                 </Panes>
                </cc1:Accordion>

  2.动态的（即与数据库绑定）Accordion（n多属性）+ 后台代码

动态Accordion代码
   页面Accordion_Practice.aspx
    <cc1:Accordion ID="Accordion3"
     runat="server"
     AutoSize="Fill"
     Height="500"
     BorderWidth="1"
     TransitionDuration="50"
     FramesPerSecond="15"
     SelectedIndex="0"

     HeaderCssClass="accordionHeader" 
     HeaderSelectedCssClass="accordionHeaderSelected"
     ContentCssClass="accordionContent"
     >
    </cc1:Accordion>

  后台Accordion_Practice.aspx.cs
    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (Category category in CategoryManager.SelectAll())
        {
            AccordionPane pane = new AccordionPane();

            HyperLink hlTitle = new HyperLink();
            hlTitle.Text = category.CategoryName;
            hlTitle.NavigateUrl = string.Format("~/Accordion_Practice.aspx?CategoryId={0}",category.CategoryId);
            pane.HeaderContainer.Controls.Add(hlTitle);
            foreach (Product product in ProductManager.GetByCategory(category.CategoryId))
            {
                HyperLink hlContent = new HyperLink();
                hlContent.Text += product.ProductName +"<br/>";
                hlContent.NavigateUrl = string.Format("~/Accordion_Practice.aspx?ProductId={0}",product.ProductId);
                pane.ContentContainer.Controls.Add(hlContent);
            }
            Accordion2.Panes.Add(pane);
        }

    }

 

CascadingDropDown

----------------------------------------------------------
---------------------------------------------------------

1.CascadingDropDown（级联控件 Cascade单词意思：小瀑布）
   1.新建一个服务Ws_Cascade，新建页面Cascading_Learn，放2个CascadingDropDown和2个DropDownList
   2.App_Code里的Ws_Cascade.cs和Cascading_Learn.aspx的源视图的代码如下

Cascade代码
  Cascading_Learn.aspx页面代码
--------------------------
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Cascading_Learn.aspx.cs" Inherits="Cascading_Learn" Title="Untitled Page" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <cc1:CascadingDropDown ID="CascadingDropDown_Category" 
    runat="server" 
    PromptText="类别名称"
    LoadingText="正在加载"
    Category="Category"
    ServicePath="Ws_Cascade.asmx"
    ServiceMethod="GetCategory"
    TargetControlID="ddl_Category">
    </cc1:CascadingDropDown>
    <br />
    
    <cc1:CascadingDropDown ID="CascadingDropDown_Product" 
    runat="server" 
    PromptText="产品名称"
    LoadingText="正在加载"
    Category="Product"
    ParentControlID="ddl_Category"
    ServicePath="Ws_Cascade.asmx"
    ServiceMethod="GetProduct"
    TargetControlID="ddl_Product">
    </cc1:CascadingDropDown>
    <br />
    <br />
    
    <asp:DropDownList ID="ddl_Category" runat="server"  ></asp:DropDownList>
    <asp:DropDownList ID="ddl_Product" runat="server"></asp:DropDownList>
</asp:Content>



Ws_Cascade里的代码
---------------------------------
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using Northwind.Models;
using Northwind.BLL;
using AjaxControlToolkit;
using System.Collections.Generic;
using System.Collections.Specialized;


/// <summary>
/// Ws_Cascade 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Ws_Cascade : System.Web.Services.WebService
{

    public Ws_Cascade()
    {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public CascadingDropDownNameValue[] GetCategory(string knownCategoryValues,string category)
    {
        List<CascadingDropDownNameValue> categories = new List<CascadingDropDownNameValue>();
        foreach (Category category1 in CategoryManager.SelectAll())
        {
            categories.Add(new CascadingDropDownNameValue(category1.CategoryName,category1.CategoryId.ToString()));
        }
        return categories.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] GetProduct(string knownCategoryValues, string category)
    {
        List<CascadingDropDownNameValue> products = new List<CascadingDropDownNameValue>();

        StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        foreach (Product product in ProductManager.GetByCategory(Convert.ToInt32(kv["Category"])))
        {
            products.Add(new CascadingDropDownNameValue(product.ProductName, product.ProductId.ToString()));
        }
        return products.ToArray();
    }

}

   3.思路整理：
      1.当页面加载到CascadingDropDown_Category控件时（自动找到服务ServicePath="Ws_Cascade.asmx"
        并调用ServiceMethod="GetCategory")CascadingDropDown_Category控件的目的很单纯,
        就是把GetCategory方法得到的数据 绑定到ddl_Category
      2.当点ddl_Category里的内容时,由于CascadingDropDown_Product的ParentControlID和"ddl_Category"关联
        这样CascadingDropDown_Product里面的方法ServiceMethod="GetProduct"的参数就有值
        (knownCategoryValues)然后理所当然的执行完这个方法后，就自动把数据绑定到ddl_product
    4.WebService里的2个方法的解释（仅是自己的推测）
    [WebMethod]
    public CascadingDropDownNameValue[] GetCategory(string knownCategoryValues,string category)
    {
        List<CascadingDropDownNameValue> categories = new List<CascadingDropDownNameValue>();
        foreach (Category category1 in CategoryManager.SelectAll())
        {
            categories.Add(new CascadingDropDownNameValue(category1.CategoryName,category1.CategoryId.ToString()));
        }
        return categories.ToArray();
    }
     1.CascadingDropDownNameValue  //一个类，有2个属性name，value
     2.CascadingDropDownNameValue[]  //最后和DropDownList绑定的数据
     3.knownCategoryValues  //  当点击ddl_Category里面的数据时（比如：单击第一条）就会产生一个
                                    knownCategoryValues（Category：1），那么以ddl_Category为ParentControlID
                                    的CascadingDropDown_Product,就会通过knownCategoryValues查到值        
     4.category  //是产生knownCategoryValues时的键，比如点击ddl_Category里面的数据时，
                CascadingDropDown_Category就会根据自己的category属性（"Category"）和所选的ddl_Category
                所选的SelectedValue产生一个knownCategoryValues（Category：1）

    [WebMethod]
    public CascadingDropDownNameValue[] GetProduct(string knownCategoryValues, string category)
    {
        List<CascadingDropDownNameValue> products = new List<CascadingDropDownNameValue>();

        StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        foreach (Product product in ProductManager.GetByCategory(Convert.ToInt32(kv["Category"])))
        {
            products.Add(new CascadingDropDownNameValue(product.ProductName, product.ProductId.ToString()));
        }
        return products.ToArray();
    }
  1.当点ddl_Category里的内容时，就会把一条记录保存在knownCategoryValues,它的键是category设置的值
   （"Category"）值是被选中的ddl_Category里的ddl_Category.SelectedValue
  2.knownCategoryValues是把键和值以某种方式拼接成的字符串(比如category：1整个就是一个字符串),并不能
    直接调用，所以要转换成StringDictionary（以键值对保存的集合），这样就可以通过键取到值了kv["Category"]。   5.代码：下载