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);}}}

Javascript擷取後台動態產生的控制項值

不管是前台產生還是後台產生的控制項在瀏覽器中都是html控制項。
比如一個伺服器端控制項 <asp:Button runat="server" id="btn1" text="Button1"/>
發送到瀏覽器中後應為 <input type="button" value="button1" id="btn1_xxxx"/>
可以通過
Document.getElementById("btn1_xxxx")來擷取。
另外asp.net2.0以後 在控制項中有一個ClientId的屬性 可以制定用戶端控制項Id
 
伺服器端怎得到 javascript 動態產生的控制項

比如產生的控制項的id為123
在伺服器端用123.ClientId可得到