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 7,779 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!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

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

Ú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.