Estructuración de formularios web complejos en ASP.NET MVC

Question

¿Cuál es un buen enfoque en ASP.NET MVC para implementar un formulario complejo donde las secciones del formulario se muestran y ocultan en función de las entradas de un usuario?

Mi experiencia es en formularios web. Con frecuencia me piden que cree formularios donde un usuario selecciona una opción de una lista desplegable, lo que hace que aparezcan un puñado de nuevos campos. Una selección diferente puede causar que aparezca un conjunto diferente de campos.

En el pasado, me gustaría manejar este escenario a través de un UpdatePanel y un contenedor Panel alrededor de los campos que quiero mostrar u ocultar. La validación se desactiva automáticamente cuando los campos están ocultos.

En el futuro, me gustaría hacer uso de la validación del modelo basado en atributos de MVC, pero ¿es posible hacer la validación condicional en los valores de otras propiedades?

Además, ¿cómo puedo manejar el alternar de bloques de campos de formulario? Sé cómo hacerlo manualmente en jQuery, pero espero que haya un enfoque que se vincule con la validación y el código del lado del servidor.

Me gusta MVC mucho mejor en general, pero no he descubierto cómo manejar este tipo de situaciones muy bien. Probablemente solo necesite cambiar mi forma de pensar para que se ajuste mejor con el enfoque MVC.

Answer 1

Josh,

La primera cosa que de sugerir es asegurarse de que utiliza ViewModels de las páginas que son modos complicados. Un ViewModel es básicamente un Modelo que usted crea para una Vista específica; por ejemplo, un ViewModel podría ser una composición de otras clases.

En cuanto a cambiar dinámicamente los campos de su Vista, la mejor manera es usar jQuery (o cualquier otra biblioteca de JavaScript) para hacerlo.

También migré de un entorno de formulario web y sé que es difícil cambiar de rumbo al principio, pero créanme, hacer un manejador de jQuery incluso simple es mucho más simple que tener que colocar un panel de control y luego el evento manejadores.

Sin mencionar que es mucho más eficiente; Después de todo, los paneles de actualización hacen publicaciones parciales en la página, a veces, con jQuery ni siquiera necesitas hacer eso.

Después de algunos proyectos con MVC, en realidad ahora parece mucho tiempo para ir y hacer los paneles Actualizar en los formularios web;)

Espero que esto ayude, -Covo

Answer 2

Los formularios web tradicionales de asp.net hicieron mucho de "magia" para ti, mientras que tienes que ser consciente del trabajo que implica crear la "magia" en asp.net MVC. El beneficio es que con MVC tiene más control sobre lo que está sucediendo, lo que también puede mejorar el rendimiento.

En asp.net webforms se utiliza un UpdatePanel para llamadas ajax. Si necesita llegar al servidor de forma asincrónica (sin hacer una publicación completa), utilice ajax a través de JQuery. Ver más abajo, por ejemplo:

  $.ajax({ 
        type: "get", 
        url: "/YourController/YourAction", 
        success: function (obj) { 
         //any logic you want to do upon success 
        } 
       }); 

el ejemplo anterior se hará una ajax HTTP GET llaman a/YourController/YourAction.

Para manejar "alternar bloques", si no necesita ir al servidor para obtener datos y simplemente desea hacerlo en el cliente, entonces use jquery simple. JQuery tiene una función para alternar elementos. http://api.jquery.com/toggle-event/

Answer 3

Sé que esta podría no ser la respuesta que está buscando, pero personalmente no creo que las formas complejas sean muy fáciles de usar en primer lugar y siempre trato de dividirlas en formas más simples cuando sea posible , o para simplificar la forma. He encontrado muchos formularios en sitios web donde hay una gran cantidad de "campos" donde debería haber realmente algunas preguntas para que el usuario responda. Cosas simples que llegan al punto de lo que quieren lograr en lugar de los valores de campo, junto con una gran cantidad de conocimiento específico de la aplicación necesaria para establecer esos campos a los valores correctos.

Si todavía quiere seguir adelante con un formulario complejo, entonces como las otras respuestas ya han indicado que hay instalaciones proporcionadas por MVC para hacer eso, pero no hay ninguna manera establecida. Por lo tanto, depende de usted averiguar qué funcionará mejor para sus usuarios.

Answer 4

Debido a la forma en que MVC funciona en contraste con Webforms, tiene la responsabilidad de pensar realmente en lo que sucede en el cliente y en el servidor por separado, ya que no se transfieren muchos metadatos a danos esa sensación feliz de Webforms.

Sin embargo, hay una noción al usar las bibliotecas integradas AJAX cuando se procesa un formulario que puede hacer que actualice automáticamente una vez que se publica.En cierto sentido, le está ahorrando el JavaScript/JQuery porque lo "alaba automáticamente" de manera similar a un Panel. De esta manera se podrían tener en cuenta la representación paso a paso en formas complejas desde el servidor, ya que cada sección se edita, etc.

Ver MSDN: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx

El ejemplo de código correspondiente para darle una idea (por desgracia, no es en la sintaxis de Razor más legible):

La línea relevante es Ajax.BeginForm donde se representa la etiqueta del formulario. Una vez que se haya publicado el formulario, la biblioteca MS AJAX actualizará automáticamente el elemento especificado en "UpdateTargetId" especificado en las AjaxOptions del formulario. En este caso, la respuesta se colocará en el elemento SPAN "textEntered" tras la respuesta del servidor. Aquí, se puede hacer progresivamente más contenido al usuario a rellenar, quizá otra forma, etc.

<h2><%= Html.Encode(ViewData["Message"]) %></h2> 
<p> 
    Page Rendered: <%= DateTime.Now.ToLongTimeString() %> 
</p> 
<span id="status">No Status</span> 
<br /> 
<%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %> 
<br /><br /> 
<% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %> 
    <%= Html.TextBox("textBox1","Enter text")%> 
    <input type="submit" value="Submit"/><br /> 
    <span id="textEntered">Nothing Entered</span> 
<% } %>