在 FormView 中使用 TextBoxWatermark (C#)

作者 ：擷取 Wenz

下載 PDF

AJAX 控件工具組中的 TextBoxWatermark 控件會擴充文本框，讓文字顯示在方塊中。 當使用者按兩下方塊時，即會清空。 如果用戶離開方塊而不輸入文字，則預先填入的文字會重新出現。 您也可以在 FormView 控制項內執行此動作。

概觀

TextBoxWatermark AJAX 控制件工具組中的控件會延伸文字框，讓文字顯示在方塊中。 當使用者按兩下方塊時，即會清空。 如果用戶離開方塊而不輸入文字，則預先填入的文字會重新出現。 您也可以在 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資料庫檔案。

在此範例中，我們假設呼叫 SQL Server 2005 Express Edition SQLEXPRESS 的實例，並位於與網頁伺服器相同的計算機上;這也是預設設定。 如果您的設定不同，您必須調整資料庫的連線資訊。

若要啟用 ASP.NET AJAX 和 Control Toolkit 的功能，控件 ScriptManager 必須放在頁面上 (，但在 <form> 元素內) ：

<asp:ScriptManager ID="asm" runat="server" />

然後，將數據源新增至支援 DELETE、 INSERT 和 UPDATE SQL 語句的頁面。 如果您使用 Visual Studio 助理 來建立數據源，請注意目前版本中的 Bug 不會在數據表名稱前面加上 (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) ，因為它將用於 DataSourceID 控件的 FormView 屬性中。 的 <InsertItemTemplate>FormView 區段包含控件所延伸 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 預先填入。 文字框中的按兩下可讓填入文字消失。

欄位中浮水印來自擴充器 (按兩下即可檢視大小完整的影像)

下一步