ASP.NET MVC: Subida de archivos y relación de uno a muchos

En esta nueva entrada vamos a subir archivos al servidor, y registrar dicha relación con el alumno en la base de datos usando Entity Framework.

Rodríguez Patiño, Eduardo
14,303 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

Esta es la última entrada de nuestro tutorial de ASP.NET MVC realizando un CRUD desde 0, vamos a subir N documentos a nuestro alumno.

Formulario de subida

Dentro de nuestro formulario donde editamos al alumno, vamos a adicionar una pestaña para subir documentos.

<div class="tab-pane" id="adjuntos">
@using (Html.BeginForm("Adjuntar", "Home", FormMethod.Post, new { id = "frm-adjuntar" })) 
    {
        <input type="hidden" name="Alumno_id" value="@Model.id" />
        <div class="row">
            <div class="col-xs-10">
                <div class="form-group">
                    <input type="file" name="documento" />
                </div>
            </div>
            <div class="col-xs-2">
                <button type="submit" class="btn btn-primary btn-block">Adjuntar</button>
            </div>
        </div>
    }

    <div id="adjuntos-cargados"></div>

Nuestro código javascript para enviar el formulario por AJAX.

$("#frm-adjuntar").submit(function () {
    var form = $(this);

    form.ajaxSubmit({
        dataType: 'JSON',
        type: 'POST',
        url: form.attr('action'),
        success: function (r) {
            if (r.respuesta) {
                CargarAdjuntos();
            }
            else {
                alert(r.error);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });

    return false;
})

Y la acción que recibe el formulario:

public JsonResult Adjuntar(int Alumno_id, HttpPostedFileBase documento)
{
    var respuesta = new ResponseModel
    {
        respuesta = true,
        error = ""
    };

    if (documento != null)
    {
        string adjunto = DateTime.Now.ToString("yyyyMMddHHmmss") + Path.GetExtension(documento.FileName);
        documento.SaveAs(Server.MapPath("~/uploads/" + adjunto));

        this.alumno.Adjuntar(new Adjunto
        {
            Archivo = adjunto,
            Alumno_id = Alumno_id
        });
    }
    else
    {
        respuesta.respuesta = false;
        respuesta.error = "Debe adjuntar un documento";
    }

    return Json(respuesta);
}

Documentos adjuntos

Como se darán cuenta, hemos creado un div que tiene el id #adjuntos-cargados, este va a contener todos los adjuntos que subamos al servidor, para eso vamos a realizar una petición ajax que permita cargar una vista parcial que contedrá los documentos adjuntos.

Nuestra vista parcial es la siguiente:

@model List<Model.Adjunto>

<ul class="list-group">
    @foreach (var a in Model) 
    {
        <li class="list-group-item">
            <a href="~/Uploads/@a.Archivo" _blank>
                @a.Archivo
            </a>
        </li>
    }
</ul>

La función javascript encargada de traer los documentos adjuntos, es la siguiente:

function CargarAdjuntos()
{
    $("#adjuntos-cargados").load("@Url.Content("~/home/adjuntos?Alumno_id=" + Model.id)");
}

Y la acción que lo implementa:

public PartialViewResult Adjuntos(int Alumno_id) 
{
    return PartialView(alumno.ListarAdjuntos(Alumno_id));
}

Listando los Adjuntos

A nuestra clase Alumno le hemos implementado un método adicional, que se llama ListarAdjuntos y recibe un parámetro, este es el ID del alumno para saber que documentos traer.

public List<Adjunto> ListarAdjuntos(int Alumno_id)
{
    var adjuntos = new List<Adjunto>();

    try
    {
        using (var context = new TestContext())
        {
            adjuntos = context.Adjunto
                                .Where(x => x.Alumno_id == Alumno_id)
                                .ToList();
        }
    }
    catch (Exception e)
    {
        throw new Exception(e.Message);
    }

    return adjuntos;
}

Nota: como tenemos una nueva tabla que se llama Adjunto, hemos creado una nueva relación con Alumno y Adjunto, nuestro Entity Framework debe entender esto, y lo que hacemos es en nuestro TestContext.cs agregar el siguiente código.

modelBuilder.Entity<Alumno>()
    .HasMany(e => e.Adjuntos)
    .WithRequired(e => e.Alumno)
    .HasForeignKey(e => e.Alumno_id);

Vean el video y descarguen el proyecto completo para agilizar conocimiento.

Partes

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín