我们注意到Button 和 GridView控件的声明代码出现在<asp:Panel>标签内部，因为这些控件置于名为DisplayInterface的Panel控件里面，我们可以将Panel控件的Visible 属性设置为false来隐藏这些控件.我们将在第三步看到，当点击一个按钮时，通过编程的方式改变Panel控件的Visible属性以显示添加界面.
花点时间在浏览器里登录该页面.如图5所示，你将看到一个显示为“Process Product Shipment”的button按钮，其下的GridView控件每次列出10个产品.
图5：GridView列出了产品并启用排序和分页功能
第二步：创建添加界面
创建完展示界面后，我们将创建添加界面。在本教程，我们的添加界面允许用户同时添加5个产品，且这5个产品的category 和 supplier是一样的，而names 和 nit price值不同.在ID为DisplayInterface的Panel控件下面，从工具箱里拖一个Panel控件到页面，设置其ID为InsertingInterface，Visible属性为false，并清除其Height 和 Width属性值。我们将在第三步添加代码将其Visible属性改为true.
接下来我们将创建如图1所示的添加界面。该界面本来可以通过一些HTML技术来创建的，不过在这里我们将使用一个很简单的4列7行的table表.
注意：虽然在设计器模式里可以使用工具箱的工具来添加<table> elements元素，不过那样会自动添加一些我们不需要的style属性设置.因此，我更偏向于在源视图模式里添加HTML <table> elements元素. 当写好类<table>声明代码后，我喜欢立即切换到设计器模式，再添加Web控件并设置其属性。当心中有数，已经想好了要创建几行几列的时候，我倾向于使用静态HTML(static HTML)而不是Table Web控件，原因是如果使用Table Web控件的话，我们必须通过FindControl("controlID")的方式来访问放置在里面的的Web控件.不过话又说回来，如果是要创建一个动态变化的表(dynamically-sized tables)的话——比如该表的行和列都绑定到数据库或者基于用户自定义的标准格式，我还是要使用Table Web控件，原因很简单，我们可以通过编程来创建该Table Web控件.
在ID为InsertingInterface的Panel控件的<asp:Panel>标签里输入如下的声明代码:
<table cellspacing="0"> <tr> <td>Supplier:</td> <td></td> <td>Category:</td> <td></td> </tr> <tr> <td>Product:</td> <td></td> <td>Price:</td> <td></td> </tr> <tr> <td>Product:</td> <td></td> <td>Price:</td> <td></td> </tr> <tr> <td>Product:</td> <td></td> <td>Price:</td> <td></td> </tr> <tr> <td>Product:</td> <td></td> <td>Price:</td> <td></td> </tr> <tr> <td>Product:</td> <td></td> <td>Price:</td> <td></td> </tr> <tr> <td colspan="4"> </td> </tr> </table>
该<table>声明代码里暂时还未包含任何的Web控件。我们注意到每一个<tr> element元素都有明确的CSS class设置：放置名为supplier 和category的DropDownLists控件的“头顶行”对应的是BatchInsertHeaderRow；放置“Add Products from Shipment” 和“Cancel”按钮的“底部行”对应的是BatchInsertFooterRow；那些包含product和unit price的TextBox控件的行交替的运用BatchInsertRow和BatchInsertAlternatingRow.我已经在Styles.css文件里创建里相应的CSS classes，代码如下：
/*** Styles for ~/BatchData/BatchInsert.aspx tutorial ***/ .BatchInsertLabel { font-weight: bold; text-align: right; } .BatchInsertHeaderRow td { color: White; background-color: #900; padding: 11px; } .BatchInsertFooterRow td { text-align: center; padding-top: 5px; } .BatchInsertRow { } .BatchInsertAlternatingRow { background-color: #fcc; }
输入这些代码后，切换到设计视图，该<table>看起来是一个4列7行的表，如图6所示：