ajax 调用 asp.net MVC 时模型出现验证错误
Validation error from model on ajax call asp.net MVC
我如何在 ajax 调用上显示验证错误,因为它在 ajax 上未显示错误 call.I 已附上我的代码,请检查它并告诉我我在哪里 wrong.i 我没有使用强模型绑定。没有 ajax 调用它显示模型错误,但我想通过 ajax 调用显示模型错误。
型号
public class Feedback
{
[Required(ErrorMessage = "Comment field is required")]
[Display(Name = "Comment")]
[MaxLength(1000, ErrorMessage = "Comment Cannot Be Longer Than 1000 Characters")]
public string CommentText { get; set; }
[Required(ErrorMessage = "Nme field is required")]
[MaxLength(100, ErrorMessage = "Name Cannot Be Longer Than 100 Characters")]
public string Name { get; set; }
[Required(ErrorMessage = "Email field is required")]
[MaxLength(150, ErrorMessage = "Email cannot be longer than 150 characters")]
[RegularExpression(@"^[a-zA-Z-._0-9]+@[a-zA-Z]+\.[A-Za-z]+$", ErrorMessage = "Invalid Email Address")]
public string Email { get; set; }
}
控制器
public ActionResult feedbackAndReview(Feedback feed)
{
if(ModelState.IsValid)
{
//add to database
}
return View();
}
查看
<div class="row">
<div class="col-md-6">
<textarea class="form-control" id="CommentText" style="margin-bottom:10px;max-width:100%; height:139px;" placeholder="Your thoughts"></textarea>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" id="Name" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" placeholder="Enter Valid Email Address" class="form-control" id="Email" />
</div>
</div>
<button type="button" onclick="submitReviewForm()" class="reviewBtn">POST REVIEW</button>
</div>
</div>
</div>
Ajax代码
function submitReviewForm()
{
var comment = $("#CommentText").val();
var name = $("#Name").val();
var email = $("#Email").val();
$.ajax({
type: 'post',
url: '/Account/feedbackAndReview',
data: {'CommentText' : comment , 'Name' : name , 'Email' : email },
success : function (data)
{
}
})
}
使用表单和绑定模型让事情变得更简单!
@model Feedback
<head
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>
<form id="myform" method="post">
<div class="row">
<div class="col-md-6">
<textarea class="form-control" id="CommentText" style="margin-bottom:10px;max-width:100%; height:139px;" placeholder="Your thoughts"></textarea>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" id="Name" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" placeholder="Enter Valid Email Address" class="form-control" id="Email" />
</div>
</div>
<input type="submit" value="Submit" id="btnSubmit" class="reviewBtn">POST REVIEW</button>
</div>
</div>
</div>
</form>
$('#myform').on('submit', function (e) {
e.preventDefault();
var ok = $(this).valid();
if (ok) {
var comment = $("#CommentText").val();
var name = $("#Name").val();
var email = $("#Email").val();
$.ajax({
type: 'post',
url: '/Account/feedbackAndReview',
data: {'CommentText' : comment , 'Name' : name , 'Email' : email },
success : function (data)
{
}
})
}
}
我如何在 ajax 调用上显示验证错误,因为它在 ajax 上未显示错误 call.I 已附上我的代码,请检查它并告诉我我在哪里 wrong.i 我没有使用强模型绑定。没有 ajax 调用它显示模型错误,但我想通过 ajax 调用显示模型错误。
型号
public class Feedback
{
[Required(ErrorMessage = "Comment field is required")]
[Display(Name = "Comment")]
[MaxLength(1000, ErrorMessage = "Comment Cannot Be Longer Than 1000 Characters")]
public string CommentText { get; set; }
[Required(ErrorMessage = "Nme field is required")]
[MaxLength(100, ErrorMessage = "Name Cannot Be Longer Than 100 Characters")]
public string Name { get; set; }
[Required(ErrorMessage = "Email field is required")]
[MaxLength(150, ErrorMessage = "Email cannot be longer than 150 characters")]
[RegularExpression(@"^[a-zA-Z-._0-9]+@[a-zA-Z]+\.[A-Za-z]+$", ErrorMessage = "Invalid Email Address")]
public string Email { get; set; }
}
控制器
public ActionResult feedbackAndReview(Feedback feed)
{
if(ModelState.IsValid)
{
//add to database
}
return View();
}
查看
<div class="row">
<div class="col-md-6">
<textarea class="form-control" id="CommentText" style="margin-bottom:10px;max-width:100%; height:139px;" placeholder="Your thoughts"></textarea>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" id="Name" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" placeholder="Enter Valid Email Address" class="form-control" id="Email" />
</div>
</div>
<button type="button" onclick="submitReviewForm()" class="reviewBtn">POST REVIEW</button>
</div>
</div>
</div>
Ajax代码
function submitReviewForm()
{
var comment = $("#CommentText").val();
var name = $("#Name").val();
var email = $("#Email").val();
$.ajax({
type: 'post',
url: '/Account/feedbackAndReview',
data: {'CommentText' : comment , 'Name' : name , 'Email' : email },
success : function (data)
{
}
})
}
使用表单和绑定模型让事情变得更简单!
@model Feedback
<head
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>
<form id="myform" method="post">
<div class="row">
<div class="col-md-6">
<textarea class="form-control" id="CommentText" style="margin-bottom:10px;max-width:100%; height:139px;" placeholder="Your thoughts"></textarea>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" id="Name" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" placeholder="Enter Valid Email Address" class="form-control" id="Email" />
</div>
</div>
<input type="submit" value="Submit" id="btnSubmit" class="reviewBtn">POST REVIEW</button>
</div>
</div>
</div>
</form>
$('#myform').on('submit', function (e) {
e.preventDefault();
var ok = $(this).valid();
if (ok) {
var comment = $("#CommentText").val();
var name = $("#Name").val();
var email = $("#Email").val();
$.ajax({
type: 'post',
url: '/Account/feedbackAndReview',
data: {'CommentText' : comment , 'Name' : name , 'Email' : email },
success : function (data)
{
}
})
}
}