FormView で TextBoxWatermark を使用する (C#)
作成者: Christian Wenz
テキスト ボックス内にテキストが表示されるように、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 データベース ファイルをアタッチすることです。
このサンプルでは、SQL Server 2005 Express Edition のインスタンスは SQLEXPRESS と呼ばれ、Web サーバーと同じマシン上に存在することを前提としています。これは既定のセットアップでもあります。 セットアップが異なる場合は、そのデータベースの接続情報を調整する必要があります。
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 コントロールのおかげで、新しいベンダーのテキスト フィールドが事前入力されます。 テキスト ボックス内をクリックすると、充てんテキストが消えます。
フィールドの透かしはエクステンダーから取得されます (クリックするとフルサイズの画像が表示されます)
