ASP.NET:就是喜欢Web Form，就是喜欢拖控件（二）

ASP.NET:就是喜欢Web Form，就是喜欢拖控件（一）
ASP.NET:就是喜欢Web Form，就是喜欢拖控件（二）
ASP.NET:就是喜欢Web Form，就是喜欢拖控件（三）
ASP.NET:就是喜欢Web Form，就是喜欢拖控件（四）
ASP.NET:就是喜欢Web Form，就是喜欢拖控件（五）

这一篇...... 拖了太久了 原来打算叫FormView使用技巧 后来觉得内容其实不全是FormView相关，就改成了现在这个名字。在这个ASP.NET MVC流行的时候算是一种反抗？

第一篇实在太基础，也没好意思发上首页，大家可以到此处看看：ASP.NET:就是喜欢Web Form，就是喜欢拖控件（一）

咱们言归正传，书接上回，上一篇演示了如何利用VS自动生成要提交的表单。这里我们来考虑一个比较复杂的情况，带上传图片的表单以及在WebForm中显示数据库里保存的图片。

回忆一下这个数据库表：

commodity 商品

id	name	company_id
1	包子	3
2	蒸饺	3
3	人才	1
4	MVP	1
5	Window 7	2

 

既然是商品，每种商品配张图片是再正常不过的事情了，对于类似的需求，很多人喜欢把图片存到一起，然后用一个GUID作为文件名，数据库里存图片文件的GUID。然而随之而来的增、删、改、查备份都变得异常困难，这也太麻烦了！有没有更好的方法呢？

其实大部分数据库都是有Image这个字段类型的,我们完全可以把图片存入数据库中。我们期望的表结构是这样的：

id	name	company_id	image
1	包子	3	[bin]
2	蒸饺	3	[bin]
3	人才	1	[bin]
4	MVP	1	[bin]
5	Window 7	2	[bin]

建表截图:

我们按照上一篇的方法，从这个数据表建立一个FormView，并且将Default Mode 设置为Insert，结果如下图：

好了，我们自动生成了一个插入数据的表单，但是很遗憾，image字段生成了TextBox，指望用户把图片内容copy下来输入到文本框里显然是极其不现实的想法。我们希望通过上传的方式来提交图片，那么，我们来编辑Insert模板，改为使用上传控件。

这是TextBox的数据绑定方式，TextBox的Text被绑定到了image字段。

然而很遗憾,当我们放一个FileUpload在这里时，只出现了2个Bindable属性，即使选中Show all properties，也没有我们想要的属性。

无计可施了吗？当然不是！我们还可以直接改ASP.NET代码。找到相应的代码先:

然后把 FileBytes属性绑定到image字段就好了：

<asp:FileUpload ID="imageFileUpload" runat="server" FileBytes='<%# Bind("image") %>'/>

 

然后我们把程序运行起来看看，按照原计划插入一个新商品种类：包子。

点击运行,我们却得到一个错误：SQL变量类型与字段不匹配。

其实我们只要把数据源里面的image参数类型限制删掉就好了：

好了,做完之后,数据看起来可以正确插入了。

 

 

 

 

好了，我们现在已经成功地将图片存入了数据库，但是存的到底对不对还有待证实,况且把图片存起来容易,显示出来难。

我们尝试用一个GridView来显示我们的表格，然而自动生成的表格会忽略掉image字段，看来要想显示图片还是要自己想办法。

 

首先我们来分析，HTML中图片要以单独的URL形式存在，所以我们不可能在同一个页面上做什么手脚。我们的图片URL的内容，就是对应商品的image字段里的二进制值了。所以我们需要一个类似图片Service的页面。这里我们建立一个叫做CommodityImage.aspx的页面。

当然我们不能为表中每一行都建立一个页面，所以CommodityImage.aspx还应该能够处理post或者get来的参数，根据数据项的主键来查询数据表，我们只要把这个页面的response流替换成数据表中image字段的内容就好了。

那么这里需要用C#来查询数据库嘛？当然不！为了尽量偷懒，我们这里还有些小技巧：P

我们要把页面里面零零碎碎的HTMl和ASP.NET标签先全都去掉，只留下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommodityImage.aspx.cs" Inherits="WebForm.CommodityImage" %>

然后我们切换到设计视图，拖一个SqlDataSource上去！然后配置这个DataSource，注意我们要的是只是image字段，而且必须从post或者get来的参数（这里我们还是用post来的）来得到id，所以我们要加上查询条件：

点击where之后，配置方法如图：

配置好数据源之后，我们就可以在Page_load里面用下面代码来替换Response数据流：

Response.Clear();
Response.ContentType = "image/jpeg";
foreach (System.Data.DataRowView record in SqlDataSource1.Select(DataSourceSelectArguments.Empty))
{
    Response.BinaryWrite(record[0] as Byte[]);
}

这里我们把SqlDataSource写到ASP.NET标记中，让IDE替我们完成了大部分工作，所以只要用6行有效代码就可以显示图片了，可以在页面url后面跟个?id=1看看效果，就是我们刚才上传的图片。

好了有了这个图片页面，我们在GridView里面把它显示出来，首先我们给Grid添加一个模板列：

然后就可以编辑这个列的模板了，既然是显示图片，我们就拖一个image上去，现在我们要把这个image的url指向我们刚才写好的图片服务页面，而且要把id作为QueryString传过去。具体做法看图便知，无需多言：

 

最后效果如图,看起来不错吧：（图中上传的示例图片如果侵犯了您的权利，请与我联系，我将第一时间处理，嘿嘿）

 

下一篇或者几篇的内容可能包括：

自动填写字段：提交时间、提交用户ID、自增的主键、从session中安全地取得信息

多表查询：如何把引用的外键变成一个下拉列表？

融合客户端技术：用CSS让页面变得美观 用客户端JavaScript增加交互 看起来简陋的页面和大小不一凌乱的图片会立刻不一样

 

PS.关于这个系列

其实虽然一直在拖拖拽拽，但我并不是真的只是想分享一些拖拖拽拽的技巧，除了作为小项目中偷懒的小招数，我希望读过这几篇随笔的您能够更多思考WebForm究竟是怎样的一种编程模型。其实大部分时候，我们的劳累并非来自业务逻辑的复杂，而是来自错误的设计。Web应用程序涉及SQL、ASP.NET标记、C#、HTML、CSS、JavaScript等各个层次不同用途的语言，把业务逻辑和功能写在哪个层次其实对工作量的影响非常巨大。

这个系列来源于以前帮朋友做过的一个小项目，是一个类似进销存的系统、还有统计管理等一些功能，而其中唯一的一处C#代码就是上面提到的5行C#，我希望能分享这段有趣的开发经历，让大家看到WebForm的一个不同的侧面。