程式碼下載: 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() 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() 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() 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 ASP.NET 魔法學院
2008/3/17 00:38|
閱讀數 : 7139
|
我要推薦
|
|
文章分類:
ASP.NET 基礎
FormView
GridView
訂閱
DotBlogs Tags:
FormView
GridView
javascript