码迷,mamicode.com
首页 > 编程语言 > 详细

javascript控制服务器控件实例一

时间:2014-09-05 09:52:31      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:os   io   使用   java   ar   for   问题   cti   代码   

   最近多个页面需要加载一些下拉列表框,供用户选择,原来都是在服务器端进行加载应运用。最后由于

业务逻辑方面的考虑,需要将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控制服务器控件实例一

标签:os   io   使用   java   ar   for   问题   cti   代码   

原文地址:http://www.cnblogs.com/xiaochao12345/p/3957218.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!