Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

ASP.NET MVC: Subida de archivos y relación de uno a muchos
Actualizado el 21 Enero, 2016 y leído 5,749 veces
Calificación: 10.00 / 10

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

Anexsoft

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:

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.