Asp.Net Ajax–ValidatorCallout控制項使用

文章目錄

• 簡介
• 重要屬性
• 樣本

簡介

ValidatorCallout控制項是一個用來綁定驗證控制項的提示控制項,讓驗證的資訊的顯示可以更加地直觀。 如下

重要屬性

TargetControlID:要綁定的驗證控制項的ID
Width:彈出的提示資訊的寬度
HighlightCssClass:彈出的提示資訊所應用的樣式
WarningIconImageUrl:彈出資訊中的警示圖片的地址    

樣本

1 開啟vs2005,建立一個AjaxControlToolKit網站,命名為oec2003_ValidatorCallout
2 開啟預設產生的Default.aspx頁面,切換到表單檢視
3 在頁面中拖拽兩個TextBox,兩個RequiredFieldValidator和兩個ValidatorCallout控制項
4 兩個RequiredFieldValidator控制項對應兩個TextBox,來驗證兩個文字框不可為空,同時定義錯誤提示資訊,這些錯誤資訊將會通過ValidatorCallout來顯示,將RequiredFieldValidator的Display屬性設定為none,否則錯誤提示資訊就會在兩個地方同時顯示,這是我們不想看到的,代碼如下

<asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" controltovalidate="TextBox1"       display="None" errormessage="姓名不可為空<br>請輸入姓名"></asp:requiredfieldvalidator>   <br />   密 &nbsp;&nbsp; 碼：<asp:textbox id="TextBox2" runat="server" textmode="Password" width="148px"></asp:textbox>   <asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" controltovalidate="TextBox2"       display="None" errormessage="密碼不可為空，請輸入密碼"></asp:requiredfieldvalidator>

5 設定兩個ValidatorCallout控制項對應兩個RequiredFieldValidator控制項,代碼如下

<ajaxtoolkit:validatorcalloutextender id="ValidatorCalloutExtender1" runat="server"     targetcontrolid="RequiredFieldValidator1">     </ajaxtoolkit:validatorcalloutextender> <ajaxtoolkit:validatorcalloutextender id="ValidatorCalloutExtender2" runat="server"     targetcontrolid="RequiredFieldValidator2">     </ajaxtoolkit:validatorcalloutextender>

6 儲存設計,運行程式,當沒有在文字框中輸入文字而提交表單時,就會在文字框後面出現一個錯誤提示框,如所示