在 FormView 中使用 TextBoxWatermark (C#)
AJAX Control Toolkit 中的 TextBoxWatermark 控制項會擴充文字方塊,以便在方塊內顯示文字。 當使用者按一下方塊時,即會清空。 如果使用離開方塊而不輸入文字,則預先填入的文字會重新出現。 這也可能發生在 FormView 控制項內。
概觀
AJAX Control Toolkit 中的 TextBoxWatermark
控制項會擴充文字方塊,以便在方塊內顯示文字。 當使用者按一下方塊時,即會清空。 如果使用離開方塊而不輸入文字,則預先填入的文字會重新出現。 這也可能發生在 FormView
控制項中。
步驟
首先,需要資料來源。 此範例會使用 AdventureWorks 資料庫和 Microsoft SQL Server 2005 Express Edition。 資料庫是 Visual Studio 安裝 (包括 Express Edition) 的選擇性部分,也在 https://go.microsoft.com/fwlink/?LinkId=64064 下做為個別下載提供。 AdventureWorks 資料庫是 SQL Server 2005 範例和範例資料庫的一部分 (於 https://www.microsoft.com/download/details.aspx?id=10679 下載)。 設定資料庫最簡單的方式,是使用 Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) 並附加 AdventureWorks.mdf
資料庫檔案。
在此範例中,我們假設會呼叫 SQLEXPRESS
SQL Server 2005 Express Edition 的執行個體,並位於與網頁伺服器相同的機器上;這也是預設設定。 如果您的設定不同,您必須調整資料庫的連接資訊。
若要啟用 ASP.NET AJAX 的功能和 Control Toolkit,ScriptManager
控制項必須放在頁面上的任何位置 (但在 <form>
元素內):
<asp:ScriptManager ID="asm" runat="server" />
然後,將資料來源新增至支援 DELETE
、INSERT
和 UPDATE
SQL 陳述式的頁面。 如果您使用 Visual Studio 助理來建立資料來源,請注意目前版本中有版本錯誤,即不會在資料表名稱 (Vendor
) 前面加上 Purchasing
。 以下標記顯示了正確的語法:
<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
DeleteCommand="DELETE FROM [Purchasing].[Vendor] WHERE [VendorID] = @VendorID"
InsertCommand="INSERT INTO [Purchasing].[Vendor] ([Name]) VALUES (@Name)"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT [VendorID], [Name] FROM [Purchasing].[Vendor]"
UpdateCommand="UPDATE [Purchasing].[Vendor] SET [Name] = @Name WHERE [VendorID] = @VendorID">
<DeleteParameters>
<asp:Parameter Name="VendorID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Name" Type="String" />
<asp:Parameter Name="VendorID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Name" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
請記住資料來源的名稱 (ID
),因為它將用於 FormView
控制項的 DataSourceID
屬性中。 FormView
的 <InsertItemTemplate>
區段包含由 TextBoxWatermarkExtender
控制項擴充的文字方塊。 請確定擴充器位於範本內,而不是在範本外。
<div>
<asp:FormView ID="FormView1" runat="server" DataSourceID="sds" AllowPaging="True">
<ItemTemplate>
<%# Eval("Name") %>
<asp:LinkButton ID="btnNew" runat="server" CommandName="New" Text="Insert" />
<asp:LinkButton ID="btnEdit" runat="server" CommandName="Edit" Text="Edit" />
<asp:LinkButton ID="btnDelete" runat="server" CommandName="Delete" Text="Delete" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="tbEdit" runat="server" Text='<%# Bind("Name") %>' />
<asp:LinkButton ID="btnUpdate" runat="server" CommandName="Update" Text="Update" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="tbNew" runat="server" Text='<%# Bind("Name") %>' />
<asp:LinkButton ID="btnInsert" runat="server" CommandName="Insert" Text="Insert" />
<ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
TargetControlID="tbNew" WatermarkText=" Vendor name " />
</InsertItemTemplate>
</asp:FormView>
</div>
當使用者變更為 FormView
控制項的插入模式時,多虧 TextBoxWatermarkExtender
控制項,現在會預先填入新廠商的文字欄位。 在文字方塊中按一下可讓填入文字消失。
欄位中的浮水印來自擴充器 (按一下以檢視完整大小的影像)