当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > DW MX实例:实现产品搜索

Dreamweaver
DW MX 2004的Flash动画元素
在Dreamweaver中自动设置网页的水平线颜色
Dreamweaver小技巧:超高速下载图像
DW MX 2004新功能:图片处理
去除DW MX 2004表格宽度辅助
DreamweaverMX2004技巧两则
让你的主页声色并茂—巧为网页添加背景音乐
关于Dreamweaver乱码问题的解决方案
更加便捷实用!巧妙复制主页内容另一妙法
解决在Dreamweaver中不支持中文文件名的方法
Dreamweaver使用技巧之如何巧用DW4文件库更新网站
Dreamweaver使用技巧--让css使网页图片半透明
Dreamweaver4使用技巧之--为你的站点定做颜色
CourseBuilder For Dreamweaver 3 (1)
DreamWeaver批处理提高篇
CourseBuilder For Dreamweaver 3 (4)
Dreamweaver4探谜系列(2)
Dreamwaver 常见问答解答
CourseBuilder For Dreamweaver 3 (2)
CourseBuilder For Dreamweaver 3 (3)

Dreamweaver 中的 DW MX实例:实现产品搜索


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 67 ::
收藏到网摘: n/a

  
Dreamweaver


  客户在浏览公司网站时,常常会对一些产品进行较为简单的查询搜索,本实例将讲解其实现过程。

  效果说明 客户可以在如图 86-1 所示的页面中选择特别查询字段,输入查询数据,对产品进行模糊查询,结果如图 86-2 所示。

  创作构思 在“ index.aspx ”页面中添加下拉列表、文本框及按钮,完成产品搜索页面的设置,制作出跟实例 85 中树形目录索引显示页面相同的页面作为产品搜索页面,然后设置程序以实现产品搜索。

  
Dreamweaver


  操作步骤

  步骤一 产品搜索页面的设置

  ( 1 )在“ LeftTb ”表格中添加 4 行并设置样式。打开“ index.aspx ”,在设计视图里的“ LeftTb ”表格中添加 4 行并设置样式,如图 86-3 中圆角方框所示。

  ( 2 )添加控件。单击 ASP.NET 快捷菜单栏上的【 asp :下拉列表】按钮,为新添加的第 2 行添加下拉列表控件,如图 86-4 所示。

  
Dreamweaver


  ( 3 )添加列表标签及相应的值。在新添加的下拉列表“ FieldList ”属性窗口中单击【列表项】按钮,在弹出的【列表项】对话框中添加 3 个标签,一个标签为“产品编号”,其值为“ CPID ”;一个标签为“产品名”,其值为“ CPNAME ”;一个标签为“产品分类”,其值为“ CPFL ”,结果如图 86-5 所示。

  ( 4 )继续在新添加的行中添加文本框,设 ID 为“ SearchTxt ”,并添加两个按钮,一个按钮为“搜索”, ID 为“ GoBt ”;另一个按钮为“高级搜索”, ID 为“ TopgoBt ”,结果如图 86-6 所示。

  
Dreamweaver

  步骤二 实现产品搜索

  ( 1 )切换到代码视图,在“ <script Runat="Server"> ”中添加“ GoBt_click ”过程,其代码如下所述。

  Sub GoBt_Click(ByVal sender As Object, ByVal e As System.EventArgs)

  Response.Redirect("CpSearch.aspx?keyfield="+SearchTxt.Text+"keyindex="+ FieldList.SelectedValue)

  End Sub

  (读者可打开【光盘】|【源文件】|【实例 86 】|【 86.1.txt 】文件,直接复制)

  程序说明:

  单击【搜索】按钮,则执行该过程。该过程主要是将页面指向“ CpSearch.aspx ”,并传递“ keyfield ”、“ keyindex ”两个参数。“ keyfield ”参数用于存储客户搜索时在【 FieldList 】下拉列表中选择的关键字段,“ keyindex ”参数用于存储客户搜索时在【 SearchTxt 】文本框中输入的数据。

  ( 2 )在“ <script Runat="Server"> ”中添加另一个过程“ TopgoBt_Click ”,其代码如下所述。

  Sub TopgoBt_Click(ByVal sender As Object, ByVal e As System.EventArgs)

  Response.Redirect("TopSearch.aspx")

  End Sub

  (读者可打开【光盘】|【源文件】|【实例 86 】|【 86.2.txt 】文件,直接复制)

  ( 3 )绑定“ GoBt_click ”过程到【搜索】按钮的“ OnClick ”响应事件,绑定“ TopgoBt_Click ”过程到【高级搜索】按钮的“ OnClick ”响应事件。

  ( 4 )打开“ TreeSearch.aspx ”,该页面是在实例 85 中建立的,用于显示单击树形目录节点进行搜索后的结果。由于产品搜索结果显示页面与树形目录搜索的结果显示页面设计相同,所以可以直接将其另存为“ CpSearch.aspx ”。

  ( 5 )修改数据集“ TrSearchData ”查询命令。虽然产品搜索结果显示页面与树形目录搜索结果显示页面设计相同,但是搜索的查询命令显然是不同的,所以要对页面中数据集“ TrSearchData ”有关查询命令进行修改。删除“ CpSearch.aspx ”页面中的“ Page_Load ”过程,重新添加如下所述的过程。

  Sub Page_Load(ByVal Sender As Object, ByVal e As EventArgs)

  TrSearchData.CommandText="SELECT * FROM DreamweaverCP WHERE " _

  &Trim(Request.QueryString("keyindex"))& " LIKE '%" _

  &Trim(Request.QueryString("keyfield"))&"%' ORDER BY CPID ASC"

  TrSearchData.Debug=true

  End Sub

  (读者可打开【光盘】|【源文件】|【实例 86 】|【