图5:显示了每个类别的Name, Description和BrochurePath值
与其显示BrochurePath的text值,不如创建一个指向小册子的链接。移除BrochurePath,代之以HyperLinkField。设它的HeaderText属性为“Brochure”,Text属性为“View Brochure”, DataNavigateUrlFields属性为“ BrochurePath”。
图6:添加一个指向BrochurePath的HyperLinkField
这样将在GridView里添加一列链接,如图7所示。点“View Brochure”时要么直接在浏览器显示PDF,要么提示用户下载该文件。这取决于浏览器的设置以及是否安装了PDF阅读器。
图7:点击“View Brochure”访问某类的Brochure
图8:显示某类的PDF文件
隐藏无小册子图片的类的“View Brochure” 文本
如图7所示,不管某个类的BrochurePath是否为NULL值,名为BrochurePath的HyperLinkField都呈现为其Text属性(“View Brochure”) 。当然,如果BrochurePath为NULL值,链接只显示为文本(而不带下划线),就像Seafood类一样(见图7)。与显示文本“View Brochure”相比,更为可取的是将那些BrochurePath值为空的类显示为“No Brochure Available”。
为达此目的,我们需要用到TemplateField,使其产生一个基于BrochurePath值的合适的结果。我们先来看看如何实现,就像在教程之12《在GridView控件中使用TemplateField》一样。
在“编辑列”对话框里选中名为BrochurePath的HyperLinkField,再点“Convert this field into a TemplateField”链接,将其转换为TemplateField。
图9:将HyperLinkField转换为TemplateField
这样将创建一个TemplateField,其ItemTemplate模板包含一个HyperLink Web控件,该控件的NavigateUrl属性为BrochurePath值。用下面的代码将其替换掉:
<asp:TemplateField HeaderText="Brochure"> <ItemTemplate> <%# GenerateBrochureLink(Eval("BrochurePath")) %> </ItemTemplate> </asp:TemplateField>
然后,在ASP.NET页面的“后台代码”里添加一个protected类型的GenerateBrochureLink方法,它接受一个输入参数并返回一个字符串。
protected string GenerateBrochureLink(object BrochurePath) { if (Convert.IsDBNull(BrochurePath)) return "No Brochure Available"; else return string.Format(@"<a href=""https://www.jb51.net/article/{0}"">View Brochure</a>", ResolveUrl(BrochurePath.ToString())); }
该方法判断传入的值是否为NULL。如果是,则返回一个消息指出该类没有小册子文件;相反,如果传入值不为空,将显示为一个链接。我们注意到,当BrochurePath值不为空时,将调用ResolveUrl(url)方法。该方法的作用在于将传入的相对路径转换为物理路径。比如应用程序的根目录在/Tutorial55,ResolveUrl("~/Brochures/Meats.pdf")返回的路径是/Tutorial55/Brochures/Meat.pdf.
图10为经过上述修改后的界面。我们注意到Seafood类的BrochurePath列现在显示为文本“No Brochure Available”.
图10:没有小册子的类将显示为文本“No Brochure Available”
第3步:新增页面以显示类的图片
当用户访问一个ASP.NET页面时,他将接收该页面的HTML代码。HTML代码仅仅包含了text文本,而并不包含任何的二进制数据。任何的二进制数据,比如图片,音乐文件、Flash程序、Windows Media Player视频等,以独立资源的形式存放于服务器。
HTML只包含了这些文件的引用,并不包含这些文件本身。
比如,在HTML里<img>元素用来引用一张图片,其src属性指向该图片文件,如:
<img src="https://www.jb51.net/MyPicture.jpg" ... />