AJAX-Modell-Validierung mit Teilansicht

Question

Ich habe eine Teilansicht, die ein Login ist, das als Popup funktioniert. Alles, was ich tun möchte, ist, dass mein Modell die Validierung (Server-Seite) durchführt und alle Fehler über AJAX zurückgibt. Der folgende Code gibt die Teilansicht nur mit den Fehlern zurück. Ich möchte, dass mein Aktionsergebnis keine Ansicht zurückgibt, sondern nur die Fehler. In altem ASP.NET wäre dies ein Partial Post Back. Ich bin nicht sicher, wie man das in MVC erreicht.

Hier ist das Modell

public class LoginModel 
{ 
    [Required] 
    public String Email { get; set; } 
    [Required] 
    [DataType(DataType.Password)] 
    public String Password { get; set; } 

} 

Hier ist die Teilansicht

@model MySite.Models.LoginModel 
@using (Ajax.BeginForm("Authenticate", "Account", null, new AjaxOptions { OnFailure = "error" }, new { id = "LoginForm" })) 

{

<div class="modal-body" id="LoginPopupDialogMessage"> 
    The page you have requested requires you to login. Please enter your credentials and choose your country: 
    <br /> 
    <br /> 
    <div class="row"> 
     <div class="form-group col-lg-offset-2 col-lg-8"> 
      <label>Email Address</label> 
      @Html.TextBoxFor(u => u.Email, new { @class = "form-control input-lg input-sm", id = "Email", name = "Email" }) 
      @Html.ValidationMessageFor(u => u.Email) 
     </div> 
    </div> 

    <div class="row"> 
     <div class="form-group col-lg-offset-2 col-lg-8 "> 
      <label>Password</label> 
      @Html.PasswordFor(u => u.Password, new { @class = "form-control input-lg input-sm", name = "Password" }) 
      @Html.ValidationMessageFor(u => u.Password) 
     </div> 

    </div> 
    <div style="text-align: center; padding-top: 20px;" class="ImageGroup"> 
     <button name="companyCode" value="LB_US" class="btn-link" type="submit"> 
      <img src="../../WebContent/Images/icon-flag-usa.png" /> 
     </button> 
     <button name="companyCode" value="LB_CA" class="btn-link" type="submit"> 
      <img src="../../WebContent/Images/icon-flag-canada.png" /> 
     </button> 
     <button name="companyCode" value="LB_EU" class="btn-link" type="submit"> 
      <img src="../../WebContent/Images/icon-flag-europe.png" /> 
     </button> 
    </div> 
</div> 
} 

ich die Parial Ansicht rufen von _layout.cshtml.

<div class="modal fade" id="LoginPopupDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header" style="background: #e7e3e7; color:#000;"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#000;"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <div class="modal-title" id="LoginPopupDialogHeader">Please Login</div> 
      </div> 
       @Html.Action("Login", "Account") 

     </div> 
    </div> 
</div> 

Meine Controller Aktion:

[HttpPost] 
[Route("account/authenticate")] 
public ActionResult Authenticate(String companyCode, LoginModel model) 
     { 
    if (!ModelState.IsValid) 
     { 

      // ?? 
     } 
    return PartialView("Login", model); 
} 

Answer 1

Da Ihr Code eine Ajax-Formular-Vorlage für die Anmeldung tut, sollten Sie versuchen, eine JSON Antwort vom Server zurückzukehren. Wenn die Modellvalidierung fehlschlägt, können Sie die Validierungsfehler aus dem Modellzustandsverzeichnis lesen und in einer Sammlung von Strings (Fehlermeldungen) speichern und als Teil der json-Antwort zurückgeben. Wenn die Modellüberprüfung erfolgreich ist, können Sie den Code weiter ausführen, um die Anmeldeinformationen zu überprüfen. Wenn diese Ergebnisse gut aussehen, senden Sie eine JSON-Antwort mit der nächsten URL für den Benutzer zurück (auf die wir den Benutzer umleiten können).

[HttpPost] 
public ActionResult Authenticate(String companyCode, LoginModel model) 
{ 
    if (!ModelState.IsValid) 
    { 
     var errors = ViewData.ModelState.Values 
          .SelectMany(x => x.Errors.Select(c => c.ErrorMessage)); 
     return Json(new { Status = "Error", Errors = errors }); 
    } 

    //to do :Verify login, if good, return the below respose 
    var url=new UrlHelper(Request.RequestContext); 
    var newUrl = url.Action("About"); 
    return Json(new { Status="Success", Url = newUrl}); 
} 

nun Ihrer Meinung nach, können Sie einen OnSuccess Handler als Teil der Ajaxoptions festlegen. Dies wird ein JavaScript-Objekt sein, auf das die json-Antwort vom Server kommt. Grundsätzlich müssen wir den Status-Eigenschaftswert überprüfen und die entsprechenden Dinge tun.

new AjaxOptions { OnFailure = "error" , OnSuccess="loginDone"} 

Die folgende Implementierung von loginDone warnt einfach die Fehlermeldungen. Sie können es aktualisieren, um es als Teil des DOM anzuzeigen.

function loginDone(d) { 
    if (d.Status === "Success") { 
     window.location.href = d.Url; 
    } else { 
     $.each(d.Errors,function(a, b) { 
       alert(b); 
     }); 
    } 
} 

Sie können sich auch die unaufdringliche Client-seitige Validierung ermöglicht, die die Client-seitige Validierung funktioniert, bevor Sie einen Anruf-Server zu machen. Dies zeigt auch die Fehlermeldungen in den Überprüfungsfehlern (wie bei der normalen MVC-Modellprüfung)