2012-02-16 11 views
17

Sto costruendo una pagina utilizzando ASP.NET MVC 2 utilizzando KnockoutJS, plug-in Mapping KnockoutJS e jQuery 1.7.1. Mi piacerebbe essere in grado di utilizzare anche il plugin di convalida KnockoutJS (trovato here). Tuttavia ho bisogno di avere la convalida sia lato server che lato client.Modelli di visualizzazione mappe a KnockoutJS Validation

È possibile avere i miei modelli di vista mappati allo KnockoutJS Validation plugin che utilizza il metodo .extend()?

MODIFICA: Esempio. Accendere automaticamente questo:

[Required] 
public string Firstname { get; set; } 

In questa:

plug
var viewmodel = { 
    firstname: ko.observable().extend({ required: true }); 
} 
+0

Si stanno utilizzando le annotazioni di dati sui modelli C# e si utilizza EditorFor per compilare le regole di convalida dei client o si desidera?È possibile utilizzare la stessa convalida client-side non intrusiva che MVC ha incorporato che è possibile utilizzare per i moduli di stile MVC standard con non troppo lavoro (almeno in MVC3 con il modello di applicazione Internet). – kendaleiv

+0

Si prega di vedere le mie modifiche nell'originale – Ryan

+0

Questo è un approccio molto intrigante e ho dato un sacco di pensiero. Stavo pensando di generare codice di comportamento da C# a Javascript. Detto questo, penso che dovrai creare qualcosa che rifletta il modello e generi javascript. Forse solo la parte di validazione e lascia che il plugin di mappatura faccia quello che fa. La combinazione della mappatura e del codice di convalida generato potrebbe darti quello che ti serve. Il motivo per cui penso che sia necessario generare il codice di convalida è perché penso che sarà difficile generare il codice di convalida utilizzando solo Javascript, ma potrei sbagliarmi. –

risposta

7

Nel Mvc Controls Toolkit ho implementato un motore che abilita la normale convalida di Mvc (annotazioni di dati o qualsiasi altra cosa) su knockout.js.Entrambi è possibile abilitare la convalida lato client e lato server. Inoltre, i knockout possono essere utilizzati con gli helper Mvc, alcuni collegamenti vengono automaticamente dedotti, ecc.

+0

Sarebbe bello se potessimo iniziare con il modo in cui lo avete implementato usando MVC Controls Toolkit. Molte grazie – Ian

0

La convalida funziona nel modo in cui si estende l'osservabili si desidera convalidare.

Non importa se sono creati da mapping, è sufficiente creare una funzione che si esegue dopo che il mapping è stato eseguito e aggiungere tutta la convalida desiderata.

Oppure, se si desidera è possibile utilizzare i binding di convalida. Leggi il file Leggimi su Github per la convalida a eliminazione diretta e vedi come lo fanno.

+0

Vedere le mie modifiche nella domanda originale – Ryan

1

Mi consiglia di utilizzare il costruito nel MVC validazione lato client, potrebbe essere necessario per invocarlo, provate questo:

$.validator.unobtrusive.parse(yourFormElement) 

Codice da: https://stackoverflow.com/a/5669575/941536

Non sono sicuro se MVC2 ha validazione lato client discreto però , non è sicuro se un aggiornamento a MVC3 sarebbe un'opzione per te, se necessario.

+4

Questo non è il modo preferito per convalidare KnockoutJs. Non si desidera convalidare gli elementi del modulo. Vuoi convalidare il modello di vista. –

+2

Esiste un modo semplice per riutilizzare DataAnnotations o FluentValidator. Codice Net con convalida Knockout e far convalidare il viewmodel Knockout? Preferisco evitare di creare e mantenere due serie di regole di convalida, ma ciò potrebbe essere ancora più difficile se il modello di visualizzazione Knockout e il modello .Net non corrispondono o sono troppo diversi. – kendaleiv

+0

"Questo non è il modo preferito per convalidare KnockoutJs". Perché? La convalida è collegata agli input dell'utente e gli elementi di input sono generalmente associati alle proprietà del modello. La visualizzazione di messaggi di errore che non sono collegati a un campo di input ma ad alcune proprietà del modello che non sono visibili all'utente potrebbe confondere molto l'utente. –

5

Se si utilizza knockoutjs e jquery, ho trovato il seguente metodo molto semplice per eseguire la convalida del lato client di base.

Ovunque si desidera visualizzare il messaggio di errore nella pagina, includono un tag span come questo:

<span name="validationError" style="color:Red" 
data-bind="visible: yourValidationFunction(FieldNameToValidate())"> 
* Required. 
</span> 

Ovviamente è necessario scrivere "yourValidationFunction" per fare quello che vuoi che faccia. Ha solo bisogno di restituire true o false, true significa visualizzare l'errore.

È possibile utilizzare jquery per impedire a un utente di procedere se vengono visualizzati errori di convalida. Probabilmente già un salvataggio pulsante che attiva una funzione javascript per fare un po 'ajax o qualsiasi altra cosa, quindi basta includere questo nella parte superiore di esso:

if ($("[name='validationError']:visible").length > 0) { 
     alert('Please correct all errors before continuing.'); 
     return; 
    } 

Questo è molto più semplice e più flessibile rispetto a molte altre soluzioni di validazione fuori Là. È possibile posizionare il messaggio di errore ovunque si desideri e non è necessario imparare come utilizzare una libreria di convalida e questo metodo funziona indipendentemente dalla tecnologia lato server.

+0

+1 Mi piace la semplicità della soluzione. Attualmente sto lottando con jQuery valdiate per i campi non obbligatori e Knockout e la tua risposta mi ha indirizzato in una nuova direzione. –

Problemi correlati