asp.net 结合YUI 3.0小示例

 更新时间:2009年11月06日 00:05:36   作者:  
公司最近做了个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页面都行,

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

相关文章

  • ASP.NET中利用DataList实现图片无缝滚动 实例分享

    ASP.NET中利用DataList实现图片无缝滚动 实例分享

    这个问题之前也困扰我,后来解决了,拿出来分享下,以后用也方便,代码很容易看懂,不多说什么了
    2013-06-06
  • 高仿Windows Phone QQ登录界面实例代码

    高仿Windows Phone QQ登录界面实例代码

    这篇文章主要介绍了高仿Windows Phone QQ登录界面实例代码,有需要的朋友可以参考一下
    2013-12-12
  • GridView中checkbox"全选/取消"完美兼容IE和Firefox

    GridView中checkbox"全选/取消"完美兼容IE和Firefox

    GridView中checkbox的的"全选/取消"使用还是比较频繁的,本文有个不错的示例完美兼容IE和Firefox,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-10-10
  • C#反射的一些应用

    C#反射的一些应用

    初始听说反射是可以动态的调用程序集,并从中来获取相应的方法和属性,感觉比较神奇,,,
    2013-02-02
  • asp.net mvc验证码类使用

    asp.net mvc验证码类使用

    这篇文章主要为大家详细介绍了asp.net mvc验证码类使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • visual studio 2019正式版安装简单教程

    visual studio 2019正式版安装简单教程

    这篇文章主要为大家详细介绍了visual studio 2019正式版安装简单教程,文中安装步骤介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • asp.net窗体操作总结

    asp.net窗体操作总结

    这些代码全部写在和页面分离的代码页中(codebehind),如果要嵌入到*.aspx页面,可能会出现问题.
    2008-11-11
  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    这篇文章主要给大家介绍了ASP.NET百度Ueditor编辑器1.4.3这个版本实现上传图片添加水印效果的相关资料,文中通过图文及示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • 在ASP.NET2.0中通过Gmail发送邮件的代码

    在ASP.NET2.0中通过Gmail发送邮件的代码

    我们有时候需要发送邮件给访问网页的用户,例如,注册的时候,发一确认信什么的。那么,在ASP.NET2.0中该如果操作呢?
    2008-06-06
  • ASP.NET用户注册实战(第11节)

    ASP.NET用户注册实战(第11节)

    这篇文章主要介绍了ASP.NET用户注册实战,巩固前10小节所学的全部知识,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08

最新评论