2017-04-19 2 views
0

Ich hoffe, jemand könnte mich in die richtige Richtung in Bezug auf Ajax Post zeigen. Ich habe eine lange Form, die eine Reihe von Fragen hat, die abhängig vom vorherigen Wert umgeschaltet werden. Wenn ich das Formular unter Verwendung von Ajax posten, wird das Formular erfolgreich übermittelt und die _Success Partial wird korrekt angezeigt. Wenn ich jedoch einen Fehler im Formular mache und dann abschicke. Beim Zurücksetzen wird die MVC @Html.ValidationMessageFor Anzeige von JQuery nicht mehr korrekt angezeigt, aber die umgeschalteten Felder werden zusammen mit der grünen Validierung zurückgesetzt.MVC Post Form mit Ajax auf Post zurück Form Zustand und JQuery zurücksetzen

Wie behalte ich den vorherigen Zustand? Oder mache ich das falsch und gibt es einen besseren Weg?

Vielen Dank im Voraus!

Form field before submit

Form After submit toggled question now hidden and colour missing

Mein Codebeispiel:

Ansicht

<div id="test-container"> 
    @Html.Partial("_PartialView",Model) 
</div> 

Teilansicht

<form method="post" action="@Url.Action("SendReport","Report")" data-form-ajax="true" data-form-target="#test-container"> 


// form fields here 

-Controller

if (Request.IsAjaxRequest()) 
      { 
       if (!ModelState.IsValid) 
       { 
        // set model 
        return PartialView("_PartialView",model); 
       } 

       // more model methods 

       if (model.RecordMessage.Type == MessageType.Success) 
       { 
        return PartialView("_Success", model); 
       } 
       else 
       { 
        return PartialView("_PartialView", model); 
       } 
      } 

Ajax

var ajaxSubmitForm = function() { 


    var $form = $(this); 

    var options = { 
     url: $form.attr("action"), 
     type: $form.attr("method"), 
     data: $form.serialize() 
    }; 

    $.ajax(options).done(function (data) { 


     $("#test-container").html(""); 
     $("#test-container").append(data); 
    }); 

    return false; 
}; 


$("form[data-form-ajax='true']").submit(ajaxSubmitForm); 

Antwort

1

Validierung So aktivieren Sie das Formular an die jquery Validator anhängen zurück kann. Dies sollte nach dem Append selbst behandelt werden.

var form = $("#myForm"); 
form.removeData('validator'); 
form.removeData('unobtrusiveValidation'); 
$.validator.unobtrusive.parse(form); 

Auch könnte es erforderlich sein, diese schaltet wieder zu aktivieren, wenn Sie mit ihnen einige jQuery-Plugin verwenden.

+1

Danke Cristian für Ihre Lösung. Ich habe gerade diesen Beitrag bemerkt und das ist tatsächlich, was ich auch getan habe !! – Alan