使用 Web 标准简化 Web 控件开发

• 下载 WebStandardsControls_src.zip - 4.7 KB

引言

我一直是 Web 标准的倡导者，并且经常惊讶地发现简化看似不相关的任务的新方法。本文讨论了如何在 ASP.NET 控件开发中使用 Web 标准来简化一些开发任务，构建更轻量级和更易于访问的控件，并提高布局灵活性。

背景

本文假设您对 Web 标准有基本的理解和知识。如果您需要入门知识，有很多参考资料 - 我最喜欢的是 A List Apart。

典型场景

您之前可能已经使用嵌套表和大量空格图像来控制布局（请参见源文件中的 Traditonal.aspx）以及一些属性来控制其呈现方式构建了一个简单的登录页面。它甚至可能看起来像这样

您的 HTML 代码可能类似于这样

<table> 
    <tr>
        <td>
            <table>
                <tr>
                    <td></td>
                </tr> 
                <tr> 
                    <td></td>
                </tr>
            </table>
        </td>
        <td></td>    
        <td>
            <table> 
                <tr>
                    <td></td>
                </tr>
                <tr>    
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

像所有优秀的开发人员一样，您构建了一个 Web 控件来处理其功能，以便可以在站点之间重用它。我添加了一个名为 LayoutDirection 的属性来控制左右两个框的位置交换。

在进行此类控件的自定义控件呈现时，您可能会经常发现 if-else 块分散在整个呈现代码中。

private void BuildControlTree() 
{ 
    Controls.Add(new LiteralControl(@"
        <table style=""width: 100%"" cellspacing=""0"" cellpadding=""0"">
        <tr> <td style=""width: 45%"">")); 

    if(LayoutDirection == Direction.Standard) 
        BuildNewCustomers(); 
    else 
        BuildExistingCustomers(); 

    Controls.Add(new LiteralControl(@"</td> <td style=""width: 10%""> </td> 
        <td style=""width: 45%;text-align:right;"">")); 

    if(LayoutDirection == Direction.Standard) 
        BuildExistingCustomers(); 
    else 
        BuildNewCustomers(); 

    Controls.Add(new LiteralControl(@"</td></tr></table>")); 
} 

这有以下缺点

• 您的代码中充斥着过多的 HTML
• 进行更改容易出错，因为您经常必须进一步切割片段，并且在代码视图中正确匹配标签可能很困难
• 添加属性以控制布局通常会导致分散的 if-else 块。
• 如果没有每个选项的属性，样式选项不是很灵活
• 难以在黑莓等移动设备上导航和使用

使用 Web 标准

我总是喜欢从一个基本的结构开始，然后在之后应用样式。目标是保持演示文稿几乎相同。我们这里只需要每个框一个 DIV 和一些指定标题的东西（在这种情况下我选择 H3 标签）。

我们的最终 HTML 标记应类似于（请参见 Standards.cs 和 WebStandards_Bare.aspx）

<div>
    <div id="signupdiv">
        <h3>Sign Up</h3>
        <p>New customers <a href="#">click here</a></p>
    </div>
    <div id="signindiv">
        <h3>Sign In</h3>
        <p>Existing Customers Sign In Below:</p> 
        Email: <input type="text" /><br /> 
        Pass: <input type="text" /><br /> 
        <input type="submit" value="Sign In" /> 
    </div>
</div>

呈现的输出如下所示

现在我们需要做的就是应用一些样式使其看起来正确。为简单起见，我在 Web 控件中为每个 DIV 分配了一个 ID，并在 CSS 中按 ID 引用了它。在现实世界中，您可能需要公开属性以控制分配给 DIV 的 CSS 类。我们的最终 CSS 如下所示

#signupdiv, #signindiv { 
    width: 45%; 
    border: 1px solid #000; 
    padding: 1px 1px 0 1px; 
    text-align:center; 
    height: 175px; 
} 
#signupdiv 
{ 
    float:left; 
} 

#signindiv 
{ 
    float:right; 
} 

#signupdiv h3, #signindiv h3 
{ 
    color: #fff; 
    background: #444; 
    text-align:center; 
    width: 100%; 
    height: 25px; 
    font-weight:normal; 
} 

还记得在传统模型中，我向 Web 控件添加了一个名为 LayoutDirection 的属性，以便我可以交换左右框吗？由于浮动技术，不再需要这样做。我们不仅从代码中删除了整个属性块，还用两行外部 CSS 代码替换了它！

并排比较

我们使用两种技术完成了相同的布局，那么它们彼此相比如何？对于像这样的简单任务，我通常喜欢查看两个因素：代码行数和呈现输出的大小。我知道行计数对于大多数项目来说不是一个实用的衡量标准，但在这种情况下，我认为它可以很好地衡量简单性。

	传统	基于标准	% 变化
Web 控件代码行数	128	55	-57%
呈现的 HTML 页面大小	1,899 字节	1,224 字节	-35%
易于在黑莓手持设备上查看	否	是	N/A
在没有样式表的情况下易于查看吗？	否	是	N/A

关注点

如果您一直在关注，您可能会指出我已排除外部 CSS 文档的大小（顺便说一句，它是 361 字节）。原因是它将被浏览器缓存，因此只需要下载一次。