为WebForms说几句话，以及一些ASP.NET开发上的经验（2）

没想到我的文章引起了那么大的反应，看来最近MVC框架的确是一个热门话题。正如上一篇文章开始所说的，我不会对MVC框架有任何“贬低”，任何技术滥用都有问题，所以任何东西都会有所谓的Best Practice（去MSDN的Patterns & Practice栏目看看就知道了）。我写这几篇文章，是想说明，很多WebForms的缺点是被夸大了。WebForms的确有缺点，但是我们完全可以避开，并且仅仅利用到WebForms给我们带来的便利。这其实也是一种Best Practice。相信以后MVC框架也一定会出现这样的东西。

在上一篇的评论中，有朋友说我是“边缘”的ASP.NET程序员，大概是因为我用WebForms但是抛弃ViewState、PostBack和GridView这种“重要”的东西吧。我不知道这样是不是“边缘”，但是我的确抛弃了不少东西。例如还有ADO.NET中的DataSet/DataTable——但是我们还有DataReader呢！抛弃了微软提供的一部分东西，我们其实可以发现，.NET里的基础组件一个都不少，用起来也会得心应手。

去其糟粕，取其精华。

三、生成丑陋的HTML，难以进行样式控制

在ASP.NET的WebForms刚出现时，各种“演示”看上去真的很美。这个特点微软至今还保留着，各微软技术大会上的演示真的让人感到心潮澎湃。在我看来，那些“激素大会”更是一种推广策略，而并没有将目光集中在技术细节的本身。所以微软的东西似乎总是有入门容易提高难的“毛病”。开发人员被“宠坏”了，上一篇文章中有位朋友说这就是“穷人的孩子早当家”，还是有一定道理的。在.NET环境下我们就像是官宦子弟，不过这并不能成为我们习惯于“吃喝嫖赌”的理由。我们要合理利用富裕的环境带给我们的资源，但是要适当地抛弃一些不好的东西。

好像说了几句废话，现在进入正题。说到WebForms则不得不提丰富的控件，基于ASP.NET平台的第三方控件提供商似乎比其他平台下的总合还要多，这也是产业阿。在微软提供的控件里，GridView（或者1.1里的DataGrid）是被“演示”次数最多的，也似乎是最强大（还是差不多等同于“复杂”）的。有了GridView之后，很多开发人员就习惯于朝页面上拖个控件，然后再设计器里点点鼠标，设设样式，最后绑定一个DataTable上去。哗，好一个表格就此诞生。然后我们还可以响应其事件，对某一行数据进行编辑，删除。太轻松了，这世界一下子变得美好了起来。不过由于GridView过于“强大”，它几乎成为了ASP.NET初学人员的必修课，当对于Web开发都不明就里的初学者都习惯于GridView、GridView、GridView时，它的滥用也就不可避免了。于是乎，做表格，用GirdView，做列表，也用GirdView（不就是个只有一列的表格嘛）。

可惜的是，GridView有很多毛病。如果要使用GridView的高级功能（添加、修改、删除等等），ViewState必不可少，再加上很多开发人员在绑定数据时没有经过筛选，导致ViewState变得无比庞大（例如显示一个文章列表，明明只需要ID、标题，创建时间等基本信息，却用一个“令人无比愉悦”的SELECT * FROM Article语句把文章内容也选择了出来并绑定在GridView上，ViewState中也就不得不包含几千几万字的多余数据）。

不过现在想说的，倒是它生成出的HTML。

GridView在客户端生成的HTML是个<table />，可惜这个<table />里东西太多了，的确显得很丑陋。不过更关键的在于，这个表格的样式实在难以控制。虽说GridView里从标题到单元格到低部都能够进行样式的定义，但是灵活度还是远远不够。再加上GridView生成的HTML死板而不符合Web标准（例如不会生成<th />标签，用ControlAdaptor进行改造的做法不算），但是优秀的样式开发人员大都是坚定的Web标准支持或推广者，ASP.NET对于标准支持不佳，难以控制样式的说法满天飞扬。

我想为WebForms喊冤。不过首先我会打倒以GridView为首的复杂控件（包扩DataList、FormView等等）并狠狠踩上几脚。有人说，当抛弃了GridView之后，用WebForms还有什么意义？其实类似的话也不断在我说要抛弃ViewState和（复杂）的PostBack时出现。如果您觉得抛弃了这些东西WebForms就失去意义的话，那么我想说，ViewState、PostBack、GridView远不是WebForms的全部。我认为，Control模型（或者说组件化模型）才是WebForms的关键。而这个模型的“基础”是绝对优秀的。下面我会进行一些展示，虽然这些展示我觉得是基础中的基础。

首先我们先来看一下最常用的用户控件的表现吧（DemoControl.ascx）：

<%@ Control Language="C#" AutoEventWireup="true" %>

<%= "Hello World!" %>

然后将它放在页面里：

<div> 
    <uc1:DemoControl ID="DemoControl1" runat="server" />
</div>

在浏览器里打开页面会发现如下的代码：

<div> 
    Hello World! 
</div>

多干净的代码，我甚至连多余的空格都没有去除。还有一个例子就是Master Page，<asp:ContentPlaceHolder />也不会产生任何多余的代码。这说明了使用用户控件搭出的WebForms页面，是不会出现多余的“脏”代码的。如果您在观察那些基础控件，TextBox，CheckBox（不设Text属性），Panel等等，亦或是加上runat=server的HTML元素，无一例外（当然客户端ID的确还是比较长，关于这个问题我会在以后的文章进行讨论）。

那么肮脏的Tag是哪里来的呢？当然是以GridView为首的复杂控件。那么如果我们要生成批量数据，又该怎么办呢？现在来看看Repeater的表现吧，就以最常见的无序列表为例：

<asp:Repeater runat="server" ID="rptItems">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li>
            <img src="<%# Eval("ImagePath")) %>" alt="<%# Eval("Title") %>" />
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

还是在浏览器里察看HTML（我这里就不贴出来了），一行多余的代码也没有。

Repeater是ASP.NET 2.0中我最喜欢用的控件，它的功能很简单，把ItemTemplate和AlternatingItemTemplate的内容返回生成在页面上，并且将HeaderTemplate和FooterTemplate的内容显示在头尾。除此之外——没了。但是这已经足够了，对于绑定控件来说，还需要什么呢？这里面每一行代码都由我们自己编写，想定义样式也易如反掌，我们对于HTML的控制没有任何损失。

另外，有些开发人员总认为ASP.NET中的DataTable绑定的方式让我们无法写出建模良好的代码。就算使用ObjectDataSource，在控制上也会有诸多不便。但这个也是一种误解，我们完全可以将领域模型中的对象绑定到视图里的控件上。首先是ASPX的内容：

<asp:Repeater runat="server" ID="rptItems">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li>
            <img src="<%# this.GetImagePath(Container.DataItem) %>" 
                alt="<%# Eval("Title") %>" />
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

然后是Code Behind：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.rptArticles.DataSource = this.GetArticles();
        this.rptArticles.DataBind();
    }

    protected string GetImageUrl(object dataItem)
    {
        return "http://img.jeffz.net/" + (dataItem as Article).ImagePath;
    }
}

GetArticles方法的返回值可以是List<Article>或任何一个实现了IEnumerable<Article>接口的类型，这个样在ItemTemplate中访问Container.DataItem就会得到这个Article对象。我们在Code Behind类里定义一个protected方法，由于aspx最终会被编译为Code Behind类的子类，因此我们就可以在ASPX页面中调用GetImageUrl方法。在方法内部我们可以将object类型的DataItem转换成Article类型的对象，然后就可以做任意的处理了。

非常方便，非常灵活，还有什么可挑剔的呢？。

有。比如我们想要使用每行10个元素，最后一行如果不足就让右边空着的方式来展示，Repeater可能就难以实现了（其实不能这么说，按标准应该还是使用无序列表，用样式来进行控制，Repeater完全够用）。ASP.NET 1.1和2.0可能我们会使用DataList控件，只要把RepeaterColumns属性设为10即可。可惜DataList生成的元素要么是<table />，要么是<span />和<br />，让人头疼。但是在ASP.NET 3.5中又多了一个ListView控件，使用这个控件进行展示可以分组循环，可以指定容器，真可谓无比强大。重要的是ListView和Repeater一样，所有的HTML都由自己控制，一个多余的字符都没有。

有了Repeater和ListView，真可谓打遍天下无敌手，任何页面的展示方式都不在话下。

我们再走个极端吧，我们来看下面的呈现方式：

<ul> <% foreach (Article article in this.GetArticles())
   { %>
        <li>
            <img src="<%= "http://img.jeffz.net/" + article.ImagePath %>"
                alt="<%= article.Title %>" />
        </li>
<% } %>
</ul>

上面的例子在ASPX页面中使用了内联的foreach语句进行显示。这样生成代码无论从干净还是自定义角度来说，都可以的让任何开发方式“无地自容”。但关键是，这个方式……为什么……恩，没错，说的难听，这是原始的ASP的开发方式；说的好听，这是“先进”ASP.NET MVC框架中模板的写法。这是不是很讽刺？但是这个的确是事实。Rick Strahl大牛也在他的Blog中写到：“我还记得在早些时候，那些ASP.NET的疯狂追随者们是多么不屑使用内联的脚本标签，或者使用显式的URL而不是PostBack来进行开发的做法，而其中的一些人现在又毫不犹豫地张开双臂去迎接MVC框架，这难道不讽刺吗？”而且由于ASP.NET MVC的特性（从Controller传递到View的只是一个ViewData对象），因此真正ASP.NET MVC的“模板”的写法还要多一次Cast，也就是类似于如下的写法（当然ASP.NET MVC可以使用强类型的ViewData，这样就免去了这样强行的Cast）：

<ul> <% foreach (Article article in (ViewData["Articles"] as List<Article>))
   { %>
        <li>
            <img src="<%= "http://img.jeffz.net/" + article.ImagePath %>"
                alt="<%= article.Title %>" />
        </li>
<% } %>
</ul>

这里就要谈到ASP.NET MVC了。其实光从View上来看，我不知道这算不算是进步（当然其实我不介意内联的写法，有时候反而更清晰）。ASP.NET MVC如果光从View（模板）方式来看，有点回到了当年的ASP方式（当然，还是补充了一些Helper）。ASP.NET MVC的特点在于M-V-C的分离，在于业务逻辑的触发方式，在于URL Routing的驱动方式，而不是模板化的写法。如果要说MVC在View层面比ASP.NET清晰，我是肯定不会同意的，因为我完全可以在WebForms的ASPX页面中“写成”ASP.NET MVC类似的方式。不知道您是否同意，至少我认为，使用WebForms内Repeater或ListView的写法，不会输给ASP.NET MVC的模板。而且事实上，在ASP.NET MVC中作为View使用的aspx页面里，我们完全也可以放置Repeater，然后再Page_Load方法里写代码，这更证明了，在View方面WebForms和ASP.NET MVC其实是非常相似的。

刚才说了，ASP.NET MVC的重要特点，在于M-V-C之间的分离，非常清晰，而且Model和Controller之间能够进行独立的测试。但是WebForms也可以做到这一点，我在后面的文章中还会谈一下WebForms里如何使用MVC来做到清晰、分离和单元测试等等。而且，我似乎觉得某些WebForms中能够做到的东西在MVC框架里却无法或者很难实现。可能是我对于MVC的了解程度还不够多的缘故吧，等我先研究了MVC框架之后再说。:)

讲到这里，您心中是否有了答案，WebForms究竟能否写出清晰美观的HTML？在WebForms控制样式是否困难？抛弃GridView，我们并没有什么损失，因为现在的网页中又有多少会用到GridView的功能呢？

目前老赵在公司使用WebForms开发时会与一个专职的前台开发人员配合。他是我认识的最好的前台开发人员，编程能力强，经验丰富，对于各种浏览器中脚本和样式的差异和问题可谓了如指掌，只是在这之前他只用过PHP，并没有接触过ASP.NET WebForms。但是仅仅向他解释了几个控件生成HTML的方式，或者如何从服务器端获得ClientID之后，我们之间的配合就非常轻松顺畅了。无论是开发人员先写放控件然后由他进行修饰，还是他先写静态样式页面我们再进行替换，都工作的非常顺利。我现在已经能够专注于业务的实现，架构的设计，而彻底从页面样式的“泥潭”中解放了出来，最多编写一下简单的JavaScript代码。分工的明确，也使得我们的工作效率得到了相当的提高。

所以最后我给大家的建议就是，尽可能地使用“纯粹”的服务器端控件。例如使用Repeater和ListView，其实写出优秀的页面非常容易。当然，即使这么做，还是会有一些缺点的，例如：

1. 例如Repeater的ItemCommand事件已经无法使用了，因为它会用到ViewState。但是我们开发的大部分的页面甚至连PostBack都不需要，这又有什么关系呢？
2. 使用服务器端控件虽然能让我们对于HTML有十足的控制，但是我们无法避免在客户端生成一个不规则的ID。这一点理论上可能会影响页面样式的开发，但是就我那前台开发人员同事的话来说，除了一些在客户端进行布局的DOM元素之外，几乎不会使用ID来控制样式。就我们工作的结果来看，不规则的ID也并没有造成任何的影响。

 

相关文章：

为WebForms说几句话，以及一些ASP.NET开发上的经验（1）：ViewState、性能

为WebForms说几句话，以及一些ASP.NET开发上的经验（3）：生成复杂的ID难以使用JavaScript操作

未完待续：

五、MVC

六、单元测试