Comment gérer les erreurs de validation côté serveur si un formulaire est exécuté dans une boîte de dialogue jQuery UI?

Question

J'ai le code suivant dans mon contrôleur après que l'utilisateur publie le formulaire mais si la validation échoue (_applicationValidator.Validate), je recharge normalement la vue "Edit" mais dans ce cas je veux garder la boîte de dialogue ouverte et montrer simplement ces des erreurs dans le dialogue.

Code de contrôleur:

[AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult Update(ApplicationUpdater applicationUpdater_) 
    { 
     if (_applicationValidator.Validate(applicationUpdater_, ModelState, ValueProvider)) 
     { 
      _repo.UpdateApplication(applicationUpdater_); 
      ApplicationsViewModel vm = new ApplicationsViewModel(); 
      vm.Applications = _repo.GetApplications(); 
      return View("Index", vm); 
     } 
     else 
     { 
      ApplicationViewModel vm = GetApplicationVM(); 
      return View("Edit", vm); 
     } 
    } 

Afficher le code (jQuery)

$(".showEditPopup").click(function() { 
      $.post("Applications/ShowEdit", 
       { recnum: $(this).parents('tr:first').attr("recnum") }, 
       function(htmlResult) { 
        $("#EditUserControlDiv").remove(); 
        $("#container").append(htmlResult); 
        $("#container select[multiple]").asmSelect(); 
        $("#EditUserControlDiv").dialog(
        { 
         height: 675, 
         width: 650, 
         modal: true 
        } 
        ); 
       } 
      ); 
     }); 

Answer 1

Comme l'a dit

Mais dans ce cas je veux garder le dialop ouvert et montrer simplement ces erreurs dans la boîte de dialogue

Ok.

Après openning la boîte de dialogue, vous devez

• cacher message d'erreur précédent

...

open: function(event, ui) { 
    $(".error").css("display", "none"); 
} 

Après avoir cliqué sur le bouton de dialogue, vous devez

• dis capable JQuery UI
• Show "Chargement en cours ..." image
• Envoyer le formulaire

...

$("#loading").css("display", "block"); 

panel.dialog("disable"); 

panel.dialog("option", "disabled", true); 

Après la réponse est chargé (Vous pouvez utiliser JSON comme réponse), vous devez

• vérifier si elle contient des erreurs.

...

// var response plays the role of JSON response 

var response = { 
    "errors":[ 
     { 
      "property-name":"name", 
      "error":"Name is required" 
     }, 
     { 
      "property-name":"age", 
      "error":"" 
     } 
    ] 
}; 

var hasErrors = false; 

for(var i = 0; i < response.errors.length; i++) { 
    if(response.errors[i].error != "") { 
     hasErrors = true; 

     $("#" + response.errors[i]["property-name"] + "-error") 
      .text(response.errors[i]["error"]) 
      .css("display", "block"); 
    } 
} 

if(!hasErrors) { 
    panel.dialog("close"); 

    alert("success form!"); 
} else { 
    panel.dialog("enable"); 

    panel.dialog("option", "disabled", false); 
} 

Here vous pouvez voir en action

Avis vous avez un comportement par défaut. Vous pouvez donc le mettre dans une fonction externe

Answer 2

le plus pratique:

• Désactiver tous les éléments d'entrée
• Faire un post Ajax à la fonction Update
• Gérez la réponse du serveur dans votre interface utilisateur. Par exemple. fermeture du formulaire d'interface utilisateur jQuery ou affichage d'erreurs de validation.

---

Changer votre fonction Update pour retourner un objet wrapper comme:

return new { Succeeded = false, ValidationMessages = new [] { "Incorrect username" } }; 

$.post(/* postdata */, function(resp) { 
    if(resp.Succeeded) //close jQuery UI dialog 
    else { 
     for(var i = 0; i < resp.ValidationMessages; i++) alert(resp.ValidationMessages[i])); 
    } 
}); 

Vous pouvez construire votre postdata, par quering tous les éléments d'entrée/textarea etc., et de les enregistrer dans un tableau, quelque chose comme (non testé):

var data = [];  
$('input').each(function() { 
    data.push([ $(this).id, $(this).val() ]); 
}); 

Answer 3

Vous pouvez utiliser le plugin jQuery form pour créer une version Ajax du editin g forme:

$(".showEditPopup").click(function() { 
      function popDialog(htmlResult) { 
       $("#EditUserControlDiv").remove(); 
       $("#container").append(htmlResult); 
       $("#container form").ajaxForm(function(result) { 
        // There may be an easier way (like testing for a 
        // certain string in the result) 
        // to detect the need to "repop" 
        if ($(result).find('form').length) { 
        popDialog(result); 
        } else { 
        $("#EditUserControlDiv").dialog('close'); // or remove 
        } 
       }); 
       $("#container select[multiple]").asmSelect(); 
       $("#EditUserControlDiv").dialog(
       { 
        height: 675, 
        width: 650, 
        modal: true 
       } 
       ); 
      } 

     $.post("Applications/ShowEdit", 
      { recnum: $(this).parents('tr:first').attr("recnum") }, 
      function(result) { popDialog(result); } 
     ); 
    });