Použití ovládacího prvku TextBoxWatermark v ovládacím prvku FormView (VB)
Ovládací prvek TextBoxWatermark v sadě nástrojů AJAX Control toolkit rozšiřuje textové pole tak, aby se v poli zobrazil text. Když uživatel klikne do pole, vyprázdní se. Pokud uživatel pole opustí bez zadání textu, předvyplněný text se znovu zobrazí. To je možné také v rámci ovládacího prvku FormView.
Přehled
Ovládací TextBoxWatermark prvek v sadě AJAX Control Toolkit rozšiřuje textové pole tak, aby se v poli zobrazil text. Když uživatel klikne do pole, vyprázdní se. Pokud uživatel pole opustí bez zadání textu, předvyplněný text se znovu zobrazí. To je možné také v rámci FormView ovládacího prvku.
Postup
V první řadě se vyžaduje zdroj dat. Tato ukázka používá databázi AdventureWorks a microsoft SQL Server 2005 Express Edition. Databáze je volitelnou součástí instalace sady Visual Studio (včetně edice Express) a je také k dispozici jako samostatný soubor ke stažení v části https://go.microsoft.com/fwlink/?LinkId=64064. Databáze AdventureWorks je součástí SQL Server 2005 Samples and Sample Databases (ke stažení na adrese https://www.microsoft.com/download/details.aspx?id=10679). Nejjednodušším způsobem, jak databázi nastavit, je použít microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) a připojit AdventureWorks.mdf soubor databáze.
U této ukázky předpokládáme, že se volá SQLEXPRESS instance SQL Server 2005 Express Edition a nachází se na stejném počítači jako webový server. Jedná se také o výchozí nastavení. Pokud se vaše nastavení liší, musíte upravit informace o připojení pro databázi.
Aby bylo možné aktivovat funkce ASP.NET AJAX a Control Toolkit, ScriptManager musí být ovládací prvek umístěn kdekoli na stránce (ale v rámci elementu <form> ):
<asp:ScriptManager ID="asm" runat="server" />
Pak na stránku přidejte zdroj dat, který podporuje DELETEpříkazy SQL a UPDATE . INSERT Pokud k vytvoření zdroje dat používáte asistent sady Visual Studio, mějte na paměti, že při chybě v aktuální verzi není název tabulky (Vendor) předponou Purchasing. Následující kód ukazuje správnou syntaxi:
<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>
Zapamatujte si název (ID) zdroje dat, protože se použije ve DataSourceID vlastnosti FormView ovládacího prvku. Část <InsertItemTemplate> obsahuje FormView textové pole, které je rozšířeno ovládacím TextBoxWatermarkExtender prvku. Ujistěte se, že se extender nachází v šabloně, a ne mimo ni.
<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>
Když teď uživatel přejde do režimu FormView vkládání ovládacího prvku, textové pole pro nového dodavatele je předem vyplněno díky ovládacímu TextBoxWatermarkExtender prvku. Kliknutím do textového pole zmizí výplňový text.
Vodoznak v poli pochází z extenderu (kliknutím zobrazíte obrázek v plné velikosti).
