jquery - AJAX 验证思路 - 完成 ValidationSummary 和 ValidationMessage

Question

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

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

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

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

Controller :

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; }
}

如果操作中的验证没有任何类型的错误，我会将我想要返回的任何数据放在 Data 属性中。但是，如果出现任何类型的验证错误或其他异常，我将 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);
    }
}

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