Usando Ajax.BeginForm con varios submit en ASP.NET MVC



Objetivo

Como utilizar el método "Ajax.BeginForm" con varios botones del tipo "input type="submit"".

Mejorar la comprensión

La siguiente captura de pantalla se ha superpuesto con código para mejorar la comprensión, hay dos botones "input type="submit"", un "Ajax.BeginForm" y un resultado que se muestra en "span_resultado".

Monografias.com

Monografias.com

Funcionalmente

Dependiendo del botón seleccionado la aplicación sumará o restará dos números y mostrará su resultado, razón por la cual es necesario trasmitir al "Action Method" del "Controller", que tipo de operación aritmética debe realizar y los valores de los operandos.

Model

ASP.Net MVC propone hacer el desarrollo iniciando por el modelo, pero ¿modelo de qué?, el de la vista o en otras palabras la representación en objetos de la Figura 1. Así que para desarrollar el modelo tendríamos que imaginarnos la vista ya que esta aún no existe, estamos refiriéndonos a la vista y al modelo que forman parte del patrón MVC (Model View Controller).

Las siguientes figuras nos muestran el código del modelo que utilizaremos.

Monografias.com

Monografias.com

Controller

El siguiente código pertenece al controller llamado "OperadorAjaxController". El método o "Action Method" llamado "Operar", recibe como parámetro la representación en objetos de la view o en otras palabras un objeto del tipo "Operacion" el mismo posee toda la información necesaria para indicarle el tipo de operación, pudiendo ser esta una suma o una resta.

Monografias.com

Otro punto a notar es que el método "Operar" retorna una "PartialView" en lugar de una "View" ya que si retornásemos una "View" se enviarían al navegador cliente también los scripts, duplicándolos y generando varios llamados al método "Operar" cuando debería llamarse solo una vez por cada clic realizado sobre el botón.

Monografias.com

View

El "Ajax.BeginForm" le envía al "Action Method" "Operar" del controlador un objeto del tipo "Operacion", la forma en la que este envió se realiza es transparente al desarrollador, ahorrándonos de esta manera, la serializacion y deserialización del mismo.

AL llegar la respuesta con el resultado de la operación realizada en el lado servidor por el controlador, esta es mostrada dentro de un elemento "span", llamado "span_resultado".

Lo importante es que la propiedad "name" de cada uno de los elementos "input" coincida con el nombre de la propiedad "TipoDeOperacion" de la clase del "Operacion", de esta forma la propiedad "value" del elemento html será el valor que se le establezca a esta propiedad de la clase al hacer clic sobre el botón y de este modo el "Action Method" "Operar" sabe que operación algebraica debe realizar.

Monografias.com

Monografias.com

El código del archivo "Index.cshtml" termina convirtiéndose y cargándose en el explorador cliente como sigue, podemos observar como cada elemento html se vincula con su propiedad homóloga de la clase "Operacion" por el valor de su atributo "name".

Monografias.com

Solo retornaremos un número entero

Observemos que en definitiva el action method "Operar" está retornando solo el valor del resultado de la suma o de la resta, en otras palabras un número entero, entonces ¿Por qué complicarnos con la PartialView "Operar.cshtml"?, modifiquemos "Operar" para que retorne un número entero y listo, quedándonos el código como sigue:

Monografias.com

El siguiente cuadro podemos comparar el código que retorna una "PartialView" contra el que retorna un "int"

Monografias.com

Modificando el ejemplo anterior

Supongamos que tenemos que modificar el código anterior para mostrar un signo de "+" o de "-" dependiendo de que botón escogió el usuario, entonces hay que agregar otro elemento html "span" para poder mostrar el signo de la operación, tal como se muestra en las capturas de pantalla siguientes.

Monografias.com

El modelo es el mismo así que no sufrirá cambio alguno, si tenemos que modificar la vista y el controlador, en la vista agregaremos un span llamado "span_tipo_de_operacion" para mostrar el signo allí y desde un "Action Method" del "Controller" retornaremos un objeto del tipo "Operacion".

Estos cambios se mostraran en los siguientes apartados.

La modificación no tendrá impacto en el modelo ya que la propiedad "Operacion.TipoDeOperacion" ya existía antes de la modificación solicitada, así que el modelo será el mismo que en el caso anterior.

El método "Operar" retornara un objeto del tipo "Operación" completo a la vista este es serializado en formato "Json".

Monografias.com

Luego de llamarse al Action Method "Operar" del controller, el método "Ajax.BeginForm" llamará a la función javascript "fnOnSuccess" la cual será la responsable de mostrar el signo y el resultado en los elementos html span "span_tipo_de_operacion" y "span_resultado" respectivamente.

Monografias.com

Monografias.com

Conclusión

Se ha escrito el Action Method, "Operar" de tres formas distintas para satisfacer diferentes requerimientos lo cual muestra su versatilidad. Dependiendo de cómo se utilice esto es una fortaleza pero también una debilidad, ya que un Action Method puede retornar casi cualquier cosa como ser código HTML, JavaScript, un entero o un objeto del modelo, esto hace que no quede clara ni homogénea la arquitectura de la aplicación, en otras palabras si el Action Method debe comportarse como un método que retorna una vista o como un servicio web independiente de la presentación.

Artículos

Un excelente artículo que expone la versatilidad y la confusión en los "Action Method" titulado justamente "What are ActionResults?" (¿Qué es un ActionResult?) lo podrán encontrar en el siguiente enlace.

"What are ActionResults?"

https://www.exceptionnotfound.net/asp-net-mvc-demystified-actionresults/

Referencias

Fecha primera edición:

12 de diciembre del 2016

   

 

 

 

Autor:

Horacio Aldo Tore