knockout show server validierungen fehler

Question

ich bin neu in knockout. Ich möchte es in meinem Projekt auf ASP.NET MVC verwenden. Aber ich verstehe nicht, wie Validierungsfehler vom Server angezeigt werden.

Zum Beispiel haben wir ein Authentifizierungsformular mit Login und Passworteingaben. Erforderliche oder Länge Validierung kann ich auf der Client-Seite machen. Aber was soll ich tun, wenn ich das Formular an den Server übergebe, aber der Benutzer mit dem angegebenen Login nicht gefunden wurde oder das Passwort falsch ist? Wie kann ich einen Server-Validierungsfehler mit knockout.js anzeigen? Artikel Schlüssel, Fehlermeldung

[HttpPost] 
public ActionResult MyAction(MyModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     ... 
    } 
    var errorList = ModelState.ToDictionary(
    kvp => kvp.Key, 
    kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).ToArray()); 
    return Json(errorList); 
} 

Answer 1

hinzufügen propery die eine Fehlermeldung zu Ihrem Ansichtsmodell darstellen und es macht:

Update 1

Controller-Code zum Beispiel, wird es Wörterbuch zurückkehren beobachtbar. Dann tun Sie Ihre Ajax-Anfrage, um den Benutzer zu authentifizieren und wenn es fertig ist, sollten Sie das Ergebnis im JSON-Format erhalten, das Sie in diese Observable stellen. Sie können auch eine weitere Eigenschaft hinzufügen, um anzugeben, ob die Anfrage erfolgreich war oder nicht, und sie verwenden, um Ihre Fehlermeldung sichtbar zu machen.

Das Modell könnte wie folgt aussehen:

var model = { 
    ... // your current properties 
    errorMsg : ko.observable(""), 
    isError: ko.observable(false) 
} 

Verwenden visible mit isError Bindungsfehlermeldung angezeigt werden, wenn nötig.

Probe

Im folgenden Beispiel erhalten Sie errors Objekt zusammen mit den AJAX Ergebnisse und an die setErrors-Methode übergeben. Jedes Mitglied der errors entspricht dem Formularfeld. Die Fehlermeldung ist nur sichtbar, wenn die Eigenschaft definiert ist.

var model = { 
 
    errors: { 
 
    user: ko.observable(), 
 
    email: ko.observable() 
 
    }, 
 
    setErrors: function(errors) { 
 
    this.errors.user(errors.user); 
 
    this.errors.email(errors.email); 
 
    } 
 
}; 
 

 
ko.applyBindings(model); 
 

 
// Get the results from AJAX and pass them as params: 
 
var ajaxResults = { 
 
    errors: { 
 
    user: "Username is not available", 
 
    email: "Incorrect email address" 
 
    } 
 
}; 
 

 
model.setErrors(ajaxResults.errors);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<form> 
 
    <input type="text" name="user"> 
 
    <span data-bind="visible: errors.user, text: errors.user"></span> 
 
    <br> 
 
    <input type="text" name="email"> 
 
    <span data-bind="visible: errors.email, text: errors.email"></span> 
 
</form>