2011-05-12 13 views
5

Así que planeo crear una página compleja con muchos elementos de UI animables. Quiero encontrar una manera limpia de mantener el estado (expandido/contraído, resaltado, etc.) de estos elementos de UI animables. Tengo algunas ideas, pero solo quiero saber si alguien sabía algo de framework js que hace esto para no reinventar la rueda.¿Cómo mantener el estado del elemento de la interfaz de usuario en la postback? (ASP.NET MVC)

EDITAR

Mi idea hasta ahora es:

1) El formulario de envío, obtener el estado de cada elemento de la interfaz de usuario y añadirlo a datos POST. Estoy pensando en marcar todos los elementos de la interfaz de usuario que quiero rastrear el estado con una clase CSS especial (un tipo de registro para rastrear) y que cada uno soporte alguna devolución de llamada que me permita obtener su estado de forma polimórfica (cada elemento de UI tiene su propia comprensión del estado, por ejemplo, expandido, índice seleccionado, resaltado, etc.)

2) Crear HtmlHelpers para mis elementos de IU que pueden reconocer la información de estado enviada por el cliente y mostrar el html del elemento UI en el estado correcto (I prefiera que el estado se establezca en el lado del servidor en lugar de tener js apareciendo por todos lados tratando de restaurar el estado en el lado del cliente ... ¿verdad?)

3) No sea tan complejo o saturado como WebControls o ViewState

¿Hay un marco que hace cosas así y lo hace mucho mejor y si no es así, mi marco de trabajo propuesto parece una buena idea?

+0

¿Cuál es el alcance de cuánto tiempo planea mantener el estado? ¿Por sección? – ataddeini

+0

Inicialmente por sesión. Pero si construyo este derecho, estoy seguro de que puedo almacenar el estado en una base de datos si así lo deseo y hacer que mi "lógica de gestión de estado personalizada" funcione con eso. Voy a actualizar mi pregunta con más detalles pronto – enamrik

+0

No tengo conocimiento de nada que pueda proporcionarlo de esta forma. Acabo de hacer una búsqueda rápida de los repositorios en Github, pero nada saltó sobre mí (tal vez vale la pena echar un vistazo más completo allí, así como Codeplex). Dicho esto, su enfoque parece uno bueno. HtmlHelpers es el camino a seguir, creo. – ataddeini

Respuesta

2

supongo KnockoutJS podría ayudarle, ya que se puede consolidar toda la lógica de gestión de datos/estado en él y luego persistir la manera que te gusta, es decir, usando la función .toJSON() y enviarlo al servidor.

¿Y quizás pueda integrarlo con la solución localStorage de @ Schwarty?

+0

¡Me gusta la idea de combinación de KnockoutJS/localStorage! –

+0

Gracias por su sugerencia. KnockoutJS se ve increíble. Pero eso es enlace de datos con elementos html. Estaba hablando de mantener el estado de los componentes de UI (p.acordeón, div flotante) que tienen muchos elementos html dentro de ellos. Su estado solo está disponible a través de su objeto de biblioteca js. – enamrik

+0

@enamrik ¿Ha mirado esto: http://knockoutjs.com/documentation/style-binding.html y http://knockoutjs.com/documentation/css-binding.html? Podría vincular, por ejemplo, la clase ui-state-active o los atributos de estilo superior e izquierdo a un modelo de vista. –

1

He hecho algo similar a esto en el pasado y he usado un plugin de cookies jQuery. Esta podría ser una opción viable, solo depende de cuánto tiempo necesite mantener el estado y si puede confiar en que los usuarios tengan habilitadas las cookies.

http://plugins.jquery.com/project/Cookie

0

Usted podría utilizar localStorage si el agente de usuario soporta (la mayoría lo hacen) y caen de nuevo a las galletas o incluso la sesión si no lo hacen (suponiendo que su alcance está bien con el estado de la interfaz de usuario de un usuario se salvan a nivel de máquina individual en lugar de mantener ese estado en múltiples usos de dispositivos). Tengo una publicación sobre cómo puede usar Modernizr en MVC 3 para verificar si hay compatibilidad con localStorage y guardar/recuperar de ella.
Learn how to use Modernizr from the ASP.NET MVC3 Tools Update to store user data via HTML5 localStorage

Cuestiones relacionadas