AJAX 验证理念 - 包含 ValidationSummary 和 ValidationMessage

Question

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

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

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

如果您认为这是一个好主意并希望提供帮助，请留下答案和任何代码 sn-ps 以使其正常工作。如果您认为这是一个脑筋急转弯并且可以做得更好的方案，请告诉我如何。

控制器：

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

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