Edición de formularios en línea en el lado del cliente

Veo que algunos sitios web utilizan formularios dynamics (no estoy seguro de cómo llamarlos) para editar un grupo de datos. Por ejemplo: hay un grupo de datos como nombre, apellido, ciudad, país.etc. cuando el usuario hace clic en el botón EDITAR, en lugar de hacer una devolución de datos, se abre dinámicamente un formulario, que consta de 2 cuadros de texto + 2 cuadros combinados, y luego, cuando hace clic en el botón Guardar, el formulario de edición desaparece y todas las actualizaciones de datos …

Ahora, sé que lo que ocurre aquí es el uso de Ajax para las llamadas al servidor y un poco de javascript para la manipulación de dominios … Incluso encontré algunos complementos jquery para la edición de cuadros de texto … Sin embargo, no pude encontrar nada para la implementación completa de los campos de formulario. Por lo tanto, lo he implementado en asp.net por jquery ajax calls y dom manipulation manualmente. Aquí está mi proceso:

1) cuando se hace clic en el botón Editar: haga una llamada ajax al servidor para recuperar el archivo de formación necesario.aspx 2) devuelve campos de formulario editables con valores asignados. 3) cuando se haga clic en el botón Guardar: realice una llamada ajax al servidor para recuperar la página formupdateprocess.aspx. básicamente realiza las actualizaciones de la base de datos y luego devuelve el snipplet DOM (…) necesario para insertar la página actual …

bueno, funciona pero MI PROBLEMA, es el rendimiento … El resultado parece más lento que las muestras que veo en otros sitios.: ((

¿Hay algo que no sepa? ¿Una mejor manera de implementar esto?

Mantendría el formulario de edición en el cliente, pero oculto con, por ejemplo, “style =” display: none; “, y luego lo mostraré cuando el usuario haga clic en el botón de edición. Cargar un formulario desde el servidor en este caso es muy costoso en cuanto a rendimiento .

Este es un ejemplo muy básico y no considera posicionar la forma de edición, etc.

       

Esto significa que su página principal tendrá que cargar los valores del campo de edición desde la primera carga, pero muy a menudo es un pequeño precio a pagar, porque el usuario acepta una espera en ese momento, no cuando hace clic en un botón.

He usado jQGrid en el pasado con ASP.NET (MVC no admite GridViews).

http://www.trirand.com/blog/

y demostraciones en http://trirand.com/jqgrid/jqgrid.html (consulte las ediciones de edición de filas).

Solo una idea, pero ¿has visto el complemento Jeditable que te permite editar contenido en línea?

Y aquí hay un tutorial , y el código del tutorial con algunas mejoras .

Así es como se hace si eres como yo que detesta el uso de complementos de vez en cuando.

El HTML:

 

PERSONAL INFORMATION

    EMAIL:
  • email
  • NAME:
  • name
  • TELLPHONE:
  • tel
  • COUNTRY:
  • country
  • CITY:
  • city

Luego el CSS para refrescar las cosas:

  #pesa a{ color: #000; } #pesa a:hover{ color: #; } #pesa a:hover{ text-decoration: none; } h1{ font-size: 30px; padding: 0; margin: 0; } h2{ font-size: 20px; } .editHover{ background-color: #E8F3FF; } .editBox{ width: 326px; min-height: 20px; padding: 10px 15px; background-color: #fff; border: 2px solid #E8F3FF; } #pesa ul{ list-style: none; } #pesa li{ width: 330px; min-height: 20px; padding: 10px 15px; margin: 5px; } li.noPad{ padding: 0; width: 360px; } #pesa form{ width: 100%; } .btnSave, .btnCancel{ padding: 6px 30px 6px 75px; } .block{ float: left; margin: 20px 0; } 

Entonces el JavaScript:

  $(document).ready(function() { var oldText, newText; $(".editable").hover( function() { $(this).addClass("editHover"); }, function() { $(this).removeClass("editHover"); } ); $(".editable").bind("dblclick", replaceHTML); $(".btnSave").live("click", function() { newText = $(this).siblings("form") .children(".editBox") .val().replace(/"/g, """); $(this).parent() .html(newText) .removeClass("noPad") .bind("dblclick", replaceHTML); } ); $(".btnDiscard").live("click", function() { $(this).parent() .html(oldText) .removeClass("noPad") .bind("dblclick", replaceHTML); } ); function replaceHTML() { oldText = $(this).html() .replace(/"/g, """); $(this).addClass("noPad") .html("") .html("
Save changes Discard changes") .unbind('dblclick', replaceHTML); } } );

Por lo tanto, cuando alguien se desplaza sobre los elementos li, se vuelve azul solo un poco de color para que el usuario sepa que puede editar. Cuando hacen doble clic con el evento dblclick , aparece un formulario con el valor del elemento

  • , simplemente verifique el código. Cuando se editan en el formulario y se guardan, el formulario se elimina y se coloca una lista con el nuevo valor htmlvalue . Luego puede usar un método $ajax para enviar las variables al lado del servidor para su procesamiento.