FormView で TextBoxWatermark を使用する (VB)

作成者: Christian Wenz

PDF のダウンロード

AJAX コントロール ツールキットの 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アタッチすることです。

このサンプルでは、SQL Server 2005 Express Editionのインスタンスが呼び出SQLEXPRESSされ、Web サーバーと同じコンピューター上に存在することを前提としています。これは既定のセットアップでもあります。 セットアップが異なる場合は、データベースの接続情報を調整する必要があります。

ASP.NET AJAX と Control Toolkit の機能をアクティブにするには、コントロールを ScriptManager ページ上の任意の場所 (ただし、 要素内) に配置する <form> 必要があります。

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

次に、、および UPDATE SQL ステートメントをサポートするデータ ソースをページにDELETEINSERT追加します。 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使用されるため、覚えておいてください。 <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 事前入力されます。 テキスト ボックス内をクリックすると、入力者のテキストが消えます。

フィールドの透かしはエクステンダーから取得されます (クリックするとフルサイズの画像が表示されます)

前へ次へ