Hjælp til indtasningsvindue/indtastnignsboks

Tags:    html javascript

Hejsa

Jeg er ved at lave en side hvor man skal kunne indtaste nogle oplysninger omkring ens ansættelse.
Selve det at lave siden så det kan komme ind i databasen er jeg ikke så usikker på, men nu kommer udfordringen for mig som jeg ønsker hjælp til.

Når man har indtastet disse oplysninger og trykker "Gem" skal disse vises på siden, sammen med to links i bunden.
Et til "Rediger" og et til "Slet".

Hvordan laver jeg bedst muligheden for at "fjerne" det indsatte og "erstatte" det med et redigerings-"vindue" hvor jeg kan redigere de indtastede oplysninger?

Har selv haft i tankerne at jeg via JSON og AJAX henter alle ansættelser med data, gemmer dem som data i en data-attribute på et element, og præsenterer på siden via jQuery.
Hver ansættelse vil få en omkringliggende div med et id svarende til id'et på ansættelsen.
Når der så trykkes rediger skal denne div slettes, opbygge en ny boks med data fra data-attribute som man kan rette i.
Ved gem vil jQuery sende JSON data til backenden og opdatere den (kunne også være oprette), og fjerne indtastningsboksen og opbygge en ny div med id'et der kommer tilbage fra serveren med de tilhørende oplysninger.

Er det en god/dårlig, svær/let løsning? En nemmere måde at gøre det på?
Og hvad med min data-attribute - den skal også opdateres igen. Skal den "blot" erstattes en ny komplet, eller skal man forsøge at rette den nye rettelse ind i den eksisterende?

P.S. Det hele er lavet i ASP.NET MVC4 så formoder jeg skal have gang i noget jQuery for at kunne lave siden dynamisk? Eller kan det laves via URL & actions i MVC? Altså nogle POST's som gør noget?



3 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma
Sorter efter stemmer Sorter efter dato
Jeg ville rendere siden med indtastningsformularen skjult, og så ved klik på en edit knap, hente data med et ajax kald, udfylde formularen og erstatte det du vil med den udfyldte formular.

Hvorfor? Fordi det er det jeg kan finde ud af ;)

En anden og hurtigere måde, ville være at lave en htmlhelper extension, som kan opbygge formularen til dig udfra en model. Denne formular bliver så gemt i edit knappen, og med minimal javascript fra din side af, bliver den udfyldte formular vist. Har ikke selv lavet det, men har set det i brug og det fungerer fornuftigt. Det burde være til at kunne finde nogle guides på nettet.

Sidst nævnte øger mængden af data der bliver sendt i første omgang gevaldigt, men reducerer antallet af ajax kald.

Til sidst for at gemme/opdatere ville jeg kalde en controller (evt WebAPI) med formen. Laver du din formular rigtigt, skulle controlleren gerne selv være i stand til at oversætte det indsendte til et objekt.

Der findes dog et utal af variationer for hvordan du kan lave det og ingen er mere eller mindre korrekte... du kan evt. også serialisere dine data og lægge dem ind i hvert edit link/knap.



Det ser ud til jeg må til at læse op på htmlhelper og webAPI for ingen af de to har jeg læst eller lært om (endnu) og har udskudt det for at lære de andre ting dybere nu jeg i gang med det og så tage de andre når det første sad fast og så lære det mere som behovet kom for at kunne mere og skulle lære mere.



Du behøver altså hverken bruge htmlhelper eller WebAPI til at løse din problemstilling... det var blot et andet forslag :)

Du kan umiddelbart sagtens gøre som du selv beskriver.



t