在jquery ajax中使用ASP.NET MVC验证？
在jquery ajax中使用ASP.NET MVC验证？
提问于 2012-12-23 03:16:41
我有如下简单的ASP.NET MVC操作：
public ActionResult Edit(EditPostViewModel data)
{
}EditPostViewModel具有如下验证属性：
[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }在视图中，我使用了以下助手：
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title,
new { @class = "tb1", @Style = "width:400px;" })如果我在一个表单上提交了这个文本框，那么验证将首先在客户端完成，然后在服务(ModelState.IsValid)上完成。
现在我有几个问题：
- 可以与jQuery ajax submit一起使用吗？我要做的只是删除表单，然后单击submit按钮，javascript将收集数据，然后运行
$.ajax. - Will服务器端的validation(
@Html.ValidationSummary(true))?
工作？
- 我如何才能将验证问题转发回客户端，并像使用build int javascript一样呈现它
Ajax调用示例：
function SendPost(actionPath) {
$.ajax({
url: actionPath,
type: 'POST',
dataType: 'json',
data:
{
Text: $('#EditPostViewModel_Text').val(),
Title: $('#EditPostViewModel_Title').val()
},
success: function (data) {
alert('success');
},
error: function () {
alert('error');
}
});
}编辑1：
包含在第页上：
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>回答 5
Stack Overflow用户
回答已采纳
发布于 2013-01-01 05:20:02
客户端
使用jQuery.validate库应该很容易设置。
在Web.config文件中指定以下设置：
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>在构建视图时，您会定义如下内容：
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title,
new { @class = "tb1", @Style = "width:400px;" })
@Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)备注：这些需要在表单元素中定义
然后，您需要包含以下库：
<script src='@Url.Content("~/Scripts/jquery.validate.js")' type='text/javascript'></script>
<script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")' type='text/javascript'></script>这应该能够为客户端验证做好准备
资源
服务器端
注意：这仅用于在jQuery.validation库之上进行额外的服务器端验证
也许像这样的东西可能会有所帮助：
[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
//Save data
return Json(new { Success = true } );
}其中，ValidateAjax是定义为：
public class ValidateAjaxAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (!filterContext.HttpContext.Request.IsAjaxRequest())
return;
var modelState = filterContext.Controller.ViewData.ModelState;
if (!modelState.IsValid)
{
var errorModel =
from x in modelState.Keys
where modelState[x].Errors.Count > 0
select new
{
key = x,
errors = modelState[x].Errors.
Select(y => y.ErrorMessage).
ToArray()
};
filterContext.Result = new JsonResult()
{
Data = errorModel
};
filterContext.HttpContext.Response.StatusCode =
(int) HttpStatusCode.BadRequest;
}
}
}这将返回一个指定所有模型错误的JSON对象。
示例响应将是
[{
"key":"Name",
"errors":["The Name field is required."]
},
{
"key":"Description",
"errors":["The Description field is required."]
}]这将返回给$.ajax调用的错误处理回调
您可以遍历返回的数据，根据返回的键设置所需的错误消息(我认为像$('input[name="' + err.key + '"]')这样的东西可以找到您的输入元素
Stack Overflow用户
发布于 2012-12-28 05:33:44
您应该做的是序列化表单数据并将其发送到控制器操作。MVC将使用ASP.NET模型绑定特性将表单数据绑定到EditPostViewModel对象(您的操作方法参数)。
您可以在客户端验证表单，如果一切正常，则将数据发送到服务器。valid()方法将派上用场。
$(function () {
$("#yourSubmitButtonID").click(function (e) {
e.preventDefault();
var _this = $(this);
var _form = _this.closest("form");
var isvalid = _form .valid(); // Tells whether the form is valid
if (isvalid)
{
$.post(_form.attr("action"), _form.serialize(), function (data) {
//check the result and do whatever you want
})
}
});
});Stack Overflow用户
发布于 2016-05-24 17:24:07
这里有一个相当简单的解决方案：
在控制器中，我们像这样返回错误：
if (!ModelState.IsValid)
{
return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet);
}以下是一些客户端脚本：
function displayValidationErrors(errors)
{
var $ul = $('div.validation-summary-valid.text-danger > ul');
$ul.empty();
$.each(errors, function (idx, errorMessage) {
$ul.append('<li>' + errorMessage + '</li>');
});
}这就是我们通过ajax处理它的方式：
$.ajax({
cache: false,
async: true,
type: "POST",
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
var isSuccessful = (data['success']);
if (isSuccessful) {
$('#partial-container-steps').html(data['view']);
initializePage();
}
else {
var errors = data['errors'];
displayValidationErrors(errors);
}
}
});另外，我用以下方式通过ajax呈现部分视图：
var view = this.RenderRazorViewToString(partialUrl, viewModel);
return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);RenderRazorViewToString方法：
public string RenderRazorViewToString(string viewName, object model)
{
ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
viewName);
var viewContext = new ViewContext(ControllerContext, viewResult.View,
ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14005773
复制相关文章
相似问题