ASP.NET 魔法學院

程式碼下載: http://files.dotblogs.com.tw/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) 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>

在 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>

在 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