Použití ovládacího prvku TextBoxWatermark s validačními ovládacími prvky (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 může kolidovat s ASP.NET ověřovacími ovládacími prvky na stejné stránce, ale tyto problémy mohou být vyřešeny.
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 může kolidovat s ASP.NET ověřovacími ovládacími prvky na stejné stránce, ale tyto problémy mohou být vyřešeny.
Postup
Základní nastavení ukázky je následující: ovládací TextBox
prvek má vodoznak pomocí TextBoxWatermarkExtender
ovládacího prvku. Tlačítko aktivuje zpětné odeslání a později se použije k aktivaci ověřovacích ovládacích prvků na stránce. ScriptManager
Ovládací prvek je také nutný k inicializaci ASP.NET AJAX:
<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
<asp:TextBox ID="Name" runat="server" /> <br />
<asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><br />
<asp:Label ID="lbl" runat="server" />
</div>
<ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
TargetControlID="Name" WatermarkText=" Your Name " />
</form>
Teď přidejte RequiredFieldValidator
ovládací prvek, který při odeslání formuláře zkontroluje, jestli pole obsahuje text. Vlastnost InitialValue
validátoru musí být nastavená na stejnou hodnotu, která se používá v ovládacím TextBoxWatermarkExtender
prvku: Při odeslání formuláře je hodnota nezměněného textového pole hodnotou vodoznaku v něm:
<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />
Existuje však jeden problém s tímto přístupem: Pokud klient zakáže JavaScript, textové pole není předem vyplněno textem vodoznaku RequiredFieldValidator
, proto se neaktivuje chybová zpráva. Proto je vyžadován druhý RequiredFieldValidator
ovládací prvek, který kontroluje prázdné textové pole (vynechá atribut InitialValue
).
<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
Text="*" Display="Dynamic" runat="server" />
Vzhledem k tomu, že oba validátory používají Display
="Dynamic"
, koncový uživatel nemůže odlišit od vizuálního vzhledu, který z těchto dvou validátorů byl aktivován. Vypadá to, že existoval pouze jeden z nich.
Nakonec přidejte kód na straně serveru pro výstup textu v poli, pokud žádný validátor nevystavil chybovou zprávu:
<script runat="server">
Protected Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
lbl.Text = HttpUtility.HtmlEncode(Name.Text)
End Sub
</script>
Validátor si stěžuje, že pole neobsahuje žádný text (Kliknutím zobrazíte obrázek v plné velikosti).