Javascript dynamically controls the server control instance

  • 2020-03-30 03:54:26
  • OfStack

Recently, a number of pages need to load some drop-down list boxes for the user to choose from. Finally, due to business logic considerations, part of the DropDownList functionality needs to be implemented on the client side. The drop-down functionality now feels much better than putting it all on the server side.

Specific methods:

Put a DropDownList control in the page and add an item to analyze the generated HTML code, so that when using js for dynamic control, the test code will be very clear as follows:


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

View and analyze the Html in a browser: the following is the Html code generated by the DropDownList control. It's not like a normal select

There's a difference. Then, js can be used to dynamically fill, delete, selection and other control.


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

Can be < Asp: ListItem> 1 < / asp: ListItem> Delete, now add two HTML button controls to implement add options, and delete all options. Button source code is as follows:


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

<input id="Button2" type="button" value=" Delete all Option" onclick="delOption()" />

Add and delete functions are shown as follows:


function addOption(){

var ddlObj = document.getElementById("DropDownList1");//Access to the object

if(ddlObj.length>0)

delOption();//Delete all, then add

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");//Access to the object
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//Firefox does not support ddlCurSelectKey. Options. The remove (), IE two kinds of support
}
}

Viewing in the browser, you can easily create select drop-down options, which are more efficient than the server because they are client generated

End of the working code. . But this time if you want to use DropDownList1 SelectedValue for the user to select options, then you will have to

To an error. This is because the DropDownList is dynamically added by JS, so its items are not part of ViewState and are not maintained,

That is, we cannot process it on the server side. To solve this problem, you can use two ways: 1. The Hidden control is saved

User options; 2. Request-form (see MSDN taste Ajax)

1. We add a Hidden control on the page, and use it to save the information about the change of DropDownList options, so that the user has a sense of choice

After the information of interest, we can obtain the information on the server side and process it, so as to reasonably realize the division of labor between customers and servers.

Add an onchange event to the DropDownList control, and its HTML code looks like this:


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

The Onchange event is shown below, which mainly saves the value selected by the user:


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

After that, we use an asp:button control to test the results:


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

At this point, all the work is done, but there is one problem: the DropDownList change event is only selected if the user changes the dropdown

It will only be triggered when the. Therefore, the user gets a null value when he submits using the default options. So when we fill in option, that's right

Initialize hidden. Add a line of code to the addOption event as follows:


function addOption(){

var ddlObj = document.getElementById("DropDownList1");//Access to the object

if(ddlObj.length>0)

delOption();//Delete all, then add

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

However, the red part above is not successful under TT browser, other browsing has not been tried, the following is another way to write:


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

Related articles: