Lab 03: Creando un simple modelo usando MVC

En este laboratorio crearemos un simple modelo personalizado, esto con algunos
datos y mostrarlo en la vista.

Paso 01: Creamos un simple archivo de clase

el primer paso es crear un simple modelo personalizado el cual esta en blanco con
tres propiedades: code, name, y amount. Crear un simple Proyecto MVC y hacer
click en la carpeta model y clic en Add New Item y seleccionar clase y asignarle el
nombre Curstomer.

Paso 02: Definimos un controlador con acción

el primer paso es crear un controlador y agregar una simple acción que muestre el
Customer.

Importar el namespaces del modelo en la clase controlador, creamos un objeto de
la clase Customer con algunos datos y lo pasamos a la vista llamado
“DisplayCustomer”.

Ing. Victor Huertas Honores

Hace clic derecho en el método DisplayCustomer dentro del controlador(Con realizado en el primer laboratorio). Necesitamos ahora unir los puntos de MVC. mediante la creación de vistas. Victor Huertas Honores .Paso 03: Creamos una vista fuertemente tipada usando la clase. Nota: Previamente es necesario que se compile el proyecto Ing.

” como se muestra: Abajo esta el codigo de la vista(sintaxis Razor) el cual muestra los valores de las propiedades del cliente.la ventaja de crear una vista fuertemente tipada es que se pueden obtener las propiedades de las clases en la vista pero digitando model y “. También podemos asignar una condición IF que muestre Ing. Victor Huertas Honores .

Victor Huertas Honores . En este laboratorio crearemos una simple entrada de datos para nuestro cliente como se muestra: Ing.los clientes como un cliente privilegiado si la cantidad está por arriba de 100 y un cliente normal si esta por debajo de 100. Lab 04: Creando un simple formulario de entrada de datos MVC Cada proyecto pequeño o grande necesita un formulario de entrada de datos. Paso 04: Ejecuta la aplicación Ahora para ejecutar la aplicación presiona Ctrl+F5.

Tan pronto como el usuario final ingrese los detalles y envíe los datos estos serán direccionados a la siguiente ventana como muestra abajo: Paso 01: Creando la Página de entrada de datos el primer paso para crear una entrada de datos es usar las etiquetas form de HTML como se muestra en el código de abajo. Lo mas importante a notar es que la accion del boton es apuntada al método del controlador llamado “DisplayCustomer”. Victor Huertas Honores . Para ayudarnos de Visual Studio y como ya sabemos toda pagina esta relacionada a una accion del controlador en el controlador Customer vamos a crear el metodo FillCustomer. Ing.

Después siguiendo los pasos anteriores de como crear una vista(Click derecho y Add View) creamos la vista FillCustomer. Paso 02: Creando el controlador Arriba definimos la acción del formulario hacia el controlador a la función DisplayCustomer Ing. Victor Huertas Honores .

llena el objeto customer con los datos de la colección Request.Form y envía los objetos a la vista DisplayCustomer. llena el objeto y enviar el objeto a la vista. Paso 03: Creando la vista para mostrar el objeto customer El siguiente paso es crear la vista DisplayCustomer. Ing. seleccionado la opción vista fuertemente tipada( realizada en los pasos anteriores). Debajo el código de DisplayCustomer. Victor Huertas Honores .Necesitamos obtener los datos de los controles HTML(form).

Ing. Y al hacer clic ek en botón enviar muestra la vista DisplayCustomer.Paso 04: Finalmente ejecutar el proyecto Presionando las teclas CTRL + F5 ejecutamos el proyecto. Victor Huertas Honores .

Label. mucho del código manual fue también escrito en el controlador para llenar los objetos y enviarlo a la vista. Paso 02: Creando la entrada de formulario HTML usando clases Razor Las clases Razor tienen funciones el cual te permite crear controles HTML con facilidad enviar a la vista y ver el intellisense de las clases Razor. En orden para crear una etiqueta forma para HTML necesitamos usar “Html. Victor Huertas Honores . Usando Razor puedes crear cualquier control HTML como TextBox . ListBox.  Agregado a esto.Lab 05: Usando Razor para crear vistas rápidamente En nuestros laboratorios anteriores creamos un simple formulario de entrada de datos para customer completamos el laboratorio de forma satisfactoria pero hubieron dos problemas:  Los Código HTML fueron escritos manualmente.BeginForm” Ing. Paso 01: Creando la clase Customer Para crear la clase Customer ir al laboratorio 03. esto es como escribir codigo HTML usando el notepad. En este laboratorio veremos como usar clases razor para minimizar el código manual e incrementar la productividad. En pocas palabras esto fue poco productivo.

Vamos a crear el formulario de entradas de datos: Paso 03: Creando una vista Fuertemente tipada Para crear el formulario con Razor es necesario que la vista se haya creado con la opcion vista fuertemente tipada como se realizo en el laboratorio 03. Con esto ya podemos crear nuestro formulario en la vista FillCustomer. Ing. el nombre del controlador y el método HTTP(GET. Victor Huertas Honores . POST).El código de arriba genera el siguiente codigo HTML: El razor HTML “BeginForm” toma tres parámetros nombre de la acción. Pero si no se hizo esto en la parte superio de la vista agregamos lo siguiente y hacer la vista fuertemente tipada.

y al final ejecutar y mostrará los datos Ing. el objeto customer va ser autollenado por nuestras clase razor. Victor Huertas Honores .Paso 04: Creando el controlador La parte final es el codigo del controlador(Customer). el codigo del controlador ahora es mas simple.

Muy bien. Ing.NET MVC. ahora vamos por unas por unas cheliñas para celebrar el cumplimiento de nuestro primer dia con ASP. Victor Huertas Honores .