نمایش خطاهای اعتبارسنجی سمت کاربر ASP.NET MVC به شکل Tooltip به کمک Twitter bootstrap
نویسنده: وحید نصیری
تاریخ: ۱۳۹۲/۰۴/۰۲ ۸:۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
<a rel="tooltip" title="یک سری توضیحات در اینجا" href="#">اطلاعات</a>
<script type="text/javascript">
$(document).ready(function () {
$("[rel='tooltip']").tooltip({placement:'top', trigger : 'hover'});
});
</script>@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>
}<input class="text-box single-line" data-val="true" data-val-required="لطفا نام را تکمیل کنید" id="Name" name="Name" type="text" value="" />
<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="">
$('body').tooltip({
selector: '[rel=tooltip]'
}); <a id="lnkNo1" href="#" rel="tooltip" title="some text here">some text here too!</a>
$('#lnkNo1').tooltip({ selector: '[rel=tooltip]' }); <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 = "صفحه آخر" })