DataAnnotations Number error message

19 באפריל 2015

תגיות: , ,
אין תגובות

אחד הדברים ש – asp.net mvc מביאה איתה, זה היכולת שלנו ליצור אלמנטי UI בעזרת helpers, אחד היתרונות של שימוש בשיטה זו, היא שהוא מייצר עבורנו הגדרות עבור jQuery Validation בצורה אוטומטית, לדוגמה – בהניתן הגדרת המודל הבאה:

Code Snippet
public class Person
{
    [Required(AllowEmptyStrings = false)]
    public int Age { get; set; }

    [EmailAddress]
    [Required(AllowEmptyStrings = false)]
    public string Email { get; set; }
}

נוכל לכתוב html שיצור עבורנו אלמנטים, וגם ידאג להגדרת הולידציות

Code Snippet
@model WebApplication8.Controllers.Person

<!DOCTYPE html>

<html>
<head>
    <link href="~/Scripts/Site.css" rel="stylesheet" />
    <link href="~/Scripts/bootstrap.css" rel="stylesheet" />
   
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <title>Index</title>
</head>
<body class="container">
    <form>
        <div class="form-group">
            @Html.LabelFor(m => m.Age, new { @class = "control-label" })
            @Html.TextBoxFor(m => m.Age, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Age)
        </div>

        <div class="form-group">
            @Html.LabelFor(m => m.Email, new { @class = "control-label" })
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Email)
        </div>

        <input type="submit" class="btn btn-default" />
    </form>
</body>
</html>

 

בשורה הראשונה נגדיר את המודל עבור ה – View הנוכחי, לאחר ייבוא של מספר קבצי עיצוב וקוד נצרכים, נשתמש ב – Helpers ליצור את האלמנטים בעיצוב של bootstrap, התוצאה תראה כך:

image

 

בזמן לחיצה על הלחצן, נקבל את התצוגה הבאה:

image

 

המנגנון של MVC מאשפר לשלוט על הודעות השגיאה, בעזרת המאפיינים של ה – Attributes.

Code Snippet
[EmailAddress]
[Required(AllowEmptyStrings = false, ErrorMessage="שדה זו הינו חובה")]
public string Email { get; set; }

 

כעת לחיצה על הלחצן, במידה ואין טקסט בשדה הדוא”ל, יציג את הודעת השגיאה “שדה זה הינו חובה”.

הבעייה מתחילה עם השדה Age, המנגנון של MVC אינו מאפשר לשנות את הודעת השגיאה במידה והכנסנו טקסט לשדה מספרי, יש מספר דוגמאות ברשת כדי לפתור את הבעיה בצד שרת, אך הם טיפה מסובכים.

אחת התלמידות המוכשרות בסמינר (החדש) בירושלים שאני מלמד בו, הציעה לשנות את ה – attribute שנוצר בצד הלקוח, עבור ה – jQuery Validation,

Code Snippet
<div class="form-group">
    @Html.LabelFor(m => m.Age, new { @class = "control-label" })
    @Html.TextBoxFor(m => m.Age, new { @class = "form-control",
                                        @data_val_number="שדה זו הינו מספרי" })
    @Html.ValidationMessageFor(m => m.Age)
</div>

ואכן רעיון זה עבד בצורה הפשוטה והטובה ביותר.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *