AJAX 验证想法 - 包含 ValidationSummary 和 ValidationSummary 验证消息

Question

我一直在研究许多 ASP.Net MVC 客户端验证想法，包括 xVal。 目前它不提供 ValidationSummary，因此我选择执行一个 AJAX post，它循环遍历 ModelState 错误，并使用成功的 AJAX post 上的错误消息更新 DIV。

问题是字段旁边的 ValidationMessage * 不会被填充。 我提出了一个尚未测试的替代想法，因为我还不知道让它工作的完整语法，但我想我会看看你们的想法。

我认为可能存在的一个问题是，当您发布到控制器中的编辑/创建操作方法并且想要返回 JSON 对象时，我不确定这是否合法，因为 JSON 仅用于 GET 操作。

如果您认为这是一个好主意并且想要提供帮助，请留下答案和任何代码片段以使其正常工作。 如果您认为这是一个费脑筋的计划并且可以做得更好，请告诉我如何做。

控制器：

if (!ModelState.IsValid)
{
            var err = ModelState.Where(f => f.Value.Errors.Count > 0);    
            if (Request.IsAjaxRequest())
            {
                   return this.Json(err);
            }
            else
            {
                  return View(PostedItem); 
            }
}

视图：

    $(function() {



    $('#createForm').ajaxForm({
        success:fillSummary
    });

    //click events
    $('#btnSave').click( function(){
        $('#createForm').submit();
    });

    function fillSummary(data) 
    {
       //Loop through the modelstate errors returned
        $.each(data)
       {
            //Append Summary DIV with error message
            //Look for span with the ModelState key name and set it to visible
       }           
    }



    <div id="summary">
       <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.")%>
    </div>
    <form action="<%=Url.Action("Create") %>" method="post" id="createForm">

        <fieldset>
            <div>
                 <label for="Title">Title:</label>
                <%= Html.TextBox("Title",Model.Title) %>
                <%= Html.ValidationMessage("Title", "*") %>
                <span id="val_Title" style="display:none">*</span>              
            </div>
   </form>
   <input type="button" value="Save" id="btnSave" />

Answer 1

在我当前的 ASP.NET MVC 项目中，我有很多用于 AJAX 的 POST 操作，并且也遇到了验证问题。 我所做的是创建一个包装对象，该对象从每个操作返回，看起来像这样...

public class JsonWrapper
{
   public object Data { get; set; }
   public bool IsError { get; set; }
   public string Message { get; set; }
}

如果操作中的验证没有任何类型的错误，我会将想要返回的任何数据放入数据中财产。 但是，如果存在任何类型的验证错误或其他异常，我会将 IsError 标志设置为 true 并在 Message 属性中设置错误消息。 然后在操作结束时，我将对象序列化为 JSON 并返回它，（是的，您可以通过 POST 操作执行此操作）...

return Json(myJsonWrapper);

从客户端，在我的 AJAX POST 代码的 onSuccess 中，我检查错误，并像这样采取任何必要的操作...（注意，在代码中，从服务器返回的对象已经被 jQuery 反序列化为 JS 对象）

function onSuccess(jsonWrapper) {
    if (!jsonWrapper.IsError) {
        var myDataFromAction = jsonWrapper.Data;
        //Do stuff with my data
    }
    else {
        MessageBox.ShowMessage(jsonWrapper.Message);
    }
}

这不适合您的场景盒子，但你可以做一些类似的概念。 希望这至少能给你一些想法。