Aplicación web con ASP.NET MVC 2 – parte 10

En la parte 9 de nuestro tutorial empezamos la implementación de la administración de grupos, donde comentamos que el contenido de la tabla se modificaría al cambiar los combobox para los cuales implementaremos el evento Change() de ambos combobox.

Todos los datos solicitados al servidor serán devueltos en formato JSON, para lo cual implementaremos una acción en el controlador para que al solicitarle los cuatrimestres (para el PE seleccionado en el combo.) nos devuelva el resultado y será procesado con JQuery.

Img. 1. Resultado al finalizar esta parte del tutorial.

En sí, continuaremos trabajando con el controlador AdministrarGrupos y la vista Index.

La acción que devolverá la lista de cuatrimestres del PE seleccionado.

[ActionName("CuatrimestresPE")]
public JsonResult CuatrimestresPE(int idpe)
{
    //cargar los cuatrimestres del año actual para el PE seleccionado
    var cuatrimestres = BD.Cuatrimestre.Where(c => c.IdPE == idpe && c.Anio == DateTime.Now.Year).ToList();

    //crear nuestra lista con la clase auxiliar
    List<AuxCuatrimestre> listacuatrimestres = new List<AuxCuatrimestre>();

    //convertir de la clase original a la auxiliar
    foreach (Cuatrimestre cuatrimestre in cuatrimestres)
        listacuatrimestres.Add(
            new AuxCuatrimestre
            {
                Id = cuatrimestre.Id,
                Periodo = cuatrimestre.PeriodoInicio.Trim() + " - " + cuatrimestre.PeriodoFin.Trim(),
                Anio = cuatrimestre.Anio
            });
    //devolver el resultado JSON
    return this.Json(listacuatrimestres, JsonRequestBehavior.AllowGet);
}

Para comprobar su funcionalidad, ejecute la aplicación e ingrese a la dirección de esta acción y especifique el valor para el parámetro idpe con un valor de clave primaria válido para algún PE.

http://localhost:XXXX/AdministrarGrupos/cuatrimestrespe?idpe=1

nos devolverá como resultado algo similar a:

[{"Id":9,"Periodo":"Septiembre - Diciembre","Anio":2011},{"Id":10,"Periodo":"Enero - Abril","Anio":2011}]

Llamar a la acción y procesar el resultado con JQuery

Agregue un nuevo archivo llamado admingrupos.JS (javascript) a la carpeta Content/Scripts como lo hizo con cuatrimestres.js

En este nuevo archivo JS implementaremos el evento Chage para el combo con el Id=IdPE que se encuentra en nuestra vista Index.

//Al seleccionar un PE, cargar los cuatrimestres
$("#IdPE").live("change", function (event) {
    //obtener el Id del PE seleccionado
    var idpe = $("#IdPE").val();

    //limpiar el combo
    $("#IdCuatrimestre").children("option").remove();

    //Si el ID del PE seleccionado es diferente de 0, cargar sus cuatrimestres
    if(idpe > 0) {

        //cargar los cuatrimestres con JSON
		var url ="/AdministrarGrupos/CuatrimestresPE?idpe="+idpe;

		//hacer la llamada JSON
		$.getJSON(url,
			function (data) {
			    var opcion = "<option value=\"0\"></option>";
			    $("#IdCuatrimestre").append(opcion);
				 $.each(data, function(i, item) {
					//agregar los cuatrimestres al combo IdCuatrimestre"
					var opcion= "<option value=\""+item.Id+"\">"+item.Periodo+"</option>";
					$("#IdCuatrimestre").append(opcion);
				});
		});
     }
});

//Al seleccionar el cuatrimestre, cargar sus grupos
//...

Ahora agregue el archivo JS de JQuery y admingrupos.js a la vista Index como se hizo anteriormente en un caso similar.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src=»../../Scripts/jquery-1.4.1.js» type=»text/javascript»></script>
<script src=»../../Content/Scripts/admingrupos.js» type=»text/javascript»></script>

Nota: Recuerde que la línea tachada es solo de referencia.

Ahora ingrese a la vista Index de AdministrarGrupos y seleccione el PE para comprobar que el combo de cuatrimestres cambie sus opciones.

Img. 2. Probando la funcionalidad del combo de PE's.

Al seleccionar un PE.

Img. 3. Al seleccionar un combo, se cargan los cuatrimestres en el otro combo.

Ahora al seleccionar un cuatrimestres, deben cargarse sus grupos, para ello, agregaremos nuestra acción al controlador.

Pero como una lista de alguna entidad de nuestro modelo no puede serializarse porque contiene propiedades de navegación, debemos crear una nueva clase auxiliar.

Agregue una nueva clase llamada AuxGrupo a Models, implemente la nueva clase.

public class AuxGrupo
{
    private int id;
    private string nombre;
    private string cuatrimestre;
    private string tutor;

    public int Id
    {
        get { return id; }
        set { id = value; }
    }

    public string Nombre
    {
        get { return nombre; }
        set { nombre = value; }
    }

    public string Cuatrimestre
    {
        get { return cuatrimestre; }
        set { cuatrimestre = value; }
    }        

    public string Tutor
    {
        get { return tutor; }
        set { tutor = value; }
    }

    //implemente más miembros de esta clase si fueran necesarios
}

Ahora la acción GruposCuatrimestre en nuestro controlador.

 
[ActionName("GruposCuatrimestre")]
public JsonResult GruposCuatrimestre(int idcuatrimestre)
{
    //cargar los grupos del cuatrimestre seleccionado
    var grupos = BD.Grupo.Where(g => g.IdCuatrimestre == idcuatrimestre).ToList();

    //crear nuestra lista con la clase auxiliar AuxGrupo
    List<AuxGrupo> listagrupos = new List<AuxGrupo>();

    //convertir de la clase original a la auxiliar de Grupo
    foreach (Grupo grupo in grupos)
    {
        listagrupos.Add(
            new AuxGrupo
            {
                Id = grupo.IdGrupo,
                Nombre = grupo.Nombre.Trim(),
                Cuatrimestre = grupo.Cuatrimestre.PeriodoInicio.Trim() + " - " + grupo.Cuatrimestre.PeriodoFin.Trim() + " - " + grupo.Cuatrimestre.Anio,
                Tutor = grupo.Tutor.Nombre.Trim() + " " + grupo.Tutor.Apellidos.Trim()
            });
    }

    return this.Json(listagrupos, JsonRequestBehavior.AllowGet);
}

Igualmente para comprobar que la acción funcione, ingrese a la dirección de la acción, ejemplo:

http://localhost:XXXX/AdministrarGrupos/gruposcuatrimestre?idcuatrimestre=9

El resultado devuelto puede ser algo como:

[{"Id":1,"Nombre":"A","Cuatrimestre":"Septiembre - Diciembre - 2011","Tutor":"Juan Vicente Pérez López"}]

Complementar nuestro admingrupos.JS

Ahora implementemos el evento Change del combo con el id=IdPE, para que al seleccionar un cuatrimestre se carguen sus grupos a la tabla.

//Al seleccionar el cuatrimestre, cargar sus grupos
$("#IdCuatrimestre").live("change", function (event) {
    //obtener el Id del cuatrimestre seleccionado
    var idcuatrimestre = $("#IdCuatrimestre").val();

    //eliminar todas las filas de la tabla
    $("#GruposTbl").find('tbody').children("tr").remove();

    if (idcuatrimestre > 0) {
        //mostrar el nombre de PE y el cuatrimestre
        $("#nombrepe").html($("#IdPE option:selected").html());
        $("#nombrecuatrimestre").html($("#IdCuatrimestre option:selected").html());

        //cargar los grupos del cuatrimestre con JSON
        var url = "/AdministrarGrupos/GruposCuatrimestre?idcuatrimestre=" + idcuatrimestre;

        //hacer la llamada JSON
        $.getJSON(url,
		function (data) {
		    $.each(data, function (i, item) {
		        //agregar los grupos a la tabla
		        var fila = "<tr><td><a href=\"/AdministrarGrupos/Editar/" + item.Id + "\">Editar</a> 
                        | <a href=\"/AdministrarGrupos/Eliminar/" + item.Id + "\">Eliminar</a></td><td>" + item.Id + "</td>" 
                        + "<td>" + item.Nombre + "</td>" + "<td>" + item.Cuatrimestre + "</td><td>" + item.Tutor + "</td></tr>";
		        $("#GruposTbl").append(fila);
		    });
		});

		//habilitar el link para registrar un nuevo cuatrimestre

        $("#LinkAltaGrupo").html("<a href=\"/AdministrarGrupos/Registrar/"+idcuatrimestre+"\">Registrar nuevo grupo</a>");
    }
});

Ahora ejecute la aplicación e ingrese en AdministrarGrupos, seleccione un PE y un cuatrimestre.

Img. 4. Comprobando la funcionalidad.

Seleccione un cuatrimestre que tenga ya registrados algunos grupos.

Img. 5. Cargando los grupos del cuatrimestre seleccionado.

Hasta aquí termina esta parte de administrar grupos, pero aún falta la administración de alumnos.