首頁 > 開發者 > ASP

asp.net 結合YUI 3.0小樣本

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

註：由於本人主要做背景就只用到了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頁面都行，

還有一些幕後處理的到資料的就沒有貼出來了，每一個級聯請求的後台都是返回一個對象數組 ，具體的解釋就不用說了， 不懂的在討論。。。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
yui developer yui components what is yui
相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More