- Autor
Rafael Liendo
rafael.liendo@eigocorp.com
En el presente artículo presentaré un procedimiento para subir archivos desde el equipo cliente a un sitio web .NET MVC y poder leerlos. Este escenario es muy útil cuando en nuestras aplicaciones necesitamos por ejemplo leer datos desde otros sistemas, bases de datos, etc. que se envían en archivos en formato TXT, CSV o cualquier otro tipo que permita una lectura de los datos contenidos dentro del mismo, para así poder realizar las operaciones respectivas en nuestra aplicación.
Para eso les mostraré el siguiente procedimiento paso a paso:
1. Abrimos Visual Studio
2. Creamos un nuevo proyecto
3. Seleccionamos MVC y seleccionamos "Aceptar"
4. Una vez creado el proyecto procedemos a crear el ActionResult en el controlador "Home" para comenzar el proceso de captura del archivo.
5. Creamos un ActionResult para manejar la vista donde se cargará el archivo
6. Marcarmos el nombre del ActionResult y presionamos el botón derecho del mouse para crear una vista:
7. Colocamos el nombre de la vista y se agrega la misma al proyecto.
8. A la vista recién agregada se le agrega la siguiente estructura de código. Las instrucciones en el bloque rojo sirven para manejar el evento "POST" de la pagina web, con el fin de enviar la información a un método del controlador del tipo [POST]. Las instrucciones en el bloque azul son tres objetos HTML INPUT del tipo "FILE" que se utilizan para cargar archivos. En este escenario se platea manejar 3 objetos INPUT los cuales se pasarán al controlador y se procesarán como un arreglo de objetos.
9. Ahora volvemos al controlador y agregamos un ActionResult Post de la siguiente forma con las instrucciones necesarias para cargar los archivos de imágenes.
10. Para poder ejecutar el ejemplo basado en una plantilla base de Visual Studio, nos dirigimos a la carpeta de View => Shared, abrimos el archivo y agregamos la instrucción del recuadro para poder acceder a la vista de este caso.
11. Ahora se ejecuta el proyecto mostrándose la pagina de inicio de la plantilla base de Visual Studio con un enlace para acceder a la página de cargar archivo creada anteriormente
12. Luego de acceder al enlace anterior podemos ver la nueva pagina web para cargar archivos
13. Anteriormente se agregaron tres INPUT para subir tres archivos, procedemos a marcar cada uno de los tres botones que dicen "Seleccionar archivo" para que cada uno de ellos se asocie a un archivo en particular.
14. Luego de haber seleccionado los tres archivos procedemos a seleccionar el botón de "Enviar".
15. Al seleccionar el botón de "Enviar" los datos del formulario se envían al ActionResult HttpPost CargarArchivo. Como podemos ver se recibieron los tres archivos en la variable "files", los cuales después son manipulados uno a uno por la instrucción "foreach". En ese bloque se guarda cada archivo en la ruta "App_Data" del sitio web indicada anteriormente.
16. Al avanzar en el ciclo "Foreach" podemos ver que los archivos se irán guardando en la carpeta "App_Data" del sitio web como lo podemos ver a continuación.
17. Al seleccionar la opción del recuadro rojo se abre una ventana que representa el espacio físico en el servidor web donde se almacena el archivo cargado por la aplicación.
18. En este punto se ha logrado subir archivos de imágenes, de la misma forma podríamos subir archivos texto para procesar los datos dentro de los mismo para que así nuestra aplicación realice las acciones que deba seguir.
A continuación mostraré los pasos para cargar y leer un archivo texto, el cual es un escenario muy común para el intercambio de datos entre sistemas.
1. Para este caso vamos a crear un nuevo ActionResult en el mismo controlador para realizar la carga del archivo de texto.
2. Procedemos a crear la vista respectiva:
3. Creamos la vista.
4. Colocamos el siguiente código en la vista recientemente creada
5. Agregamos una entrada en "_layout.html" para poder acceder a la nueva vista creada
6. Creamos el ActionResult del tipo HttpPost para recibir procesar la carga del archivo texto. En la siguiente imagen podemos ver varios puntos a resaltar, el recuadro rojo se muestra el objeto que recibe el archivo desde la página donde se cargó, si ven la diferencia al ejemplo anterior aquí no se está manejando un arreglo de objetos INPUT, sino un solo objeto para recibir el archivo de texto único de este caso. El recuadro azul tiene algunas validaciones a nivel de extensión de archivos que pueden ser útiles para escenarios de la vida real. El recuadro verde se guarda el archivo recibido en una carpeta dentro del sitio web de la aplicación, en este caso: App_Data\ArchivosTexto. Una vez almacenado el archivo texto en el sitio web procedemos a leer el contenido del mismo lo cual se demuestra en el recuadro amarillo, en donde se realiza la lectura del archivo línea por línea, lo cual habilita a nivel de desarrollo poder leer un archivo bajo alguna estructura previamente definida del archivo, ya sea por posicionamiento, separador, etc.
7. Al ejecutar la aplicación demostraremos el funcionamiento de la misma. A continuación se muestra un archivo texto cualquier usado como ejemplo.
8. Accedemos a la vista donde se carga el archivo de texto en la siguiente opción.
9. Luego procedemos a seleccionar el archivo texto de ejemplo y seleccionamos "Enviar"
10. Al seleccionar enviar vemos que el código se ejecuta según lo esperado. En la línea "Contenido" se puede ver la lectura del archivo texto
11. Si revisamos la capeta del servidor web, podemos ver la sub-carpeta "ArchivosTexto
12. Y de ahí podemos ver el archivo que subimos al sitio web.
En este paso a paso se demostró como realizar la carga de archivos a un sitio web bajo MVC .NET, ya sea para simple almacenamiento o para ser procesado como fuente de intercambio de datos. Espero que este artículo les sea de utilidad, si quieren aprender más sobre desarrollo de aplicaciones, desarrollo en SharePoint o de SharePoint en general por favor visita nuestro site de Eigo Academy para conocer nuestra oferta de cursos.