javascript动态控制服务器控件实例

标签:游戏玩法    日期:2018-01-02 10:14    录入:汇盛国际平台    浏览:

  

[动态控制,服务器控件]javascript动态控制服务器控件实例

  

最近多个页面需要加载一些下拉列表框,供用户选择,原来都是在服务器端进行加载应运用。最后由于业务逻辑方面的考虑,需要将DropDownList的部分功能放到客户端实现。现在下拉列表的功能使用起来感觉比全部放到服务器端性能好多了。

  

  

具体方法:  

  

在页面中放入一个DropDownList控件,并添加一项,用来分析其产生的HTML代码,这样在使用js进行动态控制时,将会非常清晰其测试代码如下所示:  

  
  
  1  
  
  

在浏览器中查看,并对Html进行分析:以下是DropDownList控件生成的HTML代码。和普通的select没  

  

有区别。那么也就可以通过js来动态填充、删除、选择等控制。

  

  
  
  
  
  

可以将1删除,现在添加两个HTML button控件,分别用来实现添加选项,和删除所有选项。Button源码如下:  

  
  
    
  
  

添加和删除函数如下所示:  

  

  

  
  
  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=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代码如下所示:  

  
  
  
  
  

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  
  

不过以上红色部分在TT浏览器下ADD不成功,其他浏览还没试过,以下是另一个种写法:  

   ★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★