asp.net 结合YUI 3.0小示例 |
本文标签:asp.net,YUI 注:由于本人主要做后台的就只用到了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页面都行, 还有一些后台处理的到数据的就没有贴出来了,每一个级联请求的后台都是返回一个对象数组 ,具体的解释就不用说了, 不懂的在讨论 。 。 。 |