ASP.NET Design-Ansicht - Verschieben von Steuerelementen

Question

Ich habe vor kurzem beschlossen, eine Web-App zu erstellen, um einige Algorithmen zu hosten - ich erstelle sie normalerweise einfach ohne Rücksicht auf die Benutzeroberfläche. Aber diesmal muss ich tief in die Benutzeroberfläche eintauchen. Ich kenne Bootstrap, CSS, ASP.net und habe einen guten Start gemacht.

Ich finde es sehr schwierig, mit asp.net-Steuerelemente in der Entwurfsansicht umzugehen und zu viel Mühe zu haben, einfache Aufgaben wie Verschieben von Steuerelementen zu verschiedenen Bereichen der Webseite zu erreichen. Wenn ich zwei Textfelder habe, zwingt mich die Design-Ansicht übereinander und lässt mich so verwirrt. Wenn ich dann versuche, meinen Bootstrap-Knopf zu bewegen, erzeugt er zufällig Absätze und weigert sich, den Knopf zu bewegen!

Ich bin auf der Suche nach einigen echten aufrichtigen Ratschläge, wie ich mit der Design-Ansicht auf asp.net umgehen würde, wenn Kontrollen bewegt und was die besten Techniken sind. Auch Ratschläge, wie man ein modernes UI, beste Techniken (vielleicht bootstrap Erwähnungen) etc ...

Ich erstelle eine ziemlich einfache Datenanzeige App in asp.net (Visual Studio 2015) - (die meisten der Komplexität des Algorithmus wird hinter den Kulissen sein und nichts mit UI zu tun haben). Umfassende und detaillierte Beratung würde wirklich geschätzt werden. Besonders moderne, gut aussehende Benutzeroberfläche in Bezug auf Datengrids, Textfelder für Benutzereingaben (als Parameter), Dropdowns - Sie kennen die typische Daten-App.

Ich bin mir sicher, dass dies auch für viele andere sehr hilfreich sein wird!

Answer 1

Yeah, als ich Webdesigner, der in der Vergangenheit mit asp.net arbeiten musste, fühle ich vollständig Ihren Schmerz. Es ist nicht einfach, ein modernes Aussehen zu bekommen, weil asp.net kein modernes Werkzeug ist und irgendwie ein eigenes visuelles Vokabular hat.

Das sagte, ich fand, dass ich anständige Ergebnisse erhalten konnte, indem ich so nah an CSS-basierte Lösungen hielt, wie ich nur konnte. Sie können einige dieser Ergebnisse in den folgenden Links finden Sie unter:

http://www.design-experiments.com/ http://www.troyjnorris.com/shoppingcart/

Ich fand, dass ein minimalistischer Ansatz mit den besten Ergebnissen zu kommen, neigt.

Ein guter Prozess zu folgen: - Build, was Sie bauen möchten. - Fügen Sie Container-divs hinzu, um die Auswahl von Elementen in Ihrer Umgebung zu vereinfachen. Dies wird Ihre Fähigkeit, Elemente so zu positionieren, wie Sie möchten, erheblich verbessern. - Verwenden Sie Ihren Browser-Inspektor, um die automatisch generierten Elementnamen auf dem Bildschirm herauszufinden. Gute Selektoren zu bekommen, ist die halbe Miete in CSS. - Rip das Styling, das Sie nicht mögen. Standard-Reset-Stylesheets werden hier nicht ausgeführt. Sie müssen Ihre eigenen erstellen, um alles auf den Elementen, die Sie stylen möchten, auf Null zu setzen, so dass Sie nicht gegen die Out-of-the-Box-Look der Steuerelemente kämpfen. Wiederum müssen Sie sich in einem Webbrowser auf Ihren Inspektor verlassen, um zu sehen, welche Stile alles erbt. - Verwenden Sie Google Fonts, um den visuellen Stil der Seite zu definieren. - Stick auf meist schwarzen oder weißen Hintergründen. - Bootstrap ist hilfreich für ein Responsive Grid, aber es wird nicht viel Sinn machen, die meisten Elemente auf einer Seite zu stylen, da sie dafür nicht gedacht sind. - Wie Sie vielleicht in den obigen Beispielen bemerkt haben, kommt das visuelle Interesse von Elementen, die nichts mit der Struktur und den Einschränkungen von asp.net zu tun haben. So etwas haben, sogar ein Hintergrundbild oder etwas Paralax, so dass es sich anfühlt als würde etwas auf der Seite vor sich gehen.

Hoffe, dass hilft.