Bootstrap rendern jede Seite als Registerkarten

Question

Ich habe Admin-Panel mit Bootstrap-Steuerelemente erstellt, lassen Sie uns Beispiel als Produkte-Modul nehmen. Wenn der Benutzer also auf den Menüpunkt "Produkt" klickt, wird die Produktliste geöffnet. Wenn der Benutzer auf Bearbeiten/Details klickt, soll die Produktlistenseite unverändert bleiben, aber die Bearbeitungsseite als neue Registerkarte im selben Fenster geöffnet werden. Ich habe das Bild unten erwähnt, können Sie mir bitte sagen, wie man dies mit Bootsrap erreichen kann? Ich möchte keine Bootstrap-Registerkarten und Bootstrap-Registerkarten mit Ajax verwenden, da ich den Code für die Auflistung und Details auf derselben Seite eingeben muss. Dies führt zu Leistungsproblemen, stattdessen verbleibt der Code auf verschiedenen Seiten, aber nur diesen wird als Registerkarten im selben Fenster angezeigt, und Benutzer können zwischen den Registerkarten wechseln und ihre Aktionen ausführen.

Answer 1

Um eine solche User Experience Sie möchten, auf AJAX oder die neue Fetch API verlassen müssen, andernfalls sollten Sie Anfragen an den Server senden, für Server-Antwort warten und basiert darauf, dass die gewünschte Seite machen.

Das UX, das Sie erreichen möchten, ist ein SPA, eine Einzelseitenanwendung, die auf AJAX-Aufrufen auf dem Server basiert und das DOM basierend auf Benutzeranforderungen und Serverantworten ändert und/oder anzeigt.

Sie können nur eine Seite verwenden und Abschnitte davon mit Navigationsankern # ein- und ausblenden. In jedem Abschnitt werden Daten vom Server abgerufen. Besser als AJAX gibt es die neue Fetch API, die alte XmlHttpRequest verbessert.

Ich empfehle dringend, Daten von einem RestFul API zu holen, auf diese Weise ist jeder Aufruf nur eine URL zu einem API Endpunkt, der JSON formatierte Daten zurückgibt, leicht, sicher, flexibel.