Menggunakan TextBoxWatermark dalam FormView (VB)

oleh Christian Wenz

Unduh PDF

Kontrol TextBoxWatermark di Kotak Alat Kontrol AJAX memperluas kotak teks sehingga teks ditampilkan di dalam kotak. Saat pengguna mengklik kotak, itu dikosongkan. Jika pengguna meninggalkan kotak tanpa memasukkan teks, teks yang telah diisi sebelumnya akan muncul kembali. Ini juga dimungkinkan dalam kontrol FormView.

Gambaran Umum

TextBoxWatermark Kontrol di Kotak Alat Kontrol AJAX memperluas kotak teks sehingga teks ditampilkan di dalam kotak. Saat pengguna mengklik kotak, itu dikosongkan. Jika pengguna meninggalkan kotak tanpa memasukkan teks, teks yang telah diisi sebelumnya akan muncul kembali. Ini juga dimungkinkan FormView dalam kontrol.

Langkah-langkah

Pertama-tama, sumber data diperlukan. Sampel ini menggunakan database AdventureWorks dan microsoft SQL Server 2005 Express Edition. Database adalah bagian opsional dari penginstalan Visual Studio (termasuk edisi ekspres) dan juga tersedia sebagai unduhan terpisah di bawah https://go.microsoft.com/fwlink/?LinkId=64064. Database AdventureWorks adalah bagian dari Sampel SQL Server 2005 dan Database Sampel (unduh di https://www.microsoft.com/download/details.aspx?id=10679). Cara termudah untuk menyiapkan database adalah dengan menggunakan Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) dan melampirkan AdventureWorks.mdf file database.

Untuk sampel ini, kami berasumsi bahwa instans SQL Server 2005 Express Edition dipanggil SQLEXPRESS dan berada di komputer yang sama dengan server web; ini juga merupakan pengaturan default. Jika penyetelan Anda berbeda, Anda harus menyesuaikan informasi koneksi untuk database.

Untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager kontrol harus diletakkan di mana saja di halaman (tetapi dalam <form> elemen ):

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

Kemudian, tambahkan sumber data ke halaman yang mendukung DELETEpernyataan , dan INSERTUPDATE SQL. Jika Anda menggunakan asisten Visual Studio untuk membuat sumber data, ingatlah bahwa bug dalam versi saat ini tidak mengawali nama tabel (Vendor) dengan Purchasing. Markup berikut menunjukkan sintaks yang benar:

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

Ingat nama (ID) sumber data, karena akan digunakan dalam DataSourceID properti FormView kontrol. Bagian <InsertItemTemplate> berisi FormView kotak teks yang diperluas oleh TextBoxWatermarkExtender kontrol. Pastikan bahwa extender berada di dalam templat dan bukan di luarnya.

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

Sekarang ketika pengguna berubah ke mode FormView sisipkan kontrol, bidang teks untuk vendor baru telah diisi sebelumnya berkat TextBoxWatermarkExtender kontrol. Klik di dalam kotak teks memungkinkan teks pengisi menghilang.

Cap air di bidang berasal dari extender (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya