DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript動態控制服務器控件實例教程
javascript動態控制服務器控件實例教程
編輯:關於JavaScript     

最近多個頁面需要加載一些下拉列表框,供用戶選擇,原來都是在服務器端進行加載應運用。最後由於業務邏輯方面的考慮,需要將DropDownList的部分功能放到客戶端實現。現在下拉列表的功能使用起來感覺比全部放到服務器端性能好多了。

具體方法:

在頁面中放入一個DropDownList控件,並添加一項,用來分析其產生的HTML代碼,這樣在使用js進行動態控制時,將會非常清晰其測試代碼如下所示:

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

在浏覽器中查看,並對Html進行分析:以下是DropDownList控件生成的HTML代碼。和普通的select沒

有區別。那麼也就可以通過js來動態填充、刪除、選擇等控制。

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

可以將<asp:ListItem>1</asp:ListItem>刪除,現在添加兩個HTML button控件,分別用來實現添加選項,和刪除所有選項。Button源碼如下:

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部刪除Option" onclick="delOption()" />

添加和刪除函數如下所示:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//獲取對象

if(ddlObj.length>0)

delOption();//先刪除所有的,之後在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");

var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}

}

function delOption(){

var ddlObj = document.getElementById("DropDownList1");//獲取對象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE兩種均支持
}
}

在浏覽器中查看,可以輕松地創建選擇下拉選項,由於這些是客戶端生成,因此其效率上要高於服務器

端工作的代碼。但是這個時候如果要使用DropDownList1.SelectedValue獲取用戶選擇的選項,那麼你會得

到一個錯誤。這是由於DropDownList是由JS動態添加的,因此,它的項不屬於ViewState,並且不被維護,

也就是說我們無法在服務器端對其進行處理。為了解決這一問題,可以使用兩種方式:1、Hidden控件保存

用戶選項方式;2、Request.Form方式。(參見msdn品味Ajax)

1、我們在頁面中添加一個Hidden控件,用它來保存DropDownList選項變化的信息,這樣在用戶選擇感

興趣的信息之後,我們就可以在服務器端獲取信息,並進行處理,合理地實現客、服之間的分工。

對DropDownList控件添加一個onchange事件,此時它的html代碼如下所示:

<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()">
</asp:DropDownList>

Onchange事件如下所示,該事件主要保存用戶選定的value:

function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}

在此之後,我們使用一個asp:button控件來測驗結果:

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

到此,已經完成了所有的工作,但是還有一個問題,DropDownList的change事件只有在用戶改變下拉選

項時才會觸發。因此,用戶使用默認選項進行提交時,則獲取空值。因此我們可以在填充option時,即對

hidden初始化。對addOption事件添加一行代碼如下:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//獲取對象

if(ddlObj.length>0)

delOption();//先刪除所有的,之後在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");
var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}
document.getElementById("HiddenField1").value = optValue[0];
}

不過以上紅色部分在TT浏覽器下ADD不成功,其他浏覽還沒試過,以下是另一個種寫法:

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var DeptList=Guest_UserRegister.GetDeptList(v.value).value;

var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}

}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved