نمایش خطاهای اعتبارسنجی سمت کاربر ASP.NET MVC به شکل Popover به کمک Twitter bootstrap
نویسنده: وحید نصیری
تاریخ: ۱۳۹۲/۰۴/۰۳ ۸:۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
<a rel="popover"
data-content="محتوایی برای نمایش"
data-original-title="عنوان" href="#">اطلاعات</a>
<script type="text/javascript">
$(document).ready(function () {
$("[rel='popover']").popover({ placement: 'left' })
.click(function (e) { e.preventDefault(); });
});
</script>@model Mvc4TwitterBootStrapTest.Models.User
@{
ViewBag.Title = "Index";
}
@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).popover("destroy");
//افزودن پاپ اورها
for (var i = 0; i < errorList.length; i++) {
var error = errorList[i];
$(error.element).popover({ placement: 'left' })
.attr("data-original-title", "خطای اعتبارسنجی")
.attr("data-content", 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="" data-content="لطفا نام را تکمیل کنید">
@Html.TextBoxFor(x => x.Name,
new { data_content = "Name is required",
data_original_title = "Error", rel="popover" })