Używanie kontrolki TextBoxWatermark w kontrolce FormView (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka TextBoxWatermark w zestawie narzędzi AJAX Control Toolkit rozszerza pole tekstowe, aby tekst był wyświetlany w polu. Gdy użytkownik kliknie pole, zostanie opróżniony. Jeśli użytkownik opuści pole bez wprowadzania tekstu, wstępnie wypełnionego tekstu pojawi się ponownie. Jest to również możliwe w kontrolce FormView.

Omówienie

Kontrolka TextBoxWatermark w zestawie narzędzi AJAX Control Toolkit rozszerza pole tekstowe, aby tekst był wyświetlany w polu. Gdy użytkownik kliknie pole, zostanie opróżniony. Jeśli użytkownik opuści pole bez wprowadzania tekstu, wstępnie wypełnionego tekstu pojawi się ponownie. Jest to również możliwe w obrębie kontrolki FormView .

Kroki

Przede wszystkim wymagane jest źródło danych. W tym przykładzie użyto bazy danych AdventureWorks i SQL Server 2005 Express Edition firmy Microsoft. Baza danych jest opcjonalną częścią instalacji programu Visual Studio (w tym wersji ekspresowej) i jest również dostępna jako oddzielny plik do pobrania w obszarze https://go.microsoft.com/fwlink/?LinkId=64064. Baza danych AdventureWorks jest częścią SQL Server 2005 Samples and Sample Databases (pobierz pod adresem https://www.microsoft.com/download/details.aspx?id=10679). Najprostszym sposobem skonfigurowania bazy danych jest użycie programu Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) i dołączenie AdventureWorks.mdf pliku bazy danych.

W tym przykładzie przyjęto założenie, że wystąpienie SQL Server 2005 Express Edition jest wywoływane SQLEXPRESS i znajduje się na tej samej maszynie co serwer internetowy. Jest to również domyślna konfiguracja. Jeśli konfiguracja się różni, musisz dostosować informacje o połączeniu dla bazy danych.

Aby aktywować funkcje ASP.NET AJAX i Control Toolkit, ScriptManager kontrolka musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie <form> ):

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

Następnie dodaj źródło danych do strony, która obsługuje instrukcje DELETE, INSERT i UPDATE SQL. Jeśli używasz programu Visual Studio asystent do utworzenia źródła danych, pamiętaj, że usterka w bieżącej wersji nie prefiksuje nazwy tabeli (Vendor) za pomocą Purchasingpolecenia . Na poniższej adiustacji przedstawiono poprawną składnię:

<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>

Zapamiętaj nazwę (ID) źródła danych, ponieważ będzie ona używana we DataSourceID właściwości kontrolki FormView . Sekcja <InsertItemTemplate> elementu FormView zawiera pole tekstowe rozszerzone przez kontrolkę TextBoxWatermarkExtender . Upewnij się, że rozszerzenie znajduje się w szablonie, a nie poza nim.

<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>

Teraz, gdy użytkownik zmieni się w tryb FormView wstawiania kontrolki, pole tekstowe nowego dostawcy zostanie wstępnie wypełnione dzięki kontrolce TextBoxWatermarkExtender . Kliknięcie wewnątrz pola tekstowego umożliwia zniknięcie tekstu wypełnienia.

Znak wodny w polu pochodzi z rozszerzenia (kliknij, aby wyświetlić obraz pełnowymiarowy)

Dalej