asp.net 结合YUI 3.0小示例

注：由于本人主要做后台的就只用到了io空间下面的一些东西，贴个小小的级联效果来吧，
废话少说先拿代码说话了，

demo.show={
test:function(e,y)
{
config=demo.config;
function onshengchange(e)
{
var sheng = y.node.get('#'+config.sheng).get("value");
var speccode = y.node.get('#'+config.speciality);
var years = y.node.get('#'+config.years);
var timeslist =y.node.get('#'+config.times);
var content="<option selected=selected>请选择</option>";
speccode.setcontent("<option selected=selected>加载数据....</option>");
years.setcontent(content);
timeslist.setcontent(content);
var requestspeciality = y.io("test.aspx", {
                method:"post",
                data:"type=sheng&sheng="+sheng,
                arguments:{event:"cclchange"},
                on:
                    {
                        success:successhandler,
                        failure:failurehandler
                    }
                }
            );
}
function onspecialitychange(e)
{

var sheng = y.node.get('#'+config.sheng).get("value");
var speccode = y.node.get('#'+config.speciality).get("value");
var years = y.node.get('#'+config.years);
var timeslist =y.node.get('#'+config.times);
var content="<option selected=selected>请选择</option>";
years.setcontent("<option selected=selected>加载数据....</option>");
timeslist.setcontent(content);
var requestspeciality = y.io("test.aspx", {
                method:"post",
                data:"type=speciality&cclid="+ccl+"&speccode="+speccode,
                arguments:{event:"specchange"},
                on:
                    {
                        success:successhandler,
                        failure:failurehandler
                    }
                }
            );
}
function onyearchange(e)
{
var sheng = y.node.get('#'+config.sheng).get("value");
var speccode = y.node.get('#'+config.speciality).get("value");
var year = y.node.get('#'+config.years).get("value");
var timeslist =y.node.get('#'+config.times);
timeslist.setcontent("<option selected=selected>加载数据....</option>");
var requestspeciality = y.io("test.aspx", {
                method:"post",
                data:"type=year&sheng="+sheng+"&speccode="+speccode+"&year="+year,
                arguments:{event:"yearchange"},
                on:
                    {
                        success:successhandler,
                        failure:failurehandler
                    }
                }
            );
}

function ontimeslistchagne(e){
//这里可以一直连下去
}
function successhandler(id, o,args){
if(args!=null)
if(args.event!=null)
{
if(args.event=='shengchange')
{
var root = o.responsexml.documentelement;
var speciality =y.node.get('#'+config.speciality);
var content="<option selected=selected>请选择</option>";
             for(i=0;i<root.childnodes.length;i++)
             {
             var node=root.childnodes[i];
             var value=node.getelementsbytagname("code")[0].text;
             var text=node.getelementsbytagname("cname")[0].text;
             content+="<option value="+value +">"+text+"</option>";
             }
             speciality.setcontent(content);
}
else if(args.event=='specchange')
{
var root = o.responsexml.documentelement;
var yearlist =y.node.get('#'+config.years);
var content="<option selected=selected>请选择</option>";
             for(i=0;i<root.childnodes.length;i++)
             {            
             var value=root.childnodes[i].text;
             var text=value;
             content+="<option value="+value +">"+text+"</option>";
             }
             yearlist.setcontent(content);
}
else if(args.event=='yearchange')
{
var root = o.responsexml.documentelement;
var timeslist =y.node.get('#'+config.times);
var content="<option selected=selected>请选择</option>";
var times=y.datatype.number.parse(root.text);
if(times==null)
times=0;
             for(i=0;i<times;i++)
             {            
             content+="<option value="+(i+1) +">"+(i+1)+"</option>";
             }
             timeslist.setcontent(content);
}

            }
        }

        
        function failurehandler(id, o){
        alert("数据获取成功");
        }
        var sheng = y.node.get('#'+config.sheng);
var speccode = y.get('#'+config.speciality);
var year = y.get('#'+config.years);
var timeslist =y.node.get('#'+config.times);

        sheng.on("change",oncclchange);
        speccode.on("change",onspecialitychange);
        year.on("change",onyearchange);
        timeslist.on("change",ontimeslistchagne);

}
};
yui().use("node","datatype-number","io-base",function(y) {
function onload(e)
{
demo.show.test(e,y);
}
y.on("load", onload, window);
});

<%@ page language="c#" autoeventwireup="true" codefile="test.aspx.cs" inherits="test" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:dropdownlist id="sheng" runat="server">
</asp:dropdownlist>
<asp:dropdownlist id="speciality" runat="server">
</asp:dropdownlist>
<asp:dropdownlist id="year" runat="server">
</asp:dropdownlist>
<asp:dropdownlist id="times" runat="server">
</asp:dropdownlist>
</div>
</form>
</body>
</html>

using system;
using system.collections;
using system.configuration;
using system.data;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.htmlcontrols;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
public partial class test : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
if (!page.clientscript.isclientscriptincluderegistered("yui"))
page.clientscript.registerclientscriptinclude("yui", path + "/build/yui/yui-min.js");
if (!page.clientscript.isclientscriptincluderegistered("clinet"))
page.clientscript.registerclientscriptinclude("clinet", path + "/js/clinet.js");
stringbuilder scriptblock = new stringbuilder();
scriptblock.append("<script type="text/javascript"><!--
");
scriptblock.append("demo.config={");
scriptblock.append("sheng:'" + this.sheng.clientid + "',");
scriptblock.append("speciality:'" + this.specialitylist.clientid + "',");
scriptblock.append("years:'" + this.yearlist.clientid + "',");
scriptblock.append("times:'" + this.timeslist.clientid + "'");
scriptblock.append("};");
scriptblock.append("
// --></script>");
page.clientscript.registerclientscriptblock(gettype(), "qualityassessmentplancascadingdropdown", scriptblock.tostring());

}
}

这上面为主要代码，上面那段js我实际写的请求的是一个webservice ，你可以换一个aspx页面都行，

还有一些后台处理的到数据的就没有贴出来了，每一个级联请求的后台都是返回一个对象数组 ，具体的解释就不用说了， 不懂的在讨论。。。