ASP.NET 2.0 GridView控件应用模版(4)

接下来我们要做的是在编辑状态下雇员雇用日期用日历控件显示出来，点击编辑栏的连接GridView的智能标签、选择编辑列选项.选择hireddate字段， 选择Boundfield属性的在左下角的将次字段转换为TemplateField选项,然后单击"转换成Templatefield这一项，如图 8 所示。

图 8

　　这时我们进入再次进入编辑摸版时，单击GridView的智能标签，选择编辑模版，templatefield含有一个ItemTemplate和EditItemTemplate的标签,选择hiredateTemplatefield的EditItemTemplatee选项,将lable 标签删除，从工具箱中选择日历控件放在EditItemTemplate 编辑模版界面上，并设计日历控件控件的风格样式。如图 9 所示。

图 9

　　我们为日历控件选择要显示的数据字段，在可绑定属性分别选择selecteddate属性和VisibleDate属性进行数据绑定， 当我们单击编辑按扭对GridView的数据进行修改时，在hireddate一列中不在是一个文本框让我们输入要修改的日期而是一个可用来选择日期的日历控件，这样可以方便用户对日期的修改，也防止了用户输入的字段不是日期而引发的异常，如图 10 所示。

图 10

　　运行程序如图 11所示。

图 11

　　到目前为止,我们已经应用了两个模版:在同一个网格中同时显示两个数据字段,对数据编辑时不在是一个文本框输入编辑内容而是一个日历控件用于日期的选择。

　　GridView控件的HTML代码如下：

＜asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Width="620px" AutoGenerateEditButton="True"＞ ＜FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /＞ ＜Columns＞ ＜asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" /＞ ＜asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /＞ ＜asp:TemplateField HeaderText="FirstName" SortExpression="FirstName"＞ ＜EditItemTemplate＞ ＜asp:TextBox ID="TextBox1" runat="server" Text='＜%# Bind("FirstName") %＞'＞＜/asp:TextBox＞ ＜/EditItemTemplate＞ ＜ItemTemplate＞ ＜asp:Label ID="Label1" runat="server" Text='＜%# Bind("FirstName") %＞'＞＜/asp:Label＞ ＜asp:Label ID="Label2" runat="server" Text='＜%# Eval("LastName") %＞' Width="62px"＞＜/asp:Label＞ ＜/ItemTemplate＞ ＜/asp:TemplateField＞ ＜asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /＞ ＜asp:TemplateField HeaderText="HireDate" SortExpression="HireDate"＞ ＜EditItemTemplate＞    ＜asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" SelectedDate='＜%# Bind("HireDate") %＞' ShowGridLines="True" VisibleDate='＜%# Eval("HireDate") %＞' Width="220px"＞ ＜SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /＞ ＜TodayDayStyle BackColor="#FFCC66" ForeColor="White" /＞ ＜SelectorStyle BackColor="#FFCC66" /＞ ＜OtherMonthDayStyle ForeColor="#CC9966" /＞ ＜NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /＞ ＜DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /＞ ＜TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /＞ ＜/asp:Calendar＞ ＜/EditItemTemplate＞ ＜ItemTemplate＞    ＜asp:Label ID="Label3" runat="server" Text='＜%# Eval("HireDate") %＞'＞＜/asp:Label＞ ＜/ItemTemplate＞ ＜/asp:TemplateField＞ ＜/Columns＞ ＜RowStyle BackColor="#FFFBD6" ForeColor="#333333" /＞ ＜SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /＞ ＜PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /＞ ＜HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /＞ ＜AlternatingRowStyle BackColor="White" /＞ ＜/asp:GridView＞

　　在GridView控件中应用模版可以灵活地展现数据，灵活性很高，我们可以根据不同的需要设置不用的模版。

查看本文来源