اعمال کلاسهای ویژه اعتبارسنجی Twitter bootstrap به فرمهای ASP.NET MVC
نویسنده: وحید نصیری
تاریخ: ۱۳۹۲/۰۳/۲۰ ۸:۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace Mvc4TwitterBootStrapTest.Models
{
public class User
{
[DisplayName("نام")]
[Required(ErrorMessage="لطفا نام را تکمیل کنید")]
public string Name { set; get; }
[DisplayName("نام خانوادگی")]
[Required(ErrorMessage = "لطفا نام خانوادگی را تکمیل کنید")]
public string LastName { set; get; }
}
}using System.Web.Mvc;
using Mvc4TwitterBootStrapTest.Models;
namespace Mvc4TwitterBootStrapTest.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(User user)
{
if (this.ModelState.IsValid)
{
if (user.Name != "Vahid")
{
this.ModelState.AddModelError("", "لطفا مشکلات را برطرف کنید!");
this.ModelState.AddModelError("Name", "نام فقط باید وحید باشد!");
return View(user);
}
// todo: save ...
return RedirectToAction("Index");
}
return View(user);
}
}
}@model Mvc4TwitterBootStrapTest.Models.User
@{
ViewBag.Title = "تعریف کاربر";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
{
@Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" })
<fieldset>
<legend>تعریف کاربر</legend>
<div class="control-group">
@Html.LabelFor(x => x.Name, new { @class = "control-label" })
<div class="controls">
@Html.TextBoxFor(x => x.Name)
@Html.ValidationMessageFor(x => x.Name, null, new { @class = "help-inline" })
</div>
</div>
<div class="control-group">
@Html.LabelFor(x => x.LastName, new { @class = "control-label" })
<div class="controls">
@Html.TextBoxFor(x => x.LastName)
@Html.ValidationMessageFor(x => x.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({
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('highlated');
},
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('unhighlated');
}
});
$(function () {
$('form').each(function () {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error');
}
});
});
});
</script>
}<div class="form-group">
@Html.LabelFor(x => x.Name)
<div class="input-group">
<span class="input-group-addon">http://www.</span>
@Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
<span class="input-group-addon">.domain.com</span>
@Html.ValidationMessageFor(model => model.Name)
</div>
</div> //تنظیمات ولیدیتور
errorPlacement: function (error, element) {
window.console.log($(error).text());
if (element.parent(".input-group").length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
} @Html.ValidationMessageFor(model => model.Name) </div> </div> به صورت زیر نوشته بشه </div> @Html.ValidationMessageFor(model => model.Name) </div>