ASP.NET MVC Behandlung Serverseite Validierung auf jQuery Form Wizard/Tabs

Question

Ich arbeite an einem großen Formular, das ich suche, um die Benutzerfreundlichkeit zu verbessern, indem es in einen jQuery-Formular-Assistenten (jQuery-Registerkarten) unterteilt.

Ich habe bereits sowohl die clientseitige Validierung als auch die serverseitige Validierung implementiert. Die clientseitige Validierung wird in jedem Registerkartenbereich durchgeführt, bevor zum nächsten Registerkartenbereich gewechselt wird, und die serverseitige Validierung wird nur durchgeführt, sobald das Formular auf dem Server veröffentlicht wurde.

Die Sache, mit der ich Probleme habe, ist, wie man serverseitige Validierungsfehler am besten behandelt. Wenn das Formular derzeit auf dem Server veröffentlicht wird, gibt es das Formular zurück und zeigt alle Fehler an. Dies funktioniert jedoch nicht gut mit jQuery-Registerkarten, da das Registerkarten-Panel nach der Rückgabe des Formulars wieder in den Standardzustand zurückgesetzt wird.

Wenn das Formular serverseitige Validierung fehlschlägt, wie lade ich das Formular neu und zeige automatisch das Registerfeld, in dem sich die Eingaben befinden, bei denen die serverseitige Validierung fehlgeschlagen ist. Nehmen wir zum Beispiel an, ich habe drei Registerkarten in meinem Formularassistenten. Wenn eine Eingabe in der dritten Registerkartengruppe die serverseitige Überprüfung nicht bestanden hat, lade ich das Formular mit der dritten angezeigten Registerkarte erneut.

Ich habe versucht, die von Assistenten Server-Seite, wo jeder Abschnitt hat seine eigene Ansicht und Controller Aktion jedoch jedoch mit diesem Ansatz ist es viel schwieriger, eine Navigationsleiste zu erstellen zwischen dem Formularabschnitt zu erstellen.

Answer 1

Ich hatte ein ähnliches Problem und ich folgende Lösung:

Beitrag Formulardaten über jquery ajax

$("#save").on("click", function (e) { 
     //clear error if exists before 
     var $form = $("#saveform");   
     $.post($form.attr("action"), $form.serialize(), function(result) { 
     if (result.ok) { 
      //handle success 
     } else { 
      handleError($form, result); 
     } 
     }); 
}); 

Validate Daten in der Server-Seite und json Ergebnis an den Client (ok oder Fehler) senden .

if (ModelState.IsValid) 
{ 
    return Json(new {ok = true}); 
} 
else 
{ 
    return Json(new {ok = false, errors= ModelState.Values.SelectMany(x => x.Errors)}); 
} 

Handle Ergebnis in Client-Seite (wenn alle Fehler zeigen in der Form hat und aktivieren Tab)

function handleError($form, result) { 
    for (var i = 0; i < result.errors.length; i++) { 
     var item = result.errors[i]; 
     for (var j = 0; j < item.MemberNames.length; j++) { 
      var input = $form.find("[name=" + item.MemberNames[j] + "]"); 
      var tab= input.closest(".tab"); 
      tab.addClass("active"); 
      //show error(near the input or in summary) 
     } 
    } 
}