Lean ASP Net Core 2.1-Reaction Form, Validation en Web API Integration-Martijn Boland (2024)

Dit bericht maakt deel uit van een reeks meerdere berichten:

1. Lean Asp.net Core 2.1 Set een scheerpagina's Project handmatig met bootstrap, NPM en webpack
2. Lean Asp.net Core 2.1-ADD Een react-toepassing op een bestaande scheerpagina's-applicatie
3. Lean ASP Net Core 2.1-React-formulier, validatie en web API-integratie (dit bericht)

Toepassingen Opmerkingen

IVorige post, we hebben een heel kleine klantpagina toegevoegdReageerapp met een bestaandeASP.NET CORE Scheermespagina'sSollicitatie.In dit bericht breiden we de React -app uit met een vorm en bouwen we een kleine backend -API.Het eindresultaat is een notitietoepassing waarmee u notities kunt toevoegen en verwijderen.Het toont een effectieve manier om formulieren en validatie te maken met react-asp.net kernstapel waarbij ons hoofddoel is om de validatielogica van de server te gebruiken, zodat we die logica niet twee keer hoeven te coderen.

U kunt de broncode voor dit bericht vindenhttps://github.com/martijnboland/LeanAspNetCore-React.De servercode is C# en de clientcode is TypeScript.

Back-end API

Voor ons voorbeeld hebben we alleen een zeer eenvoudige back-end API nodig die notities kan vermelden, toevoegen en verwijderen.Dit is de Web API -controllercode (/Api/notes/NotesController.cs):

[Route ("API/Notes")] Public Class Notescontor: Controller {Private NotesStore _NotessStore;Public notescontor (NotessStore NotessStore) {_NotessStore = notesStore;} [Httpget] public iaction resultaat get () {waren notes = _notessTore.getall ().Return ok (notities);} [HttpPost] public iaction resultaat add ([from body] note) {if (ModelState.isValid) {note = _notessTore.Addnote (note);Return gemaakt ($ "API/NOTAALS/{NOTICE.ID}", noot);} Return badrequest (ModelState);} [HttpDelete ("{noteId}")] public iactionResult Remove (String NoteId) {_NotessStore.Removenote (noteId);retourneer nocontent ();}}

Niets bijzonders hier, alleen een standaard ASP.NET Web API -controller.De methode toevoegen voert validatie uit via data -opmerkingen op de klasse -klasse (/Api/notes/note.cs):

Public class note {public String id {get;set;} [Vereist (ErrorMessage = "Titel vereist")] [Minlentth (3, ErrorMessage = "De titel moet bestaan ​​uit ten minste 3 tekens")] [MaxLength (100, Fouorsessage = "De titel mag niet hoger zijn dan 100 tekens")] Openbare strikte titel {geit;set;} [Vereist (ErrorMessage = "Content is vereist")] [MaxLength (1000, FoulingSessage = "De inhoud mag niet hoger zijn dan 1000 tekens")] Public String Content {get;set;} public DateTime gemaakt op {get;set;}}

Wanneer een validatiefout optreedt, retourneert de toevoegingsmethode een BadRequest -actieresultaat met de ongeldige ModelState als gegevens.Dit is een veel voorkomend patroon in veel ASP.NET Web-API-applicaties.

React-frontend

We maken een React -app die notities aan de rechterkant van het scherm vermeldt en hebben een formulier om nieuwe notities aan de linkerkant te maken.De onderstaande afbeelding laat zien hoe de app bestaat uit individuele reactcomponenten:

In een typische manier van reactie heeft deze app "slimme" en "domme" componenten.De opmerkingencomponent op het hoogste niveau is de slimme component die de gebruikersinterface verbindt met de API.De andere componenten zijn stateless functionele componenten die gegevens ontvangen via hun rekwisieten en evenementenbeheer aan hun ouders delegeren.

In dit bericht zullen we ons concentreren op de linkerkant van de app, de vorm.

Reageren en vormen

Om eerlijk te zijn, kan vorm en reageren behoorlijk gecompliceerd zijn.Als je volgtFormrichtlijnen in de officiële documentatie, u eindigt met een enorme hoeveelheid boilerplate -code, alleen om waarden over te dragen van en naar de ingangselementen.Gelukkig, zoals bij alle reageren, zijn er minstens twee bibliotheken die het grootste deel van de code verwijderen.Myris een populaire bibliotheek, maar we gebruikenReact-finale vormdat is even krachtig.Deze bibliotheken behandelen de houding en om invoerwaarden te krijgen, maar hebben ook haken voor validatie, vuilbediening en nog veel meer.

Dus, hoe ziet het eruit, een type script reageert vorm met react-finale-vormcomponenten (/ClientApp/js/react-notes/noteForm.TSX)?

import * als reageren uit 'react'; import {form, field} uit 'react-final-form'; import {textinput} van '../componenten/textinput';import {textarea} van' ../componenten/textarea'; import {note} van' ./models'interface NotiveFrops {handlesave: (Opmerking: notitie) => belofte} const NoteForm: react.sfc= (Benodigdheden) => {return (
{ opbrengst (
handlesubmit (e). then (res => {if) (! res) {form.reset ();}})}> {submiterror &&
{{submIterror}
}  
 Noot maken 
 
)}}/>);}; exporteer standaardnotformulier;

De vorm- en veldcomponenten komen uit de bibliotheek van de react-finale-vorm en zijn in principe betrekking op uw eigen componenten of standaard JSX-elementen.Form heeft er eenRender propDat biedt alle mogelijke functies om met formulieren te werken.De veldcomponent heeft een kenmerk "component" waarbij we onze eigen textine- en tekstgebiedcomponenten gebruiken.Dit zijn standaardinvoer- en tekstgebiedselementen gewikkeld in sommige bootstrap -lay -outelementen (/Clientapp/js/componenten/textinput.tx):

import * als reageren uit 'react'; import * als classnamen uit 'classNames'; export const textInput: react.sfc= ({invoer, meta, label, type, ... rest}) => {const inputType = typ ||'tekst';opbrengst (
{etiket &&{etiket}}{(meta.error || meta.submiterror) && meta.touched &&
{meta.error ||meta.submiterror}
}
);}

Bij gebruik als component in een veldcomponent, ontvangen onze eigen componenten (zoals textinput hierboven) gratis extra formuliergerelateerde rekwisieten (invoer, meta).

Na het verzenden van het formulier wordt de methode onSubmit () genoemd voor de vormcomponent met een object dat de vormwaarden bevat.In ons geval is dit in lijn met een object vanOpmerkingtype.De methode on -submit () delegeert de methode -aanroep naar de handlesave () -methode in het props -object.

Wat voor ons interessant is, is dat de methode Handlesave () een belofte retourneert.Wanneer die belofte oplost met een object, gaat de react-finale vorm ervan uit dat het een foutobject is met de veldnamen als eigenschapsnaam en eigenschapswaarden de foutmeldingen zijn.Deze zijn vervolgens beschikbaar via meta.submiterror -eigenschappen in de veldcomponenten (zoals weergegeven in de bovenstaande TextInput -voorbeelden).Zie dit ookCodes en box exempelOm te zien hoe react-finale formulier kan omgaan met indieningsfouten.

Validatiefouten beheren

Dus we hebben nu een API die een object met fout retourneert wanneer validatie misluktEnWe hebben een formulier dat fouten kan tonen wanneer het formulier is ingediend.Het enige dat we hoeven te doen is deze twee aan elkaar lijmen.Laten we eens kijken naar de foutrespons van onze API:

{"Title": ["De titel moet bestaan ​​uit ten minste 3 tekens"], "Content": ["Content is vereist"]}

Bijna perfect.In het geval van een fout retourneert de API een JSON -object met formulierveldnamen als eigenschapsnaam en een set foutmeldingen per eigenschap.Het enige probleem is dat het formulier een enkele foutmelding per veld verwacht.Daarom moeten we het JSON -object van de API converteren naar:

{"Titel": "De kop moet bestaan ​​uit minstens 3 tekens", "Content": "Inhoud is vereist"}

Roept API aan en retourneert validatiefouten

Onze logica die omgaat met het toevoegen van een nieuwe noot staat op het hoogste niveauOPMERKINGEN COMPONENT.CreateNote () -De functie roept de API-functie addNote () aan en regelt het resultaat.Als het resultaat OK is, wordt de lijst bijgewerkt met notities, anders wordt de fouteneigenschap voor het resultaat geretourneerd als gevolg van de belofte:

createNote = (niet: noot): belofte=> {return addNote (note). then (res => {if (res.ok) {this.loadnotes ();} else {return res.errors;}});};};

De daadwerkelijke oproep van de API vindt plaats in de addnote -functie (/ClientApp/js/react-notes/api.ts) metAxioshttp Bibliotek:

Axios import uit 'Axios';Import {handleapisuccess, handleapierror, iapiresult} van '../shared/api';Import {Note} uit './models'; const notesapiurl = '/api/notes';=> {return axios.post (notesapiurl, noot). dan (handleapisuccess) .catch (handleapierror);} ...

Kortom, Axios maakt een post-herstel met het OPMERKING-object als gegevens voor '/API/Notes' URL om een ​​nieuwe notitie te maken.Het resultaat wordt vervolgens op een generieke manier behandeld met de functies handleapisuccession en handeapierror (gevonden in/ClientApp/js/shared/api.ts).Hier vindt de mogelijke transformatie van het .NET Web API -foutobject naar het foutobject plaats:

Import {axiosResponse, axioserror} uit 'axios';Import {form_error} uit 'definitieve vorm';Exporteren interface iapiresult {ok: boolean, bericht?: String, fout?: Net, gegevens ?: Any} export const handleapisuccess = (antwoord: axiosResponse): iPiresult => {return {ok: true, data: response.data}} }}} Const handLeapierror = (err: axiSerror): iapiresult => {// Wanneer de foutcode 400 is en de responsorgaan eigenschappen bevat, retourneert u items met fouten, registreer en gooi anders als (err.response && err.response .Status == 400 && erer.response.data) {Console.log ('API heeft 400 fouten geretourneerd met gegevens, retourneert gegevens voor foutweergave');const data = err.response.data;Const resultaat: iapiresult = {ok: false, error: {}};// Convert FelArray naar String voor het resultaat if (type gegevens! = 'String') {voor (laat prop in gegevens) {if (data.hasownProperty (prop) {if (prop === '') {resultaten. Error [form_error] = data [prop] .ToString ();} else {result.error [prop] = data [prop] .ToString ();}}}}} {result.Message = String (data);} Retourresultaten ;} Andere {console.log (err); fouten gooien;}};

Houd er rekening mee dat er een speciaal geval is wanneer de eigenschapsnaam voor een fout een lege tekenreeks is.In scenario's aan de serverzijde verschijnen deze fouten meestal als een generieke formulier-globale fout.Hier gaat het naar een speciale form_error -eigenschap voor het foutobject.Op deze manier behandelt React definitieve vorm het als een formulier globale fout en we kunnen er toegang toe krijgen via de submitterror die prop voor de formuliercomponent weergeeft.

Dus wat hebben we echt gemaakt met dit voorbeeld?

Twee dingen:

1. Een effectieve manier om vormen te maken in React in combinatie met ASP.NET Core Web API;
2. Een manier om te valideren op een enkele plaats op de server die mooi integreert met de gebruikersinterface van React.

Controleer de code ophttps://github.com/martijnboland/LeanAspNetCore-React/En speel ermee als je wilt.Dit is waarschijnlijk een van de berichten waar de code zelf meer zegt dan de post zelf :-).

Laat gewoon een reactie achter over dingen zijn onduidelijk of wanneer u opmerkingen heeft.

Lean ASP Net Core 2.1-React-formulier, validatie en web API-integratie