FormView 及 GridView 中的彈出式日期選擇視窗
程式碼下載: https://dotblogsfile.blob.core.windows.net/user/jeff377%5C0806%5C2008617214725464.zip
在上篇文章中示範了頁面的 TextBox 如何呼叫出「彈出式日期選擇視窗」，那在 FormView 及 GridView 中的 TextBox 要如何實作呼叫「彈出式日期選擇視窗」呢？
首先撰寫一個 CreateDateSelectScript 函式，這個函式作用是在 TextBox 的 onclick 產生日期選擇的 JavaScript。
''' <summary> ''' 在 TextBox 的 onclick 產生日期選擇的 JavaScript。 ''' </summary> ''' <param name="TextBox">要加入日期選擇的 TextBox 控制項</param> 
Sub CreateDateSelectScript(ByVal TextBox As System.Web.UI.WebControls.WebControl) 
Sub
Dim sScript As String Dim sUrl As String '日期輸入的頁面，將 TextBox 以 TextBoxId 網址參數傳給日期頁面 sUrl = "Calendar.aspx?TextBoxId=" & TextBox.ClientID sScript = "window.open('" & sUrl & "','','height=315,width=350,status=no,toolbar=no,menubar=no,location=no','')" TextBox.Attributes("onclick") = sScript 
End Sub在 FormView 中的 InsertTemplate 及 EditTemplate 中放置一個 ID="txtBirthDate" 的 TextBox 控制項
<asp:FormView ID="FormView1" runat="server" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"
Width="256px">
<EditItemTemplate>
BirthDate:
<asp:TextBox ID="txtBirthDate" runat="server" Text='<%# Bind("BirthDate") %>'></asp:TextBox><br />
<br />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="更新"></asp:LinkButton>
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="取消"></asp:LinkButton>
</EditItemTemplate>
<InsertItemTemplate>
BirthDate:
<asp:TextBox ID="txtBirthDate" runat="server" Text='<%# Bind("BirthDate") %>'></asp:TextBox><br />
<br />
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
Text="插入"></asp:LinkButton>
<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="取消"></asp:LinkButton>
</InsertItemTemplate>
</asp:FormView>
Width="256px">
<EditItemTemplate>
BirthDate:
<asp:TextBox ID="txtBirthDate" runat="server" Text='<%# Bind("BirthDate") %>'></asp:TextBox><br />
<br />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="更新"></asp:LinkButton>
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="取消"></asp:LinkButton>
</EditItemTemplate>
<InsertItemTemplate>
BirthDate:
<asp:TextBox ID="txtBirthDate" runat="server" Text='<%# Bind("BirthDate") %>'></asp:TextBox><br />
<br />
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
Text="插入"></asp:LinkButton>
<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="取消"></asp:LinkButton>
</InsertItemTemplate>
</asp:FormView>
在 FormView 的 DataBound 事件中，處理 Insert 及 Edit 模式中 ID="txtBirthDate" 的 TextBox 的日期選擇
Protected Sub FormView1_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles FormView1.DataBound Dim oTextBox As TextBox '處理 FormView 中 Insert 及 Edit 模式中 ID="txtBirthDate" 的 TextBox 的日期選擇 If FormView1.CurrentMode <> FormViewMode.ReadOnly Then oTextBox = FormView1.FindControl("txtBirthDate") CreateDateSelectScript(oTextBox) End If End Sub再來要實作 GridView 中的日期選擇，將 GirdView 中的 BirthDate 轉為 TemplateField，將 TemplateField 的 EditItemTemplate 中 TextBox 設 ID="txtBirthDate。
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。">
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True" SortExpression="EmployeeID" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:TemplateField HeaderText="BirthDate" SortExpression="BirthDate">
<EditItemTemplate>
<asp:TextBox ID="txtBirthDate" runat="server" Text='<%# Bind("BirthDate") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("BirthDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。">
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True" SortExpression="EmployeeID" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:TemplateField HeaderText="BirthDate" SortExpression="BirthDate">
<EditItemTemplate>
<asp:TextBox ID="txtBirthDate" runat="server" Text='<%# Bind("BirthDate") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("BirthDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
在 GridView RowDataBound 事件中，處理 GridView 中 ID="txtBirthDate" 的TextBox 的日期選取
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound Dim oTextBox As TextBox '處理 GridView 中 ID="txtBirthDate" 的TextBox 的日期選取 If (e.Row.RowState And DataControlRowState.Edit) = DataControlRowState.Edit Then oTextBox = e.Row.FindControl("txtBirthDate") CreateDateSelectScript(oTextBox) End If End Sub