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页面都行,

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



相关阅读:
邮件发送类,支持HTML格式,支持优先级设置
ASP编程入门进阶(十一):Chat聊天程序
数据库分页存储过程代码
MYSQL中如何存取二进制文件
在B/S开发中经常用到的JavaScript技术
在SQL Server计算列和平均值
利用XMLHTTP实现的二级连动Select
提升JSP应用程序的七大绝招
VBS教程:方法-Keys 方法
asp在IE浏览器中下载服务端上的各类文件的实现方法
让任务管理器中的CPU跳舞的js代码
sockaddr与sockaddr_in
MSCRM调用外部JS文件
从DBA到Oracle Applications DBA的转变过程
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 我的“修罗指”老弟 1美元能买到什么 冬季的美丽作文900字 街道办事处2013年工作总结及2014年工作计划 开河鱼 我的姐姐作文600字 昨夜春雨 “你又忘了?”550字 小学五年级作文600字:我和爸爸鉴合同 请笑对生活作文800字 【贺词】迟到了的祝福作文700字 《我的家在日喀则》教学设计 学问150字 有种伤感,无以言表 一位双目失明的陌生人作文500字 特殊的“水上旅行” 等你在老渡口 区人力社保局上半年工作总结 育儿知识《男孩子应该这么养》 给远方朋友的祝福语爱情的路上,不仅有艳阳, 医学专业骨科医生实习报告 《叶欣荣获南丁格尔奖章》教学设计 假如我是神笔马良作文400字 天已微凉,我已长大 卸去的伪装 想说 淡然心胸静然处世 家长给教师节祝福语 感觉真的很是亲切 带着灯泡旅行 华岳寺 小学作文雪 黑夜的殇,倒不回的痛 愤怒与惋惜——读《刻骨铭心的国耻》有感 交警支队副大队长岗位竞聘演讲稿 那个月光如水的夜晚(二)作文300字 在全市镇党委换届工作会议上的讲话 韩寒经典励志语录摘抄 我收获了……作文450字 人生的3个问题 谈“惭色”——读《为学》有感作文800字 愈看愈美 游逍遥津公园 你的未来,一定要有我 演讲赛后领导总结讲话 致社区全体党员倡议书 不要做温室的花朵作文300字 对城市规划、土地规划衔接的思考 物流企业年终工作总结 是谁关了那扇窗 谁来谁就是

Copyright © 2016 phpStudy |