Idée de validation AJAX - Complète avec ValidationSummary & ValidationMessage

Question

J'ai examiné de nombreuses idées de validation côté client ASP.Net MVC, y compris xVal. Cela ne fournit pas un ValidationSummary pour le moment, j'ai donc choisi de faire un post AJAX qui boucle les erreurs ModelState et met à jour un DIV avec les messages d'erreur sur un post AJAX réussi.

Le problème avec ceci est votre ValidationMessage * à côté des champs ne seront pas remplis. Je suis venu avec une idée alternative que je n'ai pas encore testée car je ne connais pas la syntaxe complète pour la faire fonctionner mais j'ai pensé que je verrais ce que vous pensiez. Un problème que je pense peut-être un problème est que lorsque vous postez sur votre méthode Modifier/Action dans le contrôleur et que vous voulez retourner un objet JSON, je ne suis pas sûr que ce soit légal car JSON est utilisé pour GET actions seulement.

Si vous pensez que c'est une bonne idée et que vous voulez aider, veuillez laisser une réponse et des extraits de code pour que cela fonctionne. Si vous pensez que c'est un schéma de cerveau de cheveux et peut être fait mieux s'il vous plaît laissez-moi savoir comment.

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

Vue:

$(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

Dans mon projet actuel ASP.NET MVC J'ai beaucoup d'actions POST que j'utilise pour AJAX et avons couru à travers la question de la validation aussi. Ce que je faisais était de créer un objet wrapper qui est renvoyée de chacune de ces actions qui ressemble à quelque chose comme ça ...

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

Si la validation dans l'action n'a pas genre d'erreurs, je place toutes les données Je veux revenir dans la propriété Data. Toutefois, s'il existe un type d'erreur de validation ou une autre exception, je définis l'indicateur IsError sur true et définissez un message d'erreur dans la propriété Message. Puis à la fin de l'action, je sérialiser l'objet JSON et le retourner, (oui, vous pouvez le faire à partir d'une action POST) ...

return Json(myJsonWrapper); 

Du côté client, dans le onSuccess de mon AJAX POST code, je vérifie les erreurs, et prends les actions nécessaires comme ceci ... (Remarque, à ce stade du code, l'objet qui a été renvoyé du serveur a déjà été désérialisé dans un objet JS par jQuery)

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

Cela ne correspond pas à votre scénario, mais vous pourriez faire quelque chose de similaire à un concept. J'espère que cela vous donne au moins quelques idées.