Cómo leer y mostrar archivos CSV en ASP.Net MVC?

En este ejemplo vamos a explicar, cómo cargar, leer y mostrar datos CSV en ASP.Net MVC Razor.

El archivo CSV es un archivo de texto que contiene valores separados por comas (delimitados por comas), el cual podemos abrir con Excel o con cualquier programa como el bloc de notas por ejemplo. Se leerán los datos de un archivo CSV y después de separar los valores, los datos se rellenarán en una tabla HTML.

1. Creamos el proyecto MVC
2. Crear el Controlador

En la carpeta Controllers agregamos un controlador llamado HomeController

3. Importar espacios de nombres

En el controlador HomeController lo primero que debemos hacer es importar los siguientes espacios de nombres:

using System.IO;

4. Modelo

A continuación crea la clase CustomerModel en la carpeta Models la cual va a contener las propiedades Id, Nombre y País, que es donde se van asignar los datos que se lean del archivo CSV.

  public class CustomerModel
    {
        public int Id { get; set; }

        public string Nombre { get; set; }

        public string Pais { get; set; }
    }

5. Controlador

El Controlador consta de dos métodos de Acción (ActionResult):

• Método de acción para manejar la operación GET

Dentro de este método de acción, se devuelve una colección vacía de la lista genérica del objeto de clase CustomerModel.

• Método de acción para manejar la operación POST para cargar y leer archivos CSV

Este método de acción se llama cuando se selecciona el archivo CSV y se hace clic en el botón Importar y obtiene el archivo cargado en el parámetro HttpPostedFileBase.

El archivo CSV cargado se guarda en una carpeta denominada Uploads y los datos del archivo CSV se leen en una variable String utilizando el método ReadAllText de la clase File .

Los datos del archivo CSV se dividen utilizando los caracteres New Line (\n) y Comma (,) y utilizando un bucle los datos se copian en la colección Generic List de objetos de clase CustomerModel que se envía a la vista. En el video que esta más abajo se explica a detalle esto.

 public ActionResult Index()
        {
            return View(new List<CustomerModel>());
        }

        [HttpPost]
        public ActionResult Index(HttpPostedFileBase postedFile)
        {
            List<CustomerModel> customers = new List<CustomerModel>();
            string filePath = string.Empty;
            if (postedFile != null)
            {
                string path = Server.MapPath("~/Uploads/");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                filePath = path + Path.GetFileName(postedFile.FileName);
                string extension = Path.GetExtension(postedFile.FileName);
                postedFile.SaveAs(filePath);

                string csvData = System.IO.File.ReadAllText(filePath);
                foreach(string row in csvData.Split("\n"))
                {
                    if (!string.IsNullOrEmpty(row))
                    {
                        customers.Add(new CustomerModel
                        {
                            Id=Convert.ToInt32(row.Split(",")[0]),
                            Nombre= row.Split(",")[1],
                            Pais= row.Split(",")[2]
                        });
                    }
                }
            }
            return View(customers);
        }

6. View

Dentro de la vista, se declara la clase CustomerModel como IEnumerable que especifica que estará disponible como una colección.

La vista consta de un elemento HTML FileUpload y un botón de envío incluido en un elemento de formulario.

El formulario HTML se ha creado mediante el método Html.BeginForm que acepta los siguientes parámetros:

• ActionName - Nombre de la acción. En este caso, el nombre es Index.
• ControllerName - Nombre del controlador. En este caso el nombre es Home.
• FormMethod - Especifica el método de formulario, es decir, GET o POST. En este caso, se establecerá en POST.
• HtmlAttributes - Esta matriz permite especificar los atributos de formulario adicionales. Aquí tenemos que especificar enctype = "multipart/ form-data" que es necesario para subir archivos.

Para visualizar los registros, se utiliza una tabla HTML. Se ejecutará un bucle sobre el modelo que generará las filas de la tabla HTML con los datos del archivo CSV.

@using Leer_CSV_MVC.Models
@model IEnumerable<CustomerModel>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }

            table th {
                background-color: #B8DBFD;
                color: #333;
                font-weight: bold;
            }

            table th, table td {
                padding: 5px;
                border: 1px solid #ccc;
            }

            table, table table td {
                border: 0px solid #ccc;
            }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="postedFile" />
        <input type="submit" value="Importar" />
    }
    @if (Model.Count() > 0)
    {
        <hr />
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>País</th>
            </tr>
            @foreach (CustomerModel customer in Model)
            {
                <tr>
                    <td>@customer.Id</td>
                    <td>@customer.Nombre</td>
                    <td>@customer.Pais</td>
                </tr>
            }
        </table>
    }
</body>
</html>

Descargar Ejemplo