第九篇 动态双组合功能.pptVIP

第九章：动态双组合功能 客户端的JavaScript 服务器端的VB.NET 数据交换格式 重构为一个可重用控件 动态选择框 9.1双组合脚本 在一个双组合连接列表中，一个列表的内容依赖于另一个列表中已经选择的选项，当用户从第一个列表中选择一个值，第二个列表的所有条目将动态更新。 双组合脚本 双组合脚本的解决方案 1、客户端实现：使用硬编码的JavaScript数组。 2、服务器端实现：完全依靠服务器端的回送。 3、Ajax的实现方案：根据的动态选择的结果。 9.1.1客户端解决方案的局限性 纯客户端的解决方案：选择列表的值硬编码到Web页面的JavaScript数组内。 问题： 缺点： 1、不与服务器通信，缺乏获取新数据的能力。 2、页面的加载时间。 优点： 首次加载后，速度比较快，第一次选择到填充第二个列表没有大延迟。 9.1.2服务器端的限制 过程：提交表单，将用户选择的第一个Select元素提交给服务器，服务器基于该参数查询，取得的新值动态填充第二个列表，并且重新呈现整个页面 缺点： 需要到服务器端的多次往返，每一次页面都要重新加载，这就造成了时间延迟。额外的服务器端代码。 9.1.3基于Ajax的解决方法 使用Ajax将数据发送到服务器，获取第二个列表的信息，可以动态的查询数据库，并且动态地填充表单元素，节省了将全部选项加载到数组所必须的俄外的页面加载时间，避免了整个页面回送到服务器的时间，仅传递必须的信息，页面并没有重新加载。 9.2客户端架构 9.2.1设计表单 表单包含两个Select元素，第一个Select元素最初就包含了值，第二个选择列表是空的，第一个元素的实现方案： 第一种方法将值硬编码在Select元素中，用在只有很少的选项且不变的场合。 第二种方法使用服务器端脚本来填充值，允许从数据或XML文件中获取选项值。 第三种方法使用Ajax来填充值，即回送到服务器取得值，不重新呈现整个页面。 见DoubleCombo.html 9.2.2设计客户端/服务器交互 FillTerritory（）主要收集需要发送到服务器端的信息，主要包括第一个列表中被选中的选项、表单的名称、第二个选择列表的名称。 见 DoubleCombo.html 9.3服务器端的VB.NET实现 服务器端的代码需要从数据库中取出属于用户选中的地地区的城市，以一个XML文档的形式返回给客户端。使用从SQL查询获得的结果集来创建一个返回给客户端的XML文档。 9.3.1定义XML响应格式 创建一个简单的XML文档将数据库查询的结果返回给客户端，它将包含设置在第二个选择列表中的选项，需要用一对元素表示每个选项，一个元素包含选项的文本，一个元素包含选项的值。 见 DoubleComboXML.xml 9.3.2编写服务器端的代码 执行一个数据库查询，返回一个结果集，然后循环取出这个记录集中的数据，用来创建XML文档，并且将XML文档发送到客户端。如果没有找到任何记录集，就不创建任何entry元素。 见 DoubleComboXML.aspx.vb 9.4显示结果 现在已经将结果放在了XML中了，使用JavaScript中的DOM API来遍历其中的元素。通过getElementsByTagName()找到指定元素。 为了定位文档中的 9.4.1遍历XML文档 将选项添加到选择列表中的客户端脚本。表单的名称、需要填充的select元素名称以及 其他可用的选项，都在XML文档中一同指定。 为了定位文档中的选项 ，并将其插入到select元素中，需要便利文档中的元素，见 FillDropDown()函数 9.4.2应用css Css可以改变select元素的外观属性，可以改变字体颜色、字体种类、元素宽度等。 第二个元素开始不包含选项，最初只有几个像素的宽度，当从第一个选择列表中选中一个地区，第二个select元素宽度变化了，解决的办法是设置一个宽度。 select name=ddlTerritory ID=Select2“ style=”with:200px”/select 为了消除IE中截取显示文本的问题，需要将选择列表中的宽度设置为最长选项的宽度。还有一些另外的做法： Style=“width:100px;_width:250px” 9.5高级问题 1、允许多选择查询 见DoubleComboMulti.htm DoubleComboMultiple.aspx.vb 2、将双组合扩展为三组合 见TripleCombo.htm TripleComboXML.aspx.vb 9.6 重构 通用性： 1、改进net.ContentLoader对象 2、创建双组合组件 对net.ContentLoader对象重构后，再将双组合功能重新包装为一个