当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > asp.net 结合YUI 3.0小示例

ASP.NET
用 Asp.Net 建立一个在线 RSS 新闻聚合器的方法
关于前台调用后台事件__doPostBack函数
Bin 和 App_Code 文件夹介绍
.NET 2.0 的压缩功能代码
解决Visual Studio 2005 无法显示设计视图的方法
asp.net(c#)两种随机数的算法,可用抽考题
asp.net下url传递中文的解决方案
XmlReader 读取器读取内存流 MemoryStream 的注意事项
asp.net下创建、查询、修改带名称空间的 XML 文件的例子
使用.NET存储XML数据的方法
XslTransform.Transform将结果输出到字符串里的方法
安装 VS2005 SP1 有关问题的解决办法
asp.net下中文验证码,免费开源代码
自定义应用程序配置文件(app.config)
asp.net下使用DIME协议上传文件
动态改变ASP.net页面标题和动态指定页面样式表的方法
WEB上调用HttpWebRequest奇怪问题的解决方法
HTTP协议下用Web Service上传大文件的解决方案
asp.net下Response.ContentType类型汇总
ASP.NET User Control使用技巧一则

ASP.NET 中的 asp.net 结合YUI 3.0小示例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 203 ::
收藏到网摘: n/a

公司最近做了个WEB项目,网上这方面的东西也很少的,没办法就自己摸索了。 用到了Ajax这一段时间研究了一下它的用法,故来解释一下。 注:由于本人主要做后台的就只用到了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页面都行,
还有一些后台处理的到数据的就没有贴出来了,每一个级联请求的后台都是返回一个对象数组 ,具体的解释就不用说了, 不懂的在讨论。。。