1.Serach功能
自定义控件NavBar.ascx中有个form申明成get方法,自动将input输入的加入到查询字符串后。action是search.aspx,form里有一个链接,点击转到页面search..aspx。search..aspx包含一个自定义控件simplePager.ascx。simplePager.ascx初始化时调用OnLoad事件,OnLoad事件调用SetPage方法,触发simplePager.ascx中重写的OnPageIndexChanged事件,就是这一次访问数据库,把所有符合条件的数据都查询出来,然后利用分页,显示部分数据。
search..aspx页面上定义OnPageIndexChanged事件的接收方法。有两种定义方法:在search..aspx的simplePager.ascx控件中定义OnPageIndexChanged事件,或者在search..aspx.cs中定义PageChanged事件。
在这里微软利用cache来改进查询功能。利用生成的查询字符串作为cache的key,查询结果作为查询结果。
剩下的事情就都交给simplePager.ascx控件来完成了。
2.simplePager.ascx用together导出的类图
可以看出simplePage继承了Repeater。但是Repeater不具有分页功能,所以simplePage添加了相关分页功能。
分页功能主要是在OnDataBinding方法中完成。当页面执行绑定时,触发simplePage的OnDataBinding事件。第一次取出所有的数据,然后根据CurrentPageIndex(当前页),pageSize(每页显示的行数10),ItemCount(总的数据行数),进行分页。然后调用base类,Repeater的OnDataBinding事件,完成数据的绑定。执行流程如下: OnLoad—>SetPage—>OnPageIndexChanged—>OnDataBinding—>Render。
第2个主要要分析的方法是Render。在search.aspx中看到页面写的非常不规范,如下:
< table id ="data" cellpadding ="0" cellspacing ="0" >
< TBODY >
< tr class ="gridHead" >
< td > Product ID </ td >
< td > Name </ td >
< td > Description </ td >
</ tr >
</ headertemplate >
< itemtemplate >
< tr class ="gridItem" >
< td > <% # DataBinder.Eval(Container.DataItem, "Id") %> </ td >
< td >< a href ='Items.aspx?productId=<%# DataBinder.Eval(Container.DataItem, "Id") % > '> <% # DataBinder.Eval(Container.DataItem, "Name") %> </ a ></ td >
< td > <% # DataBinder.Eval(Container.DataItem, "Description") %> </ td >
</ tr >
</ itemtemplate >
< footertemplate ></ TBODY ></ TABLE ></ footertemplate >
标签没有闭合,甚至有交叉。其实这样写,是为了和simplePage的Render方法write的html和成一个table。Render的主要代码如下:
writer.Write(“ < table id = ' simplepage ' cellpadding = 0 cellspacing = 0 >< tr >< td colspan = 2 > ”);
base .Render(writer);
// Write out a table row closure
writer.Write(“ </ td ></ tr >< tr class = gridNav >< td > ”);
// previous buttons are required
……
// next buttons are required
writer.Write( </ td >< td align = right > );
// Close the table
writer.Write( " </td></tr></table> " );
绑定后的数据输出主要是在base.Render(writer)这句话。调用的Repeater的Render。注意红色处修改后的代码,可以在稍后的html代码中看到它们出现在各自颜色对应的位置,代码中也没有出现交叉和未闭合的标签。还可以发现其实由后台代码的writer的产生的html代码是写在页面直接生成的html 代码后面的。
< tr >
< td colspan =2 >
< table id ="data" cellpadding ="0" cellspacing ="0" >
< TBODY >
< tr class ="gridHead" >
< td > Product ID </ td >
< td > Name </ td >
< td > Description </ td >
</ tr >
< tr class ="gridItem" >
< td > FI-FW-01 </ td >
< td >< a href ='Items.aspx?productId=FI-FW-01' > Koi </ a ></ td >
< td >< img align ="absmiddle" src ="Images/Pets/fish3.jpg" > Freshwater fish from Japan </ td >
</ tr >
……
</ TBODY >
</ table >
</ td >
</ tr >
< tr class =gridNav >
< td > // next buttons are required </ td >
< td align =right > // previous buttons are required </ td >
</ tr >
</ table ></ p >