ASP.NET MVC Navigation und User Interface Design

Question

Kurzfassung:

---

Kennen Sie irgendeine Weise eine Eingabe-Taste (abschicken) und einen Anker-Tag zu bekommen die gleiche visuell mit Hilfe von CSS zu machen und kein Javascript?

Long Version:

---

Ich bin eine ASP.NET MVC-Anwendung zu entwickeln. Die Website enthält Seiten zum Anzeigen der Details von oder zum Erstellen oder Aktualisieren meiner Modelle. Die Seite Aktionen werden am Ende des Formulars enthalten und umfassen typischerweise aktualisieren und Abbrechen oder bearbeiten, und Liste löschen (wenn auf einer Detailseite anzuzeigen). Die aktualisieren, bearbeiten und Löschen Aktionen Daten aus einem Formular an den Server senden, während die und Liste Aktionen Abbrechen werden/können durch entsprechende GET-Anfragen bearbeitet werden. Es ist wichtig zu beachten, dass eines meiner Designziele darin besteht, die Website so funktionstüchtig wie möglich zu machen, wenn Javascript so deaktiviert ist, wie es bei aktiviertem Javascript funktioniert. Ich möchte auch, dass die UI-Elemente visuell dasselbe rendern, ob das Element ein Postback verursacht oder eine GET-Anforderung auslöst.

Um die Formulareinreichungen in Abwesenheit von Javascript funktionieren zu lassen, denke ich, dass ich Submit-Buttons verwenden muss. Ich überschreibe mit CSS die visuelle Gestaltung der Schaltflächen, die ähnlich wie die "Schaltflächen" auf der Oberseite der SO-Seite gerendert werden - flach, einfarbig mit reinem Text. Ich möchte, dass die Aktionen, die GET-Anforderungen generieren, mit Anchor-Tags behandelt werden, aber ich hatte Probleme, diese Tags und die gestylten Schaltflächen identisch zu rendern. Es scheint Probleme mit Ausrichtung und Schriftgröße zu geben. Ich konnte sie schließen, aber nicht identisch.

EDIT: Styling Unterschiede Buttons und Dübel, die in der gleichen Position relativ zur Basislinie innerhalb des Begrenzungskastens und immer der Begrenzungsrahmen selbst in der gleichen Größe zu machen, nicht in der Lage die Schriften zu kennen zu machen und Ausrichtung relativ zum Container. Abgesehen von meinen Verbesserungen waren die Dinge nur ein paar Pixel entfernt. Wenn Sie es zur Arbeit gebracht haben, lassen Sie es mich wissen. Zu wissen, dass es möglich ist, würde es einfacher machen, Dinge auszuprobieren, bis ich es zur Arbeit bringen könnte.

Eine Sache, die ich versuchte, bestand darin, die GET-Aktionen um eine Schaltfläche zu wickeln, die wie die Form-Schaltflächen gestaltet war. Das funktionierte großartig in Firefox, aber nicht in IE7. Wenn Sie in IE7 auf eine solche Schaltfläche klicken, wird der Klick nicht zum Anker weitergeleitet. Ich habe jetzt ein neues Formular für das GET erstellt, das method = "GET" verwendet und mit der erforderlichen Aktion verknüpft ist. Ich umgebe das um eine Übermittlungsschaltfläche, die über einen onclick-Handler verfügt, der location.href auf die URL der gewünschten Aktion setzt. Dies macht visuell dasselbe und scheint zu funktionieren, selbst wenn das Formular in einer anderen Form verschachtelt ist. Eine kleine Niggle ist, dass, wenn Javascript deaktiviert ist, meine GET-URL am Ende eine ? enthält, anstatt die nette saubere URL zu sein, die Sie wünschen würden.

Was ich gerne wissen würde ist, ob jemand anders dies auf eine andere Weise gelöst hat, die besser funktionieren würde (und vielleicht weniger HTML benötigt)? Hast du noch andere Ideen, die ich ausprobieren könnte?Gibt es eine Möglichkeit, die ? auf der GET-URL zu beheben, wenn die Anfrage als Post gesendet wird, wenn Javascript deaktiviert ist?

Beispielcode unten in einer Detailansicht. Ich weiß, dass ich die Onclick-Handler auch über Javascript hinzufügen könnte (und wohl auch sollte), aber der Code liest sich besser, wenn ich es inline mache. Ich verwende HtmlHelper-Erweiterungen, um alle Markierungen darunter zu generieren. Ich habe es neu formatiert, um die Lesbarkeit zu verbessern.

<form action="../Edit/2" class="inline-form" method="get"> 
     <input class="button" 
       onclick="location.href='../Edit/2';return false;" 
       value="Edit" 
       type="submit" /> 
    </form> 
    <form action="../Delete/2" class="inline-form" method="post"> 
     <input class="button" 
       value="Delete" 
       type="submit" /> 
    </form> 
    <form action="../List" class="inline-form" method="get"> 
     <input class="button" 
       onclick="location.href='../List';return false;" 
       value="List Donors" 
       type="submit" /> 
    </form> 

Answer 1

Sie sollten this article über die Gestaltung der Schaltfläche Tag überprüfen. Es enthält CSS sowohl für das Rendern von Tags als auch für Tags und hat den Nebeneffekt, auch Symbole in der Schaltfläche zuzulassen.