ASP.NET MVC navegación y diseño de interfaz de usuario

Question

versión corta:

---

¿Conoce alguna manera de obtener un botón de entrada (enviar) y una etiqueta de ancla para hacer lo mismo usando CSS y visualmente no Javascript?

Versión larga:

---

Estoy desarrollando una aplicación ASP.NET MVC. El sitio contiene páginas para ver los detalles de o para crear o actualizar mis modelos. Las acciones de página se encuentran en la parte inferior de la forma y por lo general incluyen actualización y Cancelar o Editar, Eliminar y Lista (Si en una vista de detalles de la página). La actualización , Editar, y Eliminar acciones POST datos de un formulario al servidor, mientras que el Cancelar y Lista acciones están/pueden ser manejados por peticiones GET apropiadas. Es importante tener en cuenta que uno de mis objetivos de diseño es hacer que el sitio funcione de la forma más idéntica posible si JavaScript está desactivado de la forma en que lo hace cuando Javascript está habilitado. También quiero que los elementos de la interfaz de usuario muestren visualmente lo mismo si el elemento provoca una devolución de datos o dispara una solicitud GET.

Para que los envíos de formularios funcionen en ausencia de Javascript, creo que debo usar los botones de envío. Estoy sobrescribiendo, con CSS, el diseño visual de los botones para que se parezcan mucho a los "botones" en la parte superior de la página SO: plano, de color sólido con texto sin formato. Me gustaría que las acciones que generan solicitudes GET se manejen con etiquetas de anclaje, pero tuve problemas para obtener estas etiquetas y los botones con estilo para renderizar de manera idéntica. Parece haber problemas con la alineación y el tamaño de la fuente. Pude acercarlos pero no ser idénticos.

EDITAR: diferencias de estilo, utilizando botones y anclajes incluía no ser capaz de obtener las fuentes que hacen en la misma posición con respecto a la línea de base dentro del cuadro delimitador y conseguir la caja de contorno en sí para rendir al mismo tamaño y alineación relativa al contenedor. Las cosas estaban a solo unos pocos píxeles de una manera u otra, independientemente de mis ajustes. Si ha podido hacerlo funcionar, hágamelo saber. Sabiendo que es posible, sería más fácil seguir intentándolo hasta que pueda hacerlo funcionar.

Una cosa que probé fue envolver las acciones GET alrededor de un botón, con el estilo de los botones de formulario. Esto funcionó muy bien en Firefox, pero no en IE7. Al hacer clic en dicho botón en IE7, no se volvió a hacer clic en el ancla. Lo que se me ocurrió ahora es crear un nuevo formulario para el GET, usando method = "GET", asociado con la acción requerida. Lo envuelvo alrededor de un botón de enviar que tiene un controlador onclick que establece location.href en la URL de la acción deseada. Esto representa visualmente lo mismo y parece funcionar, incluso si el formulario está anidado en otra forma. Una pequeña pega es que si JavaScript está desactivado, entonces mi url GET contiene un ? al final en lugar de ser la url limpia que desearía.

Lo que me gustaría saber es si alguien más ha resuelto esto de una manera diferente que funcionaría mejor (y tal vez requiera menos HTML)? ¿Tienes alguna otra idea que pueda probar?¿Hay alguna forma de corregir el ? en la URL GET cuando la solicitud se envía como una publicación cuando Javascript está desactivado?

Muestra el código abajo en una vista de detalles. Me doy cuenta de que podría (y posiblemente debería) agregar los manejadores onclick a través de javascript también, pero el código reall se lee mejor cuando lo hago en línea. Estoy usando extensiones HtmlHelper para generar todo el marcado a continuación. Lo he reformateado para mejorar la legibilidad.

<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

Debe retirar this article sobre el estilo del botón de la etiqueta. Incluye CSS para mostrar tanto etiquetas como similares y tiene el efecto secundario de permitir iconos en el botón también.