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

  1. Importar espacios de nombres

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

using System.IO;

  1. 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; }
    }
  1. 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);
        }
  1. 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

Artículos relacionados
5 Comentarios
  • Mountford Comentar
    Friday, June 2, 2017

    I think that is among the such a lot vital information for me. And i'm glad studying your article. However want to observation on some basic things, The web site taste is great, the articles is in point of fact great : D. Good process, cheers

  • Maclanachan Comentar
    Thursday, January 25, 2018

    SK

  • Lazenby Comentar
    Friday, March 16, 2018

    ¿Tiene un inconveniente de spam en este sitio? Asimismo soy blogger, y tenía curiosidad sobre tu situación; muchos de nosotros hemos creado ciertos procedimientos agradables y estamos buscando intercambiar soluciones con otras personas, ¿por qué no me disparan un mail si está interesado? ¡Volveré, en tanto que he marcado esta página como preferida y lo he twitteado a mis seguidores!

  • Sher Comentar
    Friday, March 16, 2018

    Este sitio verdaderamente tiene toda la información que deseaba sobre este tema y no sabía a quién preguntar. ¡Volveré, en tanto que he marcado esta página como favorita y lo he twitteado a mis seguidores!

  • Talbot Comentar
    Saturday, March 17, 2018

    ¡Dulce weblog! Lo hallé mientras navegaba por Yahoo News. ¿Tiene algún consejo sobre cómo aparecer en Yahoo News? ¡Lo he intentado por un tiempo, pero parece que nunca llego allá! Gracias, volveré una vez más desde que marqué esta página y lo twitteé a mis seguidores.

Enviame un comentario