Sdílet prostřednictvím


Použití ovládacího prvku TextBoxWatermark s validačními ovládacími prvky (C#)

Christian Wenz

Stáhnout PDF

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 void btn_Click(object sender, EventArgs e)
 {
 lbl.Text = HttpUtility.HtmlEncode(Name.Text);
 }
</script>

Validátor si stěžuje, že pole neobsahuje žádný text.

Validátor si stěžuje, že pole neobsahuje žádný text (Kliknutím zobrazíte obrázek v plné velikosti).