Erstellen einer dynamischen Eingabe für ein Formular

Ich habe eine Anforderung für mehrere Aufgaben dynamisch als Reaktion auf eine Schaltfläche "Aufgabe hinzufügen" des Benutzers ausgefüllt werden. Ich weiß nicht, wie viele Aufgaben vom Benutzer erstellt werden, und würde es vorziehen, keine maximale Anzahl mit ausgeblendeten Feldern festzulegen, da dies in Bezug auf den Datenbankspeicherplatz ineffizient wäre.Erstellen einer dynamischen Eingabe für ein Formular

Aufgaben können als untergeordnete Elemente für Notizen betrachtet werden und werden in separaten Tabellen gespeichert. Es ist mir gelungen, mehrere Aufgaben in der Ansicht anzuzeigen, aber ich bin weniger zuversichtlich in Bezug auf die Front-End-Entwicklung und bin mir nicht sicher, wie ich ein Eingabefeld hinzufügen kann, ohne ein Post-Back aufzurufen.

<html> 
<div class="container"> 
    <!-- @using(Html.BeginForm()) { --> 
    <div> 
    <label asp-for="Note">Note</label> 
    <input id="Note" /> 
    <span asp-validation-for="Note"></span> 
    <label asp-for="Task">Task</label> 
    <input id="Task" /> 
    <span asp-validation-for="Task"></span> 
    </div> 
    <div> 
    <button type="button">Add Task</button> 
    <input type="submit" value="Save" /> 
    </div> 
    <!-- } --> 
</div> 

</html>

ich habe auch eine kleine jQuery-Funktion, die Aufgabe Eingänge auf dem ‚hinzufügen Aufgabe‘ Button erstellen kann, aber mit wenig Erfolg darin an die Steuerung/Modell verbindet.

Ich habe AJAX mit JSON empfohlen, um diese Anforderung zu erfüllen, aber ich bin mir nicht sicher, wie dies in einer Form implementiert werden kann und wie diese dann vom Controller und letztendlich vom Modell gelesen werden kann?

Ich bin offen für Design-Alternativen, sollte es besser zu meiner Lösung passen.

Quelle

2017-01-06 Remy

Ok, ich werde versuchen, hier den Ansatz, den ich normalerweise für diese Art von Problemen verwende, zu erklären, nachdem ich eine ganze Weile verschiedene Anwendungen entwickelt hatte, die zu meinen Favoriten gehörten.

Zunächst, wenn ich Sie gut verstehe, haben Sie eine Ansicht, wo ein Formular erstellt wird, als Teil einer Client-Interaktion müssen Sie Elemente injizieren, die von der Haupteinheit Ihres Formulars abhängt (normalerweise als eine eins zu viele Beziehung). Ich werde diese "Unterformulare" während dieser Antwort nennen.

Sie müssen:

A) verwalten Client-Interaktion whith die Elemente hinzugefügt/geändert/ersetzt

B) Controller die endgültigen Daten an den Server schicken, damit Daten in die Datenbank beibehalten werden.

Mein Ansatz für diese Art von Situationen ist versuchen, alle Client-Interaktionen im Client zu verwalten, senden endgültige Daten nur am Ende, nachdem Benutzer die Schaltfläche "Speichern" drückt.

Offensichtlich ... ist dies nicht für jede Situation gültig, da manchmal spezifische Anforderungen diese Lösung nicht empfohlen werden können.

Für den Client-Teil:

I den Kern der Form auf eine normale Art und Weise, durch eine Standardansicht, in der Regel stelle ich spezifische Behälter einzuspritzen dort die Informationen der „dinamyc“ Daten aufzubauen.

Auf der Schaltfläche "Aufgabe hinzufügen" füge ich einen Listener hinzu, der den HTML-Code für ein Element des Unterformulars erstellt und an den Container anfügt. Normalerweise enthält dieser Code eine Schaltfläche zum Löschen, um ihn aus dem DOM als Ganzes zu entfernen. Ich habe auch einen Zuhörer, um diese Interaktionen zu verwalten.

Ok ... Sie haben jetzt ein Formular, in dem einige Schaltflächen kleine Codeabschnitte hinzufügen und entfernen können, die einzelne Elemente Ihres Unterformulars darstellen.

Fügen Sie in Ihren Client-Code eine Datenstruktur ein (ich verwende normalerweise ein JSON-Objekt), die eine Liste von Elementen des Unterformulars darstellt.

Wenn Ihre Benutzer trifft die Schaltfläche „Speichern“, erfassen das Ereignis und, bevor die Daten zurück zum Server machen diese zwei Dinge zu senden:

1) Schleife durch Ihre subform Struktur Lesen der Info, dass es in diesem Moment enthält und speichern Sie es in Ihrer Client-Datenstruktur (das JSON-Objekt, das ich zuvor erwähnt habe). Jetzt haben Sie ein JSON-Objekt mit allen Unterformularinformationen.

2) Ordnen Sie es und speichern Sie es in einer versteckten Textkomponente, die innerhalb des Formulars gesendet wird. Alle Ihre "Unterformular" -Felder können sich außerhalb des Formulars befinden, da sie nicht gesendet werden müssen. Die Informationen werden in einer "Klasseninstanz" als JSON-Struktur an den Server zurückgegeben.

Im Server:

Wenn Ihr Controller Ihre Formulardaten empfängt, wird es ein Feld sein, das eine Zeichenfolge speichert, die die ganze Info Ihrer Benutzer durch das „Unterformular“ gesendet.

Jetzt müssen Sie nur diese Informationen erhalten und verwalten, wie Sie möchten. Sie können zum Beispiel eine Klasse entwerfen, um diese Art von Informationen zu laden und sie über Ihre übliche Persistenz-Engine an die Datenbank zu senden.

Denken Sie daran, dass Sie in diesem Paket nicht nur die hinzugefügten Elemente speichern, sondern auch die Elemente, die seit der letzten Bearbeitung geändert wurden, so dass Sie sie wahrscheinlich in der Datenbank suchen und ändern müssen.

Das ist eine ziemliche Textwand, und wahrscheinlich ist es weniger klar, die Idee zu verstehen, als in meinen Gedanken. Frag also, ob du etwas nicht verstehst oder etwas, das nicht klar genug ist.

Quelle

2017-01-11 12:51:21 Bardo

Erstellen einer dynamischen Eingabe für ein Formular

Antwort

Verwandte Themen