نمایش خطاهای اعتبارسنجی سمت کاربر ASP.NET MVC به شکل Tooltip به کمک Twitter bootstrap
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: چهار دقیقه

این مطلب در ادامه بحث «اعمال کلاس‌های ویژه اعتبارسنجی Twitter bootstrap به فرم‌های ASP.NET MVC» می‌باشد. بنابراین تعاریف مدل و کنترلر آن به همراه توضیحات ذکر شده در آن، در ادامه مورد استفاده قرار خواهند گرفت.


اصول نمایش Tooltip در Bootstrap

Tooltip یکی دیگر از کامپوننت‌های جاوا اسکریپتی Bootstrap است.
<a rel="tooltip" title="یک سری توضیحات در اینجا" href="#">اطلاعات</a>

<script type="text/javascript">  
   $(document).ready(function () {  
     $("[rel='tooltip']").tooltip({placement:'top', trigger : 'hover'});  
   });  
</script>
نحوه استفاده از آن را در مثال فوق مشاهده می‌کنید.
برای المان مورد نظر، یک title تعریف کرده‌ایم. برای اینکه tooltip پیش فرض مرورگر در این حالت ظاهر نشود، یک rel=tooltip را در اینجا به المان اضافه کرده و سپس افزونه tooltip بوت استرپ، بر روی کلیه المان‌هایی با rel=tooltip فراخوانی شده است.
placement، محل قرارگیری tooltip را مشخص می‌کند؛ مانند بالا، پایین، چپ و راست. trigger مشخص می‌کند که این tooltip در چه زمانی ظاهر شود. برای مثال در حالت hover یا در حالت focus یک المان.
در اینجا بجای title، از ویژگی data-original-title نیز می‌توان استفاده کرد.



تبدیل خطاهای اعتبارسنجی ASP.NET MVC به Tooltip

هدف ما در اینجا، نهایتا رسیدن به شکل زیر می‌باشد:


همانطور که ملاحظه می‌کنید، اینبار بجای نمایش خطاها در یک برچسب مقابل کنترل متناظر، این خطا صرفا در حالت فوکوس کنترل، به شکل یک Tooltip در بالای آن ظاهر شده است.


کدهای کامل View برنامه

@model Mvc4TwitterBootStrapTest.Models.User
@{
    ViewBag.Title = "تعریف کاربر جدید";
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" })

    <fieldset class="form-horizontal">
        <legend>تعریف کاربر جدید</legend>
        <div class="control-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(model => model.Name)
                @*@Html.ValidationMessageFor(model => model.Name, null, new { @class = "help-inline" })*@
            </div>
        </div>
        <div class="control-group">
            @Html.LabelFor(model => model.LastName, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(model => model.LastName)
                @*@Html.ValidationMessageFor(model => model.LastName, null, new { @class = "help-inline" })*@
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                ارسال</button>
        </div>
    </fieldset>
}
@section JavaScript
{
    <script type="text/javascript">
        $.validator.setDefaults({            
            showErrors: function (errorMap, errorList) {
                this.defaultShowErrors();
                //اگر المانی معتبر است نیاز به نمایش تول‌تیپ ندارد
                $("." + this.settings.validClass).tooltip("destroy");
                //افزودن تول‌تیپ‌ها
                for (var i = 0; i < errorList.length; i++) {
                    var error = errorList[i];
                    $(error.element).tooltip({ trigger: "focus" }) // فقط در حالت فوکوس نمایش داده شود
                                    .attr("data-original-title", error.message);
                }
            },
            // همانند قبل برای رنگی کردن کل ردیف در صورت عدم اعتبار سنجی و برعکس
            highlight: function (element, errorClass, validClass) {
                if (element.type === 'radio') {
                    this.findByName(element.name).addClass(errorClass).removeClass(validClass);
                } else {
                    $(element).addClass(errorClass).removeClass(validClass);
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                }
                $(element).trigger('highlited');
            },
            unhighlight: function (element, errorClass, validClass) {
                if (element.type === 'radio') {
                    this.findByName(element.name).removeClass(errorClass).addClass(validClass);
                } else {
                    $(element).removeClass(errorClass).addClass(validClass);
                    $(element).closest('.control-group').removeClass('error').addClass('success');
                }
                $(element).trigger('unhighlited');
            }
        });
        //برای حالت پست بک از سرور عمل می‌کند
        $(function () {
            $('form').each(function () {
                $(this).find('div.control-group').each(function () {
                    if ($(this).find('span.field-validation-error').length > 0) {
                        $(this).addClass('error');
                    }
                });
            });
        });
    </script>
}
کدهای مدل و کنترلر همانند مطلب «اعمال کلاس‌های ویژه اعتبارسنجی Twitter bootstrap به فرم‌های ASP.NET MVC» می‌باشند و از تکرار مجدد آن‌ها در اینجا صرفنظر گردید.

توضیحات
- با توجه به اینکه دیگر نمی‌خواهیم خطاها به صورت برچسب در مقابل کنترل‌ها نمایش داده شوند، کلیه Html.ValidationMessageFor به صورت کامنت درآورده شده‌اند.
- تغییر دوم مطلب جاری، اضافه شدن متد showErrors به تنظیمات پیش فرض jQuery Validator است. در این متد، اگر المانی معتبر بود، Tooltip آن حذف می‌شود؛ یا در سایر حالات، المان‌هایی که نیاز به اعتبارسنجی سمت کلاینت دارند، یافت شده و سپس ویژگی data-original-title با مقداری معادل خطای اعتبارسنجی متناظر، به این المان افزوده شده و سپس متد tooltip بوت استرپ بر روی آن فراخوانی می‌گردد.
به عبارتی زمانیکه یک input box در ASP.NET MVC به همراه مقادیر مرتبط با اعتبارسنجی آن رندر می‌شود، چنین شکلی را خواهد داشت:
<input class="text-box single-line" data-val="true" data-val-required="لطفا نام را تکمیل کنید"
 id="Name" name="Name" type="text" value="" />
اما در اینجا به صورت پویا data-original-title نیز به آن افزوده می‌گردد:
<input class="text-box single-line input-validation-error" data-val="true" 
data-val-required="لطفا نام را تکمیل کنید" id="Name" name="Name" type="text" value="" 
data-original-title="لطفا نام را تکمیل کنید" title="">
این مقدار توسط افزونه tooltip بوت استرپ شناسایی شده و مورد استفاده قرار می‌گیرد.
  • #
    ‫۱۰ سال و ۵ ماه قبل، چهارشنبه ۱۰ اردیبهشت ۱۳۹۳، ساعت ۱۳:۴۸
    روش متداول افزودن این tooltip به یک المان جدید که به صفحه اضافه شده چیست؟
    • #
      ‫۱۰ سال و ۵ ماه قبل، چهارشنبه ۱۰ اردیبهشت ۱۳۹۳، ساعت ۱۳:۵۹
      $('body').tooltip({
          selector: '[rel=tooltip]'
      });
      • #
        ‫۱۰ سال و ۵ ماه قبل، چهارشنبه ۱۰ اردیبهشت ۱۳۹۳، ساعت ۱۴:۲۴
        ممنون حل شد. مثال بعد از افزودن لینک زیر:
        <a id="lnkNo1" href="#" rel="tooltip" title="some text here">some text here too!</a>
        میتوان با کد زیر tooltip را افزود:
        $('#lnkNo1').tooltip({ selector: '[rel=tooltip]' });
  • #
    ‫۹ سال و ۱۰ ماه قبل، چهارشنبه ۱۲ آذر ۱۳۹۳، ساعت ۲۱:۱۵
    با سلام
    چرا بعد از عملیات ajax ایی دیگه کار نمیده؟
    از کد زیر برای نمایش استفاده شده:
    <script type="text/javascript">
        $(document).ready(function () {
            $("[rel='tooltip']").tooltip({ placement: 'top', trigger: 'hover' });
        });
    </script>

    ولی بعد از انجام این دستور دیگه کار نمیده:
    @Ajax.ActionLink(" ", MVC.Admin.ContactUs.ActionNames.List, MVC.Admin.ContactUs.Name,
                new
                {
                    bywriter = ViewBag.bywriter,
                    bydate = ViewBag.bydate,
                    byisread = ViewBag.byisread,
                    byisshow = ViewBag.byisshow,
                    page = max,
                    count = ViewBag.COUNT
                },
                    new AjaxOptions
                    {
                        HttpMethod = "Post",
                        InsertionMode = InsertionMode.Replace,
                        OnBegin = "showLoading",
                        UpdateTargetId = "listdiv",
                        OnComplete = "hideLoading"
                    },
                new { @class = "glyphicon glyphicon-backward nodecoration", @rel = "tooltip", @title = "صفحه آخر" })
  • #
    ‫۷ سال و ۱۰ ماه قبل، دوشنبه ۸ آذر ۱۳۹۵، ساعت ۱۸:۵۶
    باتشکر.محل قرار گیری صحیح ارجاعات به فایل‌های *.js در فایل Layout در بخش head هست یا در انتهای فایل layout ؟
    من برای مثال اول این مطلب زمانی که فایل‌های ارجاع به js رو بعد از فوتر قرار می‌دهم این ویژگی غیر فعال است ولی زمانی که ارجاعات رو در بخش head معرفی می‌کنم ویژگی tooltip به نحوی که در این مطلب آموزش دادید نمایش داده می‌شود.
    من در مطلبی دیدم که تاکید کرده بود ارجاعات به خاطر سربارشون در انتهای فایل layout معرفی بشوند.
    • #
      ‫۷ سال و ۱۰ ماه قبل، دوشنبه ۸ آذر ۱۳۹۵، ساعت ۲۱:۲۵
      - «... محل قرار گیری صحیح ارجاعات ... »
      هرجایی که کار کند «صحیح» است و مرورگر آن‌را درک و پردازش کرده‌است. اما «بهتر» است آن‌ها را قبل از بسته شدن تگ body قرار داد تا بارگذاری آن‌ها سبب ایجاد وقفه در نمایش صفحه و بروز یک فلش سفید نشود. البته برای رفع این مشکل هم async scripts ارائه شده‌است.
      - «... زمانی که فایل‌های ارجاع به js رو بعد از فوتر قرار می‌دهم این ویژگی غیر فعال است ...»
      تقدم و تاخرها را رعایت نکردید. اسکریپت‌ها را باید به ترتیب و با درنظر گرفتن پیشنیازها در قسمت خاصی از صفحه اضافه کرد (از دیدگاه اجرایی برای مرورگر مهم نیست که کجا باشند).