Creating Custom ValidaorSummary
אפשר להוריד
מכאן את דוגמת הקוד.
כתבתי כמה פעמים על asp validators, כאן אני רוצה לכתוב על יצירה של Validator Summary מותאם אישית, אבל קודם לכן נראה מה זה Validator Summary בכלל.
אז ככה, אנחנו יכולים לשים על הדף שלנו הרבה Validaors ולכל אחד מהם לתת ערך כלשהו למאפיין Text, אבל בנוסף על כך אנחנו יכולים לתת ערך למאפיין ErrorMessage, שזה אומר במידה ויהיה ValidatorSummary על הדף הוא יציג את כל ה - ErrorMessage של כל ה - Validators. לדוגמא.
יש לנו שני תיבות טקסט,
שני RequiredFieldValidator
לחצן אחד.
ן - ValidaroSummary אחד.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ErrorMessage="Name is Required"
Text="*"
ControlToValidate="TextBox1">
</asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator2"
runat="server"
ErrorMessage="Password is Required"
Text="*"
ControlToValidate="TextBox2">
</asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
בזמן לחיצה על הלחצן - במידה ולא הכנסנו ערכים, נקבל ליד תיבות הטקסט כוכבית אדומה, בנוסף נקבל בתחתית העמוד רשימה עם כל השגיאות.
האופצייה השנייה לתצוגה של השגיאות, היא באמצעות alert, מה שצריך לעשות - זה להוסיף ShowMessageBox=true
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ShowMessageBox="true"
ShowSummary="false" />
ואז נקבל את סיכום השגיאות באמצעות alert.
אבל מה קורה אם אנחנו רוצים לקסטם את התצוגה של סיכום השגיאות, נניח בראש העמוד נציג div עם כל השגיאות, או באמצעות
ModalPopup של ajax, או כל רעיון אחר.
למעשה חרשתי באינטרנט ולא מצאתי שום דוגמא, אז לא היתה לי ברירה והייתי חייב לחקור מה קורה מאחורי הקלעים של ה - ValidatorSummary כדי להבין מה צריך לעשות.
אז התברר לי שלמעשה במידה וה - Validator מגלה שהולידציה נכשלה, הוא מפעיל מתודה שנקראת ValidationSummaryOnSubmit שיושב בקובץ WebResource.axd שמגיע יחד עם הדף (שווה לחקור אותו הוא מכיל המון פונקציות שימושיות), אותה מתודה מייצרת למעשה את ה - alert או את רשימת השגיאות.
מה שאני עושה הוא:
1. לבדוק האם קיימת פונקצייה עם השם ValidationSummaryOnSubmit על הדף.
2. לשמור מצביע לאותה פונקצייה (אפשר לעשות את זה ב - JasaScript).
3. לדרוס את הפונקצייה המקורית עם מימוש משלנו, כך שמי שיקרא למתודה ValidationSummaryOnSubmit יפעיל את המימוש שלנו.
4. לבדוק האם ה - ValidatorSummary במאפיין showCustom (מאפיין שאני המצאתי) = true.
5. במידה ולא - להפעיל את הפונקצייה המקורית של ValidationSummaryOnSubmit.
6. במידה וכן - לעשות את המימוש שאנחנו ממציאים.
7. חשוב מאוד: כל המימוש שלנו חייב להיות בסוף העמוד, כך שהמתודה של מייקרוסופט תוגדר לפני המתודה שלנו - אחרת לא נוכל לדרוס אותה, אלא היא תדרוס את שלנו.
בדוגמא אני מוסיף לדף div בראש הדף ומגדיר שלא יראו אותו, בזמן שאני מגלה שיש שגיאות, אני כותב ל - div את השגיאות ומציג אותו.
הנה ההגדרה החדשה של ה - SummaryValidator.
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowCustom="true" />
הנה ה - div וכמובן הפנייה לקובץ הסקריפט.
<div id='divError'>
<span id="error"></span>
<input id="closeError" type="button" value="Close" onclick="Close()" />
</div>
<script src="CustomSummaryValidator.js" type="text/javascript"></script>
מיד אראה את קוד ה - JS, אבל לפני זה אני אציג את קובץ ה - CSS (שכמובן יש לו הפנייה ב - head)
#divError
{
border: thin solid #000000;
position: absolute;
top: 2px;
left: 0px;
background-color: #f5f5f5;
color: #F8D328;
display: none;
font-family: Tahoma;
font-size: 12pt;
font-weight: bold;
line-height: 3;
}
#closeError
{
color: #3f52b8;
background-color: #f6f8ff;
border:0px;
padding:2px 6px;
margin:0px 6px;
text-align:center;
font-family:Tahoma;
}
מה שחשוב - זה שה - divError מקבל מיקום אבסולוטי לתחילת העמוד ומוגדר שלא רואים אותו.
הנה הסקריפט.
if (typeof (ValidationSummaryOnSubmit) == "function") {
var OriginalValidationSummaryOnSubmit = ValidationSummaryOnSubmit;
ValidationSummaryOnSubmit = function(validationGroup) {
if (typeof (Page_ValidationSummaries) == "undefined")
return;
var summary, sums;
for (sums = 0; sums < Page_ValidationSummaries.length; sums++) {
summary = Page_ValidationSummaries[sums];
if (summary.ShowCustom != "true") {
OriginalValidationSummaryOnSubmit(validationGroup);
}
CustomImplementation(summary, validationGroup);
}
}
}
function CustomImplementation(summary, validationGroup) {
var str = '';
if (!Page_IsValid && IsValidationGroupMatch(summary, validationGroup)) {
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid && typeof (Page_Validators[i].errormessage) == "string") {
str += Page_Validators[i].errormessage;
str += "; ";
}
}
}
var span = document.getElementById('error');
span.innerText = str;
var div = document.getElementById('divError');
div.style.display = 'block';
}
function Close() {
var div = document.getElementById('divError');
div.style.display = 'none';
}
כעת כשנלחץ על הלחצן נקבל את הדבר הבא:
כמובן שזה מימוש פשוט, אבל מהנקודה הזאת כל אחד יכול לקחת את זה קדימה ולעשות מימושים נהדרים ל - SummaryValidator
בהצלחה.