Aplicación Web Con ASP (Escolar)

INGENIERA EN TECNOLOGAS DE LA INFORMACIN
Aplicacin web con ASP.NET MVC 2 Hace un ao empezamos a trabajar con aplicaciones web con ASP.NET MVC 2 en Visual Studio 2010, en este curso nuevamente trabajaremos con esta tecnologa aunque contamos ya con la versin 3 del ASP.NET MVC, podremos pasar a la versin 3 no sin antes haber trabajado con la versin 2 y como la red de la escuela no nos permite descargar no podemos actualizar nuestro Visual Studio. An se encuentra la publicacin del ejemplo anterior en http://afelipelc.mx/2011/05/23/mi-primera-aplicacion-asp-net-mvc2-paso-a-paso/ del cual se retomarn algunos datos pero en esta ocasin el trabajo ser diferente. Actualmente en el sitio oficial de ASP.NET MVC http://www.asp.net/mvc/ encontramos el tutorial para crear una aplicacin con la versin 3 del ASP.NET MVC, pero an se encuentran vivos los enlaces del tutorial de ASP.NET MVC 2 que se tom para realizar el ejemplo anterior, el link eshttp://www.asp.net/mvc/tutorials/getting-started-with-mvc-part1. Para saber ms acerca de ASP.NET MVC, visita el sitio http://msdn.microsoft.com/es-es/library/dd394709.aspx. Nuestra aplicacin de ejemplo a realizar consiste en crear una pequea aplicacin que administre los diferentes grupos de alumnos de una escuela considerando: Programas educativos, cuatrimestres, grupos, tutores y alumnos; debe considerarse que la informacin cambia constantemente como al cambiar un nuevo ao, nuevo cuatrimestre, cambio de grupo, tutores, etc. para ello debemos considerar tambin un historial para que al iniciar un nuevo cuatrimestre los grupos puedan ser reiniciados a 0 alumnos, al igual que deben considerarse los registros de las distintas generaciones (Suena algo complejo?, podra serlo pero le daremos solucin). Por ahora la tarea es realizar el modelado de datos para nuestra aplicacin. Por otra parte, empezaremos con la parte de crear un primer proyecto de ASP.NET MVC 2. Requisitos: Visual Studio 2010 con Visual Web Developer y SQL Server Express 2008. Para este ejemplo se est utilizando Visual Studio 2010 versin Ultimate. Crear un proyecto de Aplicacin Web de ASP.NET MVC 2 En Visual Studio -> Crear nuevo Proyecto -> C# /Web >> elegimos Aplicacin web de ASP.NET MVC 2, elegimos donde guardarlo y le ponemos el nombre de EscuelaWebApp (cambia el nombre si lo prefieres).
Img. 1. Crear el proyecto
Recopil: MSC. Jos Raymundo Ceja Vzquez
Pgina 1 de 117
Al crear el proyecto nos pregunta si queremos crear un proyecto de prueba unitaria, por ahora elegimos NO y damos clic en Aceptar. Qu nos genera el proyecto? El tipo de proyecto seleccionado nos crea 2 controladores, uno llamado HomeController que es la entrada principal de la aplicacin, y otro controlador llamado AcountController que se encarga de la gestin de las sesiones de usuarios.
Img 2. Estructura de la aplicacin. Adems de que crea toda la estructura del proyecto: Carpeta de Datos (App_Data), Carpeta de hojas de estilo y otros contenidos (Content), Carpeta de Controladores (Controllers), Carpeta de vistas (Views) donde se incluyen vistas compartidas como la plantilla del sitio llamada Site.Master y otros controles como el de Usuario, Carpeta de modelo de datos y clases a utilizar como modelo (Models), Carpeta para scripts JS (Scripts) que incluye por default JQuery y otras librerias y los archivos de configuracin de la aplicacin. Si se elige un proyecto de Aplicacion web vaca de ASP.NET MVC 2 crear solo la estructura sin el controlador AcountController. El controlador HomeController El controlador Home es el punto de entrada para nuestra aplicacin, si analizamos el cdigo vemos que contiene: public class HomeController : Controller { public ActionResult Index() { ViewData["Message"] = "ASP.NET MVC"; return View(); } public ActionResult About() { return View(); } }
Pgina 2 de 117
Encontramos que la clase HomeController contiene una Accin (ActionResult) llamada Index() que es la accin por defecto en un controlador, es decir, si ejecutamos nuestra aplicacin, obtendremos en el navegador que nos muestra la pgina principal en la direccion http://localhost/ lo que vemos ah es el resultado de la llamada a la accin Index() del controlador Home, en el ejemplo, la accin Index() pasa un parmetro llamado Message a la vista relacionada (Index.aspx en View/Home) a la accin por medio de ViewData["Message"] cuyo valor ser mostrado por la vista en el navegador. Todas las acciones de un controlador deben devolver una vista por medio de return View(), entonces para cada accin puede crearse una vista que deber llevar el mismo nombre (ms adelante veremos las vistas), pero tambin puede una accin devolver otra vista con nombre diferente, como cuando queremos mostrar la misma vista al usuario en caso de generase un error, devolveremos la vista llamada Error.aspx que se encuentra en Views/ Shared. La accin About() solo responde con la vista relacionada llamada About.aspx que se encuentra en Views/Home. Entonces podemos darnos cuenta que para cada controlador se crea una carpeta en Views donde se encontrarn todas las vistas asociadas a las acciones de cada controlador. Podemos decir tambin que las acciones tiene la estructura: public ActionResult NombreDeLaAccion() { //Todas las sentencias que deber ejecutar la accin. //Generar un resultado si fuera el caso //Devolver la vista con el resultado generado return View(); } Las acciones pueden recibir parmetros de lo que veremos ms adelante. Analicemos ahora el cdigo de la plantilla del sitio llamada Site.Master (en Views/ Shared) (no puede agregarse aqu en la publicacin porque wordpress.com no lo permite) Encontramos que la mayor parte del cdigo es HTML. Lo que nos llama la atencin es <title> <asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> donde encontramos la etiqueta ASP llamada ContentPlaceHolder con el Id TitleContent, cuya funcin es poner en ese espacio el ttulo de la pgina proporcionado por las vistas, lo mismo que donde deber insertarse el contenido de la pgina (pasado por la vista). La estructura del sitio creada por la plantilla es el siguiente:
Pgina 3 de 117
Img. 3. Estructura del sitio. Analicemos ahora el cdigo de la vista Index.aspx <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Pgina principal </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2><%:ViewData["Message"] %> <p> Para obtener ms informacin sobre ASP.NET MVC, visite el < a href="http://asp.net/mvc" title="sitio web de ASP.NET MVC">http://asp.net/mvc. </p> </asp:Content>
Podemos encontrar que contiene la etiqueta ASP llamada Content con un identificador y especifica el ContentPlaceHolderID donde deber mostrarse la informacin que recide dentro de esta etiqueta, para ContentPlaceHolderID=TitleContent el contenido a mostrar es Pgina principal que en s es el ttulo que le estamos dando a nuestra pgina. Para el ContentPlaceHolderID=MainContent es todo el contenido de nuestra pgina, en este caso mostrar el valor que contiene el parmetro Message pasado por la accin Index() del controlador Home, donde observamos que para imprimir el valor de una variable, parmetro o datos del modelo se hace por medio de <%:NombreElemento%> ejemplo: <%:ViewData["Message"] %>, el contenido tambin incluye un poco ms de informacin contenida en un prrafo. Ejecutando nuestro proyecto, VS abrir el navegador web mostrando el resultado:
Pgina 4 de 117
Img. 4. Vista de la ejecucin de la aplicacin. Debemos considerar que como no estamos utilizando nuestro propio servidor IIS para la ejecucin de nuestras aplicaciones web, VS esta utilizando el IIS de desarrollo que trae integrado, por ello a cada aplicacin web le asigna un puerto, para mi aplicacin le ha asignado el puerto 2958 en el cul esta corriendo la aplicacin y cada vez que se quiera ingresar a ella (mientras se este ejecutando), debe hacerse por medio de este puerto. Aplicacin web con ASP.NET MVC 2 parte 2 Continuando con el desarrollo de nuestra aplicacin, primero debemos tener nuestro modelo de datos para que posteriormente agreguemos los controladores, acciones y vistas correspondientes, para ello se propone la siguiente estructura para la base de datos.
Img. 1. Diagrama relacional de la BD.
Pgina 5 de 117
Agregar la base de datos al proyecto. Para agregar la base de datos al proyecto, nos ubicamos sobre la carpeta App_Data (en el explorador de soluciones) donde con el botn de derecho del ratn elegimos Agregar / Nuevo elemento, en la ventana para agregar nuevo elemento nos ubicamos sobre las plantillas C# / Datos donde seleccionamos Base de datos SQL Server, el nombre para nuestra base de datos ser BDEscolar.mdfy hacemos clic en Agregar como se aprecia en la imagen.
Img. 2. Agregar la base de datos al proyecto. Agregada la base datos aparecer en nuestro explorador de soluciones.
Img. 3. Base de datos agregada al proyecto.
Pgina 6 de 117
Img. 4. Explorador de servidores mostrando las tablas de la BD. Ahora abra la base de datos, haciendo doble clic sobre ella, VS nos mostrar el explorador de servidores, donde deben crearse las diferentes tablas contenidas en el diagrama (img. 1), considere los tipos de datos apropiados donde las claves primarias sean definidas como identidad con auto incremento en 1 excepto el campo Alumno.Matricula que ser definido por el administrador, recuerde tambin crear las relaciones correspondientes (puede consultar el modelo mostrado en la img. 7 donde se muestran mejor las relaciones y su cardinalidad) para que posteriormente creemos el modelo de datos y este sea correcto. Crear el modelo de datos. Ya con nuestra base de datos, creemos ahora nuestro modelo conceptual de datos, para ello utilizaremos el ADO.NET Entity Framework, para obtener ms informacin acerca de este Framework, visite http://msdn.microsoft.com/esmx/data/aa937723 consulte tambin el siguiente enlace http://msdn.microsoft.com/en-us/library/bb399572.aspx que contiene informacin sobre ADO.NET EF. Entonces para crear nuestro modelo de datos utilizaremos el elemento ADO.NET Entity Data Model para ello consulte el enlace http://msdn.microsoft.com/en-us/library/bb399249.aspx que contiene informacin acerca de este componente y las diferentes herramientas que se utilizarn posteriormente (por ejemplo el asistente para crear el modelo). Ya para no marear ms, en la carpeta Models en el men contextual(clic derecho) elegimos Agregar / Nuevo elemento, en la ventana para agregar el nuevo elemento nos situamos sobre las plantillas C# / Datos donde seleccionamos ADO.NET Entity Data Model el cual le pondremos el nombreModeloDatos.
Img. 5. Agregar el ADO.NET Entity Data Model.
Pgina 7 de 117
Seguimos el asistente donde en el primer paso (Elegir contenido de Model) seleccionamos Generar desde la base de datos. En el segundo paso veremos que automticamente nos muestra nuestra base de datos BDEscolar.mdf (si no la muestra debemos crear la conexin hacia nuestro archivo de base de datos), seleccionada la base de datos nos muestra la cadena de conexin que se almacenar en el archivo Web.Config del proyecto, a la cadena de conexin le asigna el nombre BDEscolarEntities (lo dejamos como tal) que utilizaremos como clase para poder utilizar el modelo en nuestros controladores u otras clases. En el tercer paso seleccionamos las tablas y otros elementos de nuestra BD que queremos agregar al modelo, notemos que el espacio de nombres para el modelo es BDEscolarModel.
Img. 6. Elegir los objetos de BD a incluir en el modelo. Seleccionadas las tablas a incluir finalizamos el asistente, donde obtendremos el resultado esperado.
Pgina 8 de 117
Img. 7. Modelo de datos para nuestra aplicacin. En el modelo conceptual observamos que se han creado correctamente las propiedades de navegacin, para saber ms acerca de las propiedades de navegacin visite el enlace http://msdn.microsoft.com/es-es/library/ee382841.aspx Aplicacin web con ASP.NET MVC 2 parte 3 Despus de haber creado nuestra base de datos y el modelo de datos a utilizar en nuestra aplicacin, antes de agregar cualquier registro a las tablas es recomendable tener un respaldo de la BD vaca, posteriormente si se le realiza algn cambio al diseo de la BD volver a crear un respaldo ya que al ir realizando las pruebas de funcionalidad de la aplicacin se irn agregando registros y para cuando la aplicacin est terminada tendremos que limpiar la BD para que ahora s empiece a trabajar desde cero, entonces ser ms fcil reemplazar la BD con datos de prueba por la vaca.
Pgina 9 de 117
Agregar los primeros datos a la BD. Para empezar a realizar nuestros primeros avances, necesitamos contar con algunos datos en nuestra BD, para ello agregaremos algunos registros a la tabla principal ProgramaEducativo.
Img. 1. Agregar los primeros datos manualmente. Agregar controladores. Ya con los datos en nuestra tabla, ahora agregaremos un nuevo controlador al proyecto, para ello en el explorador de soluciones, hacemos clic derecho sobre Controllers y en el men contextual seleccionamos Agregar / Controlador, VS nos mostrar una ventana donde debemos ingresar el nombre del controlador, en esta ventana vemos que en el cuadro de texto para el nombre aparece Default1Controller donde Default1 aparece seleccionado, significa que ese es el nombre para el controlador, el nombre de un controlador siempre debe llevar el sufijo Controller de esta forma VS identifica que se trata de un controlador, entonces agregaremos un controlador llamado AdministrarPE que quedar como AdministrarPEController (empezaremos por agregar los controladores para administrar los datos).
Img. 2. Agregar un nuevo controlador. Podemos seleccionar la opcin Agregar mtodos de accin para los escenarios Create, Update, Delete y Details y al crear el controlador se crearn estas acciones (pero con los nombres en ingls), en este caso agregamos el controlador sin seleccionar esta opcin. Acceder al modelo desde el controlador. Para que nuestro controlador pueda acceder al modelo, debemos agregar el using correspondiente. using EscuelaWebApp.Models;
Pgina 10 de 117
El propsito de este controlador es permitir al usuario (administrador) visualizar la lista de programas educativos con la opcin de agregar nuevos, editar y eliminar registros. Entonces lo que haremos es que al ingresar a la url de nuestro controlador (localhost/AdministrarPE) el Index nos muestre la lista de programas educativos. Agregaremos el cdigo correspondiente para que la accin Index() del nuevo controlador pase la lista de programas educativos a la vista, para ello primero crearemos una instancia de nuestra conexin a la BD (Modelo). El cdigo de nuestro controlador es el siguiente (no inclu aqu el cdigo del namespace ni los using): public class AdministrarPEController : Controller { //crear instancia del entity model (Base de datos) BDEscolarEntities BD = new BDEscolarEntities(); // // GET: /AdministrarPE/ public ActionResult Index() { //obtener la lista de programas educativos desde el modelo (BD) var programaseducativos = BD.ProgramaEducativo.ToList(); //Pasar la lista de resultados a la vista return View(programaseducativos); } } Crear una nueva vista. Es importante recordar que cada una de las acciones (ActionResult) debe devolver una vista (por lo general con el mismo nombre) o redireccionar a otra accin que devuelva una vista. Para crear una vista para una accin, sobre el nombre de la accin Index() presionamos botn derecho y seleccionamos CrearVista esto nos abrir una ventana donde: 1. Debemos especificar el nombre para nuestra vista (mismo nombre de la accin). 2. Como queremos que el Index nos muestre la lista de programas educativos, seleccionamos Crear una vista fuertemente tipada donde en Clase de datos de View seleccionamos la clase Programa educativo. 3. En Contenido de view seleccionamos el contenido para nuestra vista, como queremos que muestre una lista, seleccionamos List. 4. Las opciones de Seleccionar la pgina maestra la dejamos como tal, si fuera el caso que tenemos diferentes plantillas debemos seleccionar la plantilla a utilizar. 5. Si cambiamos el contenedor principal donde debe mostrarse el contenido en nuestra plantilla, debemos especificar su ID. 6. Agregamos la vista.
Pgina 11 de 117
Img. 3. Agregar una vista fuertemente tipada. Observamos que el cdigo de la nueva vista mostrar como ttulo Index, as que cambiamos el ttulo a Programas Educativos. Vemos tambin que el cdigo contiene una tabla en HTML con las columnas correspondientes a los campos de la tabla ProgramaEducativo y una primera columna que mostrar los links correspondientes para Editar, Detalles y eliminar cada uno de los registros. Observemos que para mostrar los datos de los PE registrados nuestra vista los escribir en la tabla utilizando un foreach que recorre los elementos contenidos en el Modelo (lista de objetos pasados por el controlador). Contiene al final tambin un enlace para crear un nuevo registro. Consideremos que los enlaces que se muestren en nuestra pgina an no funcionan, ya que los enlaces apuntan hacia las acciones Create, Edit, Details y Delete que no existen en nuestro controlador (ms adelante crearemos las nuestras, por ahora lo dejamos as). Cdigo de la vista Index.aspx <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Programas Educativos </asp:Content>
Pgina 12 de 117
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Lista de programas educativos.</h2> <table> <tr> <th></th> <th> IdPE </th> <th> Nombre </th> <th> NombreCorto </th> </tr> <% foreach (var item in Model) { %> <tr> <td> <%: Html.ActionLink("Edit", "Edit", new { id=item.IdPE }) %> | <%: Html.ActionLink("Details", "Details", new { id=item.IdPE })%> | <%: Html.ActionLink("Delete", "Delete", new { id=item.IdPE })%> </td> <td> <%: item.IdPE %> </td> <td> <%: item.Nombre %> </td> <td> <%: item.NombreCorto %> </td> </tr> <% } %> </table> <p> <%: Html.ActionLink("Create New", "Create") %> </p> </asp:Content> Ejecutemos nuestra aplicacin e ingresemos a la ruta de nuestro controlador, en mi caso es http://localhost:2958/AdministrarPE (recuerda que 2958 es el puerto que el IIS de desarrollo asigna a nuestra aplicacin).
Pgina 13 de 117
Img. 4. Nuestra primera vista mostrando la lista de programas educativos. Y ese es el resultado que tenemos hasta ahora, vaya que es rpido desarrollar aplicaciones web con esta tecnologa, pero apenas estamos empezando Los Links (ActionLink) Vemos que nuestra aplicacin muestra algunos enlaces y si navegamos por el cdigo de nuestra vista o Site.Master donde genera los links vemos que se utiliza Html.ActionLink. Cmo se generan los vnculos o links? Ejemplos de links: 1. <%: Html.ActionLink(Acerca de, About, Home)%> 2. <%: Html.ActionLink(Programas educativos, 3. 4. 5. 6.
Index,
AdministrarPE)%>
<%: Html.ActionLink(Edit, Edit, new { id=item.IdPE }) %> <%: Html.ActionLink(Details, Details, new { id=item.IdPE })%> <%: Html.ActionLink(Delete, Delete, new { id=item.IdPE })%>
Por medio de Html.ActionLink genera los vnculos a acciones de un controlador, por ejemplo el link 1) genera el enlace http://localhost:2958/Home/About, el 2) genera el enlace http://localhost:2958/AdministrarPE/ el 3) genera http://localhost:2958/AdministrarPE/Edit/Xnmero, etc. ntese que no se pone la palabra Controller en Home, AdministrarPE (nombre de los controladores), entonces la sintaxis es: Cuando estamos llamando a una accin en el mismo controlador. <%: Html.ActionLink( "Acceso externo", // Texto del enlace "Editar", // Accin new { id=Model.Id } // Parmetros ) %>
Pgina 14 de 117
Esta sintaxis es la utilizada en los links 3, 4 y 5 porque solo se estn mostrando y utilizando en las vistas del controlador AdministrarPE. Y cuando queremos acceder a la accin de otro controlador <%: Html.ActionLink( "Acceso Externo", //Texto del enlace "Editar", // Accin "Productos", // Nombre del controlador new { id=Model.Id } // Parmetros ) %> Por Ejemplo cuando en la pgina principal queremos que se muestre un enlace para acceder algn determinado controlador (otro nivel), realizaremos algo como <%: Html.ActionLink (Programas educativos, Index, AdministrarPE)%> Vaya a Site.Master y en el div que contiene el men, agrege el cdigo para generar el enlace. Ejecutamos nuestra aplicacin donde en la pgina principal y por toda la aplicacin podremos ver nuestro nuevo link.
Img. 5. Resultado de agregar un nuevo link a la plantilla Site.Master. Ahora podemos acceder rpidamente a nuestra nueva seccin de nuestra aplicacin.
Pgina 15 de 117
Aplicacin web con ASP.NET MVC 2 parte 4 En la parte 3 del tutorial solo vimos acerca de los controladores, las vistas y los enlaces, donde el trabajo realizado fue solo agregar la accin Index al Controlador AdministrarPE la cual al ser invocada muestra la lista de registros almacenados en la tabla correspondiente.
Img. 1. Resultado del trabajo anterior (parte 3). Ahora es esta parte del tutorial veremos como crear las acciones que permitan crear un nuevo registro, editar y eliminar un existente. Las acciones Registrar, Editar y Eliminar. Ahora trabajaremos en la Accin Registrar de la que tendremos 2 direcciones (GET y POST) las cuales son indispensables cuando se trata de acciones donde se ven involucradas la solicitud e ingreso de datos a la aplicacin. La accin Registrar (GET) Se habla de GET porque la accin responde a nuestra peticin cuando intentemos crear un nuevo registro (solo atiende peticiones GET), es decir, la parte GET solo se encargar de mostrarlos el formulario correspondiente el cual en su propiedad Action estar enlazada a una accin llamada Registrar que recibir los datos ingresados en el form. // GET: /AdministrarPE/Registrar public ActionResult Registrar() { return View(); } Ahora creemos la vista correspondiente: Cree una nueva vista con el nombre Registrar donde: Seleccione Crear una vista fuertemente tipada seleccionando la clase ProgramaEducativo. En contenido de view, seleccione la opcin Create. Creada la vista, modifique el cdigo para que muestre la leyenda o titulo correspondiente.
Img. 2. Crear vista para Registrar.
Pgina 16 de 117
Modifiquemos ahora el cdigo de la vista, como el campo IdPE de PrgramaEducativo es auto incremento, eliminemos el cdigo HTML del form que corresponde al campo para ingresar el valor de IdPE, mostrar la leyenda y textos correspondientes y modificar el link que lleva al index, el cdigo de la vista quedara as: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Registrar un nuevo programa educativo </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Registrar nuevo programa educativo.</h2> <% using (Html.BeginForm()) {%> <%: Html.ValidationSummary(true) %> <fieldset> <legend>Datos del programa educativo</legend> <div class="editor-label"> <%: Html.LabelFor(model => model.Nombre) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.Nombre) %> <%: Html.ValidationMessageFor(model => model.Nombre) %> </div> <div class="editor-label"> <%: Html.LabelFor(model => model.NombreCorto) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.NombreCorto) %> <%: Html.ValidationMessageFor(model => model.NombreCorto) %> </div> <p> <input type="submit" value="Registrar programa educativo" /> </p> </fieldset> <% } %> <div> <%: Html.ActionLink("Regresar a la lista de programas educativos", "Index") %> </div> </asp:Content> Ahora ingresemos manualmente a nuestra accin en http://localhost:2958/AdministrarPE/Registrar donde vemos el formulario.
Pgina 17 de 117
Img. 3. Formulario para crear un nuevo registro (Vista Registrar). Si llenamos el Form e intentamos registrar el PE, no funcionar ya que ninguna accin en nuestro controlador recibe los datos. La accin Registrar (POST) Se coment que esta accin ser la encargada de recibir los datos del form (solo atiende peticiones POST), en s se trata de un nuevo objeto de la clase ProgramaEducativo. Las acciones encargadas de recibir datos por POST se les antepone [HttpPost ] antes de la declaracin, nuestra accin Registrar (POST) quedara as: [HttpPost] public ActionResult Registrar(ProgramaEducativo programaeducativo) { BD.AddToProgramaEducativo(programaeducativo); BD.SaveChanges(); //agregado el registro (objeto), redireccionar al inicio del controlador (Index). return RedirectToAction("Index"); } Esta accin agregar el nuevo objeto y automticamente nos redireccionar a la lista de PE (por lo que no se necesita crear una vista especial), notese que no se hace ninguna validacin de los datos, si lo hubiera y en el caso de que los datos sean incorrectos, se deber mostrar la misma vista Registrar donde en el formulario se muestren los datos ya ingresados y notificar al usuario los datos incorrectos para que pueda corregirlo y volver a intentar crear el registro. Ahora ejecute nuevamente la aplicacin y vuelva al form anterior, llene los datos y cree el registro para que pueda ver el resultado.
Pgina 18 de 117
Img. 4. Creando un nuevo registro. Despus de hacer clic en el botn, tenemos el resultado.
Img. 5. Registro agregado. Ahora en la vista Index, modifique el enlace Create new para que apunte a nuestra accin Registrar: <%: Html.ActionLink(Registrar nuevo Programa educativo, Registrar) %> La accin Editar De igual forma como la accin Registrar, deben considerarse las peticiones GET y POST. La accin Editar (GET) La accin editar que atienda peticiones GET debe recibir como parmetro el ID del PE a editar, debe buscar en la BD el objeto correspondiente y pasarlo a la vista para su edicin, la vista debe mostrar en el formulario con los datos correspondientes. // GET: /AdministrarPE/Editar public ActionResult Editar(int id)
Pgina 19 de 117
{ //buscar el objeto en la BD var programaeducativo = BD.ProgramaEducativo.Where(p => p.IdPE == id).FirstOrDefault(); //si el registro existe, pasarlo al modelo //sino, mostrar la vista Error (ubicada en Views/Shared/Error.aspx) if (programaeducativo != null) return View(programaeducativo); else return View("Error"); } Notese que para realizar nuestra consulta en la BD utilizamos var programaeducativo = BD.ProgramaEducativo.Where(p => p.IdPE == id).FirstOrDefault(); Nota: aqu empezamos a trabajar con consultas LINQ y expresiones LAMBDA no nos meteremos con estos temas, solo agregar las consultas correspondientes pero sin explicarlas a fondo, para ello debe estudiar por su propia cuenta estos temas (por si an no est familiarizado), puede consultar el enlace http://msdn.microsoft.com/en-us/library/cc161164.aspx que contiene buena informacin sobre LINQ y http://msdn.microsoft.com/en-us/vcsharp/aa336746 que contiene 101 ejemplos de consultas LINQ y algunos con expresiones Lambda, busque tambin ms informacin en la web o en el sitio oficial del MSDN. Crearemos la vista correspondiente (en contenido de view ahora es Edit).
Pgina 20 de 117
Img. 6. Crear la vista Editar (con contenido Edit).
Modificaremos el cdigo de la vista donde agregaremos los textos correspondientes y el textbox correspondiente al Id lo pondremos como solo lectura para que el usuario no pueda modificarlo. <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Editar programa educativo. </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Editar: <%: Model.Nombre %></h2> <% using (Html.BeginForm()) {%> <%: Html.ValidationSummary(true) %> <fieldset> <legend>Datos del programa educativo</legend> <div class="editor-label"> ID </div> <div class="editor-field"> <% // Considerar poner el textbox del ID como solo lectura %> <%: Html.TextBoxFor(model => model.IdPE, new Dictionary<string, object>() { { "readonly", "true" } })%> <%: Html.ValidationMessageFor(model => model.IdPE) %> </div> <div class="editor-label"> Nombre </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.Nombre) %> <%: Html.ValidationMessageFor(model => model.Nombre) %> </div> <div class="editor-label"> Nombre Corto </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.NombreCorto) %> <%: Html.ValidationMessageFor(model => model.NombreCorto) %> </div> <p> <input type="submit" value="Guardar Cambios" /> </p> </fieldset> <% } %> <div> <%: Html.ActionLink("Regresar a la lista de programas educativos",
Pgina 21 de 117
"Index")%> </div> </asp:Content>
La accin Editar (POST) Ahora creemos la accin Editar que reciba los nuevos datos y actualice la BD. [HttpPost] public ActionResult Editar(int id, FormCollection formValues) { //buscar el objeto en la BD var programaeducativo = BD.ProgramaEducativo.Where(p => p.IdPE == id).FirstOrDefault(); //Actualizar los datos del objeto con los recibidos del form. UpdateModel(programaeducativo, formValues); //guardar los cambios BD.SaveChanges(); //redireccionar al inicio del controlador (accin Index). return RedirectToAction("Index"); }
Modificar la vista Index Recordemos que en la lista de PEs (Vista Index), muestra en cada registro un enlace con el texto Edit, debemos modificar el ActionLink para que apunte hacia nuestra nueva accin: <%: Html.ActionLink(Editar, Editar, new { id=item.IdPE }) %> Ejecutemos nuestra app e intentemos editar un registro, ejemplo: http://localhost:2958/AdministrarPE/Editar/1
Pgina 22 de 117
Img. 7. Vista de la lista con el nuevo link Editar.
Img. 8. Editar los datos del programa educativo.
Pgina 23 de 117
Guardados los cambios:
Img. 9. Datos guardados. Eliminar Registros. Ahora crearemos la accin que elimine los registros. // GET: /AdministrarPE/Eliminar public ActionResult Eliminar(int id) { //buscar el objeto en la BD var programaeducativo = BD.ProgramaEducativo.Where(p => p.IdPE == id).FirstOrDefault(); //si el registro existe, pasarlo al modelo //sino, mostrar la vista Error (ubicada en Views/Shared/Error.aspx) if (programaeducativo != null) return View(programaeducativo); else return View("Error"); } Crear la vista correspondiente con contenido Delete.
Pgina 24 de 117
Img. 10. Crear vista con contenido Delete. Modificar el cdigo de la vista (puede utilizar el diseador): <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Eliminar programa educativo </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Eliminar: <%: Model.Nombre %></h2> <h3>Est seguro que quiere eliminar el Programa Educativo?</h3> <fieldset> <legend>Datos del programa educativo</legend> <div class="display-field"><strong>Id</strong>: <%: Model.IdPE %></div> <div class="display-field"><strong>Nombre</strong>: <%: Model.Nombre %></div> <div class="display-field"><strong>Nombre Corto</strong>: <%: Model.NombreCorto %></div>
Pgina 25 de 117
</fieldset> <% using (Html.BeginForm()) { %> <p> <input type="submit" value="Si Eliminar" /> | <%: Html.ActionLink("Cancelar", "Index") %> </p> <% } %> </asp:Content> Crear la accin Eliminar para confirmar la eliminacin. [HttpPost] public ActionResult Eliminar(int id, string confirmar) { //buscar el objeto en la BD var programaeducativo = BD.ProgramaEducativo.Where(p => p.IdPE == id).FirstOrDefault(); //si el registro existe, eliminarlo if (programaeducativo != null) { BD.DeleteObject(programaeducativo); BD.SaveChanges(); return View("Eliminado"); } else return View("Error"); } Al ser invocada la accin Eliminar por medio de una peticin POST, buscar el objeto, lo eliminar de la BD, guardar los cambios y mostrar una vista de confirmacin, si se produce un error, mostrar la vista de error. Cree una nueva vista llamada Eliminado:
Img. 11. Crear vista llamada "Eliminado", para utilizar como confirmacin.
Pgina 26 de 117
Agregue el mensaje correspondiente a la nueva vista: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Programa Educativo Eliminado </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>El programa educativo ha sido eliminado.</h2> <%: Html.ActionLink("Volver a la lista de programas educativos", "Index") %> </asp:Content> Modifiquemos ahora los enlaces en la lista de programas educativos para que el link Delete apunte a la nueva accin Eliminar. <%: Html.ActionLink(Delete, Delete, new { id=item.IdPE })%> quedara como <%: Html.ActionLink(Eliminar, Eliminar, new { id=item.IdPE })%> Elimine el link <%: Html.ActionLink(Details, Details, new { id=item.IdPE })%> ya que no lo implementaremos. Implementar una accin Detalles implica mostrar todos los detalles correspondientes para cada PE como datos estadsticos: cuatrimestres, alumnos en total, grupos, etc. Terminada nuestra accin Eliminar y los links correspondientes, ahora comprobemos que ya puede eliminar.
Img. 12. Lista de PE's con el link Eliminar.
Pgina 27 de 117
Img. 13. Confirmar la eliminacin.
Img. 14. Notificacin del registro eliminado.
Pgina 28 de 117
Img. 15. Lista de PEs despus de eliminar el registro. Despus de implementar estas acciones y verificar que funcionen, aqu termina esta parte, en la siguiente entrega iremos agregando cuatrimestres a los PEs. Aplicacin web con ASP.NET MVC 2 parte 5
Img. 1. Resultado final de este avance. Continuando con el desarrollo de nuestra aplicacin ASP.NET MVC 2, seguiremos trabajando con el AdministrarPEController donde agregaremos un poco ms de funcionalidad, para ello se plantea lo siguiente:
Pgina 29 de 117
El Index de AdministrarPEController muestra la lista de PEs, donde ahora queremos que al dar clic en un PE (por ahora no tienen link) nos lleve a ver sus cuatrimestres considerando solo mostrar los cuatrimestres del ao actual; por ejemplo: estamos en el 2011, cuando entremos a ver los cuatrimestres, solo nos muestre los del 2011, si an no se han creado, nos permita hacerlo pero evitar que se creen cuatrimestres duplicados (son solo 3 por ao y cada uno tiene definido su periodo), adems nos permita ver el historial de cuatrimestres del PE, por ejemplo ver la lista de cuatrimestres del ao pasado y as poder ingresar al historial (ms adelante ser el historial de grupos). Si se hacen pelotas, imaginen como podramos saber cuantos grupos tiene el PE TIC-SI (TSU) en el cuatrimestre septiembre-diciembre del 2011, cuantos tuvo en el cuatrimestre mayo-agosto 2011, y cuantos tuvo en el cuatrimestre eneroabril2011, para saberlo hay que revisar el historian No?, y si quisiramos saber cuantos tuvo en los cuatrimestres del ao 2010?, solo debemos imaginarlo y pensar en como le daramos solucin. Entonces a trabajar, de aqu en adelante solo ir agregando las partes del cdigo y una breve explicacin, puesto que ya se familiarizaron con el controlador, las acciones, las vistas, los ActionLink, las consultas LINQ y expresiones LAMBDA. A partir de aqu empezaremos a utilizar CSS y JQuery para realizar consultas AJAX junto con JSON, as que si tambin no estamos familiarizados (por lo menos tener la idea de que se esta haciendo o de que se trata) entonces es necesario consultar http://jquery.com/ y http://www.json.org/ La accin ProgramaEducativo. Ser la encargada de mostrar los cuatrimestres del ao actual de cada PE, permitir agregar nuevos cuatrimestres y eliminar cuatrimestres siempre y cuando no tengan ningn grupo asociado, la vista permitir visualizar la lista de cuatrimestres de aos anteriores. // GET: /AdministrarPE/ProgramaEducativo public ActionResult ProgramaEducativo(int id) { //buscar primero el programa educativo var programaeducativo id).FirstOrDefault(); = BD.ProgramaEducativo.Where(p => p.IdPE ==
//si existe el PE, cargar sus cuatrimestres if (programaeducativo != null) { //buscar los cuatrimestres del ao actual para el ID del PE seleccionado var cuatrimestresPE = BD.Cuatrimestre.Where(c => c.IdPE == id && c.Anio == DateTime.Now.Year); //pasar a la vista el ID del PE y el nombre del PE por medio de ViewData //ya que solo admite un objeto o coleccin de objetos (los datos llamados Modelo) ViewData["IdPE"] = programaeducativo.IdPE; ViewData["NombrePE"] = programaeducativo.Nombre; //pasar la lista de cuatrimestres a la vista, si no hay ningno, la lista aparecer vacia. return View(cuatrimestresPE.ToList()); } else //si no existe, devolver la vista Error. return View("Error"); } Creemos la vista tipada para la clase Cuatrimestre con contenido List.
Pgina 30 de 117
Img. 2. Crear vista tipada para mostrar la lista de cuatrimestres del PE. Modifiquemos parte del cdigo de la vista para mostrar los textos deseados, la tabla de cuatrimestres solo debe mostrar el Id del cuatrimestre, un campo Periodo (conformado por Inicio, Fin y Ao), eliminaremos el link de Edit y Details. Al parecer el campo Nombre sale sobrando, as que ve al diseo de la tabla, puedes eliminarlo de la tabla y actualizar el modelo (recuerda hacerlo tambin en la BD vaca que tenemos de respaldo para que junto con al de prueba sean iguales). Esta vista tambin ya contiene el form para crear un nuevo cuatrimestre (estar oculto) donde los textbox son de solo lectura, en tiempo de ejecucin los llenaremos con JavaScript, incluye tambin la tabla del historial (tambin aparcerer oculta). <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Cuatrimestres del Programa Educativo </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"> </script> <script src="../../Content/Scripts/cuatrimestres.js" type="text/javascript"></script> <h2>Programa Educativo: <%: ViewData["NombrePE"] %></h2>
Pgina 31 de 117
<h4>Cuatrimestres del ao <%: DateTime.Now.Year %></h4> <% //Mostrar el form para crear un nuevo cuatrimestre (deber aparecer oculto) %> <p> <a href="#" id="crearnuevocuatrimestre">Crear nuevo cuatrimestre</a>. </p> <div id="crearcuatrimestre" class="oculto"> <fieldset> <legend>Crear cuatrimestre</legend> <form id="datoscuatrimestre" action="/AdministrarPE/NuevoCuatrimestre/<%: ViewData["IdPE"] %>" method="post"> <input type="radio" value="1" id="cuatrimestre1" name="ncuatrimestre"/><label>Enero - Abril</label><br /> <input type="radio" value="2" id="cuatrimestre2" name="ncuatrimestre"/><label>Mayo - Agosto</label><br /> <input type="radio" value="3" id="cuatrimestre3" name="ncuatrimestre"/><label>Septiembre - Diciembre</label><br /> <div class="editor-label"> <label for="PeriodoInicio">Inicio</label> </div> <div class="editor-field"> <input id="PeriodoInicio" name="PeriodoInicio" type="text" value="" readonly="readonly"/> </div> <div class="editor-label"> <label for="PeriodoFin">Fin</label> </div> <div class="editor-field"> <input id="PeriodoFin" name="PeriodoFin" type="text" value="" readonly="readonly"/> </div> <div class="editor-label"> <label for="Anio">Ao</label> </div> <div class="editor-field"> <input id="Anio" name="Anio" type="text" value="<%: DateTime.Now.Year %>" readonly="readonly"/> </div> <input type="hidden" id="IdPE" name="IdPE" value="<%: ViewData["IdPE"] %>" /> <p> <input type="submit" id="EnviarForm" value="Registrar cuatrimestre" /> | <a href="#" id="cancelarcrearcuatrimestre">Cancelar</a>. </p> <div id="mensaje"></div> </form> </fieldset> </div> <% //FIN Mostrar el form para crear un nuevo cuatrimestre. %>
Pgina 32 de 117
<% //Tabla de cuatrimestres del PE, aparece visible %> <table> <tr> <th></th> <th> Id </th> <th> Periodo </th> <th> Ao </th> </tr> <% foreach (var item in Model) { %> <tr> <td> <%: Html.ActionLink("Eliminar", "Delete", new { id=item.Id })%> </td> <td> <%: item.Id %> </td> <td> <%: item.PeriodoInicio + " - " + item.PeriodoFin %> </td> <td> <%: item.Anio %> </td> </tr> <% } %> </table> <% //FIN Tabla de cuatrimestres del PE. %> <% //Aqu ir el historial de cuatrimestres, deber aparecer oculto %> <p> <a href="#" id="mostrarh">Historial del programa educativo</a> </p> <div id="historial" class="oculto"> <table id="historialtbl"> <tr> <th> Id </th> <th> Periodo </th> <th> Ao </th> </tr> </table> </div>
Pgina 33 de 117
</asp:Content> Ejecutando nuestra app, y accediendo http://localhost:2958/AdministrarPE/programaeducativo/1 tenemos el resultado: nuestra nueva accin
Img. 3. Vista previa de la vista ProgramaEducativo/N Creemos nuestro CSS Abre tu editor de textos favorito, guarda tu nuevo archivo como misestilos.css en la carpeta Content de tu proyecto (busca tu carpeta de proyecto en el explorador de windows), el contenido del archivo es: .oculto{
Pgina 34 de 117
display:none; } Ahora incluyamos nuestro archivo en la plantilla, ve a Views/Shared/ y abre Site.Master, y agrega la linea correspondiente para que se incluya tu nuevo css. <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> <link href="../../Content/misestilos.css" rel="stylesheet" type="text/css" /> Ve al navegador y actualiza la pgina, veremos que nuestros elementos ocultos y estan ocultos
Img. 4. Elementos ocultos en la vista. Creemos nuestros JavaScripts Ahora utilizaremos JQuery, las aplicaciones ASP.NET MVC 2 ya incluyen la versin 1.4.1, actualmente est disponible la versin 1.6.4, puedes descargarla y actualizar tus JS. Bien, entonces en tu editor de textos creemos un nuevo archivo y lo guardaremos en la carpeta Content/Scripts de nuestra aplicacin, el archivo le llamaremos cuatrimestres.js ya que si la guardamos en la carpeta Scripts de la app donde estan los jquery y otros js no nos permitir utilizar nuestro propio js. En el explorador de soluciones mostremos los archivos ocultos e incluyamos en el proyecto el archivo misestilos.css y la carpeta Scripts. Donde agregaremos todo lo necesario para mostrar los elementos ocultos, crear el nuevo cuatrimestre y cargar el historial de cuatrimestres del PE. Entonces el contenido del nuevo archivo de javascript es:
Pgina 35 de 117
//nueva funcion para resetear elementos de un form jQuery.fn.reset = function () { $(this).each (function() { this.reset(); }); } //Al hacer clic sobre el link "Crear nuevo cuatrimestre" //mostrar form $("#crearnuevocuatrimestre").live("click", function(event){ //recuperar la lista de cuatrimestres existentes //desactivar los radiobutton de los cuatrimestres ya existentes var url ="/AdministrarPE/CuatrimestresDelPE/"+$("#IdPE").val(); //hacer la llamada JSON $.getJSON(url, function(data) { $.each(data, function(i, item) { //verificar cuales cuatrimestres ya existen //si existen deshabilitar el radiobutton correspondiente if(data.c1== true) $("#cuatrimestre1").attr("disabled","disabled"); if(data.c2== true) $("#cuatrimestre2").attr("disabled","disabled"); if(data.c3== true) $("#cuatrimestre3").attr("disabled","disabled"); }); }); $("#crearcuatrimestre").show("slow"); //event.preventDefault(); //ocultar el link $("#crearnuevocuatrimestre").hide(); }); //Al hacer clic sobre el Cancelar para "Crear nuevo cuatrimestre" //resetear y ocultar el form $("#cancelarcrearcuatrimestre").live("click", function(event){ //resetear el form $("#datoscuatrimestre").reset(); $("#mensaje").html(""); $("#crearcuatrimestre").hide("slow"); //mostrar el link $("#crearnuevocuatrimestre").show(); }); //al hacer clic sobre un radiobutton, llenar //los txt del cuatrimestre con los datos correspondientes $("#cuatrimestre1").live("click", function(event){ $("#PeriodoInicio").val("Enero"); $("#PeriodoFin").val("Abril"); }); $("#cuatrimestre2").live("click", function(event){ $("#PeriodoInicio").val("Mayo"); $("#PeriodoFin").val("Agosto");
Pgina 36 de 117
}); $("#cuatrimestre3").live("click", function(event){ $("#PeriodoInicio").val("Septiembre"); $("#PeriodoFin").val("Diciembre"); }); //al hacer clic en el botn Registrar cuatrimestre $("#EnviarForm").live("click", function(event){ event.preventDefault(); $("#mensaje").html(""); if($("#PeriodoInicio").val() == "" || $("#PeriodoFin").val() == "") { $("#mensaje").html("No se puede crear el cuatrimestre, seleccione el cuatrimestre a crear.<br>Si el cuatrimestre a crear está deshabilitado, es porque ya existe."); return; }else $("#datoscuatrimestre").submit(); }); La accin que responde con JSON En el JS al hacer clic sobre el link Crear nuevo cuatrimestre, primero obtiene la lista de cuatrimestres actuales, de los cuales si alguno ya existe, deshabilita el radiobutton correspondiente para evitar que vuelva a crearse el mismo cuatrimestre. Para esto hace una llamada AJAX que como resultado obtiene un conjunto de datos con formato JSON los cuales son el resultado de invocar a una accin en el controlador, la accin es la siguiente: //Respuesta a la accin invocada por AJAX-JSON //La accin devuelve un resultado JSON //que es la lista de cuatrimestres ya registrados para el PE [ActionName("CuatrimestresDelPE")] public JsonResult CuatrimestresDelPE(int id) { //buscar los cuatrimestres del ao actual para el PE var cuatrimestresPE = BD.Cuatrimestre.Where(c => c.IdPE == id && c.Anio == DateTime.Now.Year); //variables auxiliares para almacenar nuestros cuatrimestres bool c1= false; bool c2 = false; bool c3 = false; //recorrer la lista foreach(Cuatrimestre cuatrimestre in cuatrimestresPE) { if(cuatrimestre.PeriodoInicio.Trim() == "Enero" && cuatrimestre.PeriodoFin.Trim() == "Abril") c1=true; if(cuatrimestre.PeriodoInicio.Trim() == "Mayo" && cuatrimestre.PeriodoFin.Trim() == "Agosto") c2=true; if(cuatrimestre.PeriodoInicio.Trim() == "Septiembre" && cuatrimestre.PeriodoFin.Trim() == "Diciembre") c3=true; }
Pgina 37 de 117
//Creamos el resultado JSON //donde indicamos los cuatrimestres y si estos existen return this.Json(new { c1 = c1, c2 = c2, c3 = c3}, JsonRequestBehavior.AllowGet); } La accin que registrar el Cuatrimestre. [HttpPost] public ActionResult NuevoCuatrimestre(Cuatrimestre cuatrimestre) { BD.AddToCuatrimestre(cuatrimestre); BD.SaveChanges(); //agregado el registro (objeto), redireccionar los cuatrimestres del PE. return Redirect("../ProgramaEducativo/"+cuatrimestre.IdPE); }
Antes de comprobar que funcione nuestra app, probaremos con agregar algunos Cuatrimestres como historial en nuestra tabla.
Img. 5. Registrar algunos datos histricos. Comprobando funcionalidad Ya con los datos, ahora comprobemos que nuestra app puede agregar nuevos cuatrimestres.
Pgina 38 de 117
Img. 6. Intentando crear registro sin seleccionar cuatrimestre (no lo permite).
Pgina 39 de 117
Img. 7. Registrar el cuatrimestre seleccionado.
Img. 8. Cuatrimestre creado, verificando que no permita volver a crearlo.
Pgina 40 de 117
Y bien, hasta aqu ya funciona nuestra app, pero an falta la parte del historial. Agregue los link en la vista Index para que al hacer clic sobre el nombre de un PE lo dirija hacia sus cuatrimestres (el trabajo realizado). Aplicacin web con ASP.NET MVC 2 parte 6 Continuando con el controlador AdministrarPE implementaremos la parte de mostrar el historial de cuatrimestres para el PE seleccionado. La accin HistorialPE (JsonResult) Se encargar de devolver la lista de cuatrimestres de los aos anteriores al actual en un tipo de datos JSON, la cual ser invocada con JQuery al hacer clic sobre el link Mostrar historial. Dada la situacin de que la lista de cuatrimestres proveniente de nuestra base de datos no la podemos transformar a JSON, debemos crearnos una clase auxiliar llamada AuxCuatrimestre, esta clase debemos crearla en la carpeta Models, el cdigo para esta clase es: namespace EscuelaWebApp.Models { public class AuxCuatrimestre { private int id; private string periodo; private int anio; public int Id { get { return id; } set { id = value; } } public string Periodo { get { return periodo; } set { periodo = value; } } public int Anio { get { return anio; } set { anio = value; } } } } Ahora, el cdigo de nuestra accin HistorialPE que devuelve JSON es: [ActionName("HistorialPE")] public JsonResult HistorialPE(int id) { var cuatrimestres = BD.Cuatrimestre.Where(c => c.IdPE == id && c.Anio < DateTime.Now.Year).ToList();
Pgina 41 de 117
List<AuxCuatrimestre> historial = new List<AuxCuatrimestre>(); foreach (Cuatrimestre cuatrimestre in cuatrimestres) historial.Add( new AuxCuatrimestre { Id = cuatrimestre.Id, Periodo = cuatrimestre.PeriodoInicio.Trim() + " - " + cuatrimestre.PeriodoFin.Trim(), Anio = cuatrimestre.Anio }); return this.Json(historial, JsonRequestBehavior.AllowGet); } Editar el archivo cuatrimestres.js Complementemos el JS para que al hacer clic en Mostrar historial, realice la consulta JSON y cargue en tiempo de ejecucin los cuatrimestres en la tabla correspondiente. Entonces a nuestro JS le agregamos: //Cuando de clic sobre MostrarHistorial var historialcargado=false; $("#mostrarh").live("click", function(event){ //comprobar ya se ha cargado el historial if(historialcargado==false) { //cargar el historial con JSON var url ="/AdministrarPE/HistorialPE/"+$("#IdPE").val(); //hacer la llamada JSON $.getJSON(url, function(data) { $.each(data, function(i, item) { //agregar los datos a la tabla "historialtbl" var fila= "<tr><td>"+item.Id+"</td>" +"<td>"+item.Periodo+"</td>"+"<td>"+item.Anio+"</td></tr>"; $("#historialtbl").append(fila); }); historialcargado=true; }); } //mostrar el historial $("#historial").slideToggle("slow"); }); Verifiquemos que funcione.
Pgina 42 de 117
Img. 1. Mostrando el historial. Mostrar el historial ahora esta funcionando, continuemos ahora con la parte de eliminar cuatrimestres. Eliminar cuatrimestres. Creemos la accin correspondiente. // GET: /AdministrarPE/EliminarCuatrimestre public ActionResult EliminarCuatrimestre(int id) { //buscar el cuatrimestre var cuatrimestre = BD.Cuatrimestre.Where(c => c.Id == id).FirstOrDefault(); //si el cuatrimestre existe if (cuatrimestre != null) { //comprobar que el cuatrimestre no tenga ningn grupo creado if (cuatrimestre.Grupo.Count == 0) { //pasar el cuatrimestre a la vista para eliminarlo return View(cuatrimestre); } else { //si tiene grupos, mostrar una notificacin con otra vista return View("ErrorEliminar"); } } else return View("Error"); //si no existe } Antes de crear la vista correspondiente, modifiquemos la vista ProgramaEducativo para que el link eliminar nos lleve a la accin EliminarCuatrimestre: actualmente el link se crea con <%: Html.ActionLink(Eliminar, Delete, new { id=item.Id })%> modificado quedara: <%
Pgina 43 de 117
//solo si el cuatrimestre no tiene ningn grupo, mostrar el link if(item.Grupo.Count == 0) { %> <%: Html.ActionLink("Eliminar", "EliminarCuatrimestre", new { id = item.Id }) %> <% } %> Ahora s, creemos la vista EliminarCuatrimestre:
Img. 2. Crear la vista EliminarCuatrimestre. Modifiquemos el cdigo de la vista: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Eliminar Cuatrimestre </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Eliminar Cuatrimestre</h2>
Pgina 44 de 117
<h3>Est seguro de eliminar el cuatrimestre?</h3> <fieldset> <legend>Datos</legend> <div class="display-label"><strong>Id</strong>:</div> <div class="display-field"><%: Model.Id %></div> <div class="display-label"><strong>Programa educativo</strong>:</div> <div class="display-field"><%: Model.ProgramaEducativo.Nombre %></div> <div class="display-label"><strong>Inicio de periodo</strong>:</div> <div class="display-field"><%: Model.PeriodoInicio %></div> <div class="display-label"><strong>Fin de periodo</strong>:</div> <div class="display-field"><%: Model.PeriodoFin %></div> <div class="display-label"><strong>Ao</strong>:</div> <div class="display-field"><%: Model.Anio %></div> </fieldset> <% using (Html.BeginForm()) { %> <p> <input type="submit" value="Eliminar" /> | <%: Html.ActionLink("Cancelar", "ProgramaEducativo", new { id = Model.IdPE })%> </p> <% } %> </asp:Content> En el caso que el cuatrimestre a eliminar ya tiene grupos, no puede eliminarse, para notificarlo al usuario lo haremos con otra vista, as que creemos una nueva vista llamada ErrorEliminar, la vista es tipada de la clase Cuatrimestre con contenido Empty.
Pgina 45 de 117
Img. 3. Crear la vista ErrorEliminar. El cdigo para nuestra vista ser: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Eliminar cuatrimestre. </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>No se puede eliminar el cuatrimestre.</h2> <p><b>El cuatrimestre que est intentando eliminar actualmente tiene grupos asignados.</b></p> <fieldset> <legend>Datos del cuatrimestre</legend> <div class="display-label"><strong>Id</strong>:</div> <div class="display-field"><%: Model.Id %></div> <div class="display-label"><strong>Programa educativo</strong>:</div> <div class="display-field"><%: Model.ProgramaEducativo.Nombre %></div>
Pgina 46 de 117
<div class="display-label"><strong>Grupos asociados</strong>:</div> <div class="display-field"><%: Model.Grupo.Count %></div> <div class="display-label"><strong>Inicio de periodo</strong>:</div> <div class="display-field"><%: Model.PeriodoInicio %></div> <div class="display-label"><strong>Fin de periodo</strong>:</div> <div class="display-field"><%: Model.PeriodoFin %></div> <div class="display-label"><strong>Ao</strong>:</div> <div class="display-field"><%: Model.Anio %></div> </fieldset> <%: Html.ActionLink("OK, y entend", "ProgramaEducativo", new { id = Model.IdPE })%> </asp:Content>
Confirmar la eliminacin. Como en el ejemplo de eliminar PE, ahora creemos la accin de confirmacin para eliminar el cuatrimestre. [HttpPost] public ActionResult EliminarCuatrimestre(int id, string confirmar) { //buscar el objeto en la BD var cuatrimestre = BD.Cuatrimestre.Where(c => c.Id == id).FirstOrDefault(); //si el registro existe, eliminarlo if (cuatrimestre != null) { ViewData["IdPE"] = cuatrimestre.IdPE; BD.DeleteObject(cuatrimestre); BD.SaveChanges(); return View("CuatrimestreEliminado"); } else return View("Error"); } Creemos la vista CuatrimestreEliminado.
Pgina 47 de 117
Img. 4. Crear vista CuatrimestreEliminado. Su cdigo: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Cuatrimestre Eliminado </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>El cuatrimestre ha sido eliminado.</h2> <%: Html.ActionLink("Volver al programa educativo", "ProgramaEducativo", new { id = ViewData["IdPE"] }) %> </asp:Content> Comprobando funcionalidad. Ejecutando nuestra aplicacin, ingresemos a los cuatrimestres del PE de prueba.
Pgina 48 de 117
Img. 5. Intentar eliminar un cuatrimestre. Si fuera el caso que el cuatrimestre tiene grupos asignados nos mostrar:
Img. 6. Cuando un cuatrimestre tiene grupos.
Pgina 49 de 117
Pero cuando un cuatrimestre no tiene grupos:
Img. 7. Confirmar la eliminacin del cuatrimestre.
Img. 8. Cuatrimestre eliminado.
Pgina 50 de 117
Regresando al PE:
Img. 9. Cuatrimestres del PE. Bien, pues hasta aqu terminamos la parte de los cuatrimestres, continuaremos con la gestin de grupos para cada cuatrimestre. Aplicacin web con ASP.NET MVC 2 parte 7 El avance que hasta ahora tenemos es que podemos ver nuestros PE, agregarles cuatrimestres y ver el historial de cuatrimestres. Lo que haremos ahora ser implementar un controlador que nos permita administrar los registros de tutores y poder filtrarlos por PE. El resultado final a obtener en esta parte 7 es:
Img. 1. Resultado a obtener al finalizar esta parte.
Pgina 51 de 117
Como ya estamos familiarizados con la parte de crear vistas tipadas, iremos avanzando un poco ms rpido, solo que a nuestra vista principal le agregaremos un ComboBox ms para realizar los filtros. Agregaremos tambin una clase personalizada para usarla en nuestra vista que muestre la lista. Creemos el controlador AdministrarTutores:
Img. 2. Crear el nuevo controlador. Agreguemos la ActionResult llamada Index(), que reciba un parmetro del tipo int inicializado en cero 0, Porqu?, porque en el caso de invocar a AdministrarTutores que nos muestre la lista de todos los tutores registrados (sin filtro), pero cuando invoquemos a AdministrarTutores?idpe=N especificando el parmetro y su valor significa que estamos indicando que nos muestre los tutores del PE indicado. Entonces nuestro controlador ir quedando como: public class AdministrarTutoresController : Controller { BDEscolarEntities BD = new BDEscolarEntities(); // // GET: /AdministrarTutores/ public ActionResult Index(int idpe=0) { if (idpe == 0) { ViewData["NombrePE"] = "Todos los programas educativos"; var tutores = BD.Tutor.ToList(); return View(tutores); } else { ProgramaEducativo pe = BD.ProgramaEducativo.Where(p => p.IdPE idpe).FirstOrDefault(); if (pe != null) { ViewData["NombrePE"] = pe.Nombre; var tutores = BD.Tutor.Where(p => p.ProgramaEducativo.IdPE pe.IdPE).ToList();
==
==
Pgina 52 de 117
return View(tutores); } else return View("Error"); } } } Crear la vista Index (para mostrar una lista de tutores):
Img. 3. Crear vista para mostrar la lista de tutores. Hagamos algunas modificaciones a la vista como: ttulo, mostrar nombre del programa educativo mostrado, mostrar el programa educativo de cada tutor, modificar el link para registrar un nuevo tutor, etc. <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Administrar Tutores </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Tutores del programa educativo: <%: ViewData["NombrePE"] %></h2>
Pgina 53 de 117
<table> <tr> <th></th> <th> Id </th> <th> Nombre </th> <th> Apellidos </th> <th> Programa Educativo </th> </tr> <% foreach (var item in Model) { %> <tr> <td> <%: Html.ActionLink("Edit", "Edit", new { id=item.IdTutor }) %> | <%: Html.ActionLink("Details", "Details", new { id=item.IdTutor })%> | <%: </td> <td> <%: </td> <td> <%: </td> <td> <%: </td> <td> <%: </td> </tr> <% } %> </table> <p> <%: Html.ActionLink("Registrar nuevo tutor", "Registrar") %> </p> </asp:Content> Como tenemos ya algunos PE registrados, agreguemos ahora 2 registros a la tabla tutores. Html.ActionLink("Delete", "Delete", new { id=item.IdTutor })%> item.IdTutor %> item.Nombre %> item.Apellidos %> item.ProgramaEducativo.NombreCorto%>
Pgina 54 de 117
Img. 4. Agregar tutores manualmente. Recuerde que como nuestra tabla Tutor esta relacionada por Tutor.IdPE a ProgramaEducativo.IdPE debemos especificar un valor de clave primaria vlido para nuestro campo Tutor.IdPE, como en nuestro ejemplo el PE con IdPE=1 es TIC-SI y el PE con IdPE=2 es Admon, estamos agregando un tutor para cada uno de los programas educativos. Agregados nuestros registros, ejecutemos nuestra aplicacin para ver nuestro resultado.
Img. 5. Lista de todos los tutores. Especificando el parmetro para filtrar por programa educativo.
Pgina 55 de 117
Img. 6. Tutores filtrados por Id del programa educativo.
Registrar nuevos tutores. En la vista correspondiente al mostrar el formulario para registrar el nuevo tutor, debemos mostrar la lista de programas educativos para seleccionar al que forma parte el nuevo tutor. La accin Registrar. // // GET: /AdministrarTutores/Registrar public ActionResult Registrar() { //Preparar lista de los programas educativos var programaseduc = BD.ProgramaEducativo.ToList(); //Pasar la lista de pe's a la vista ViewData["ProgramasEducativos"] = programaseduc; //crear un nuevo objeto de la clase tutor //para poder asociarlo con el combo a mostrar en el formulario Tutor nuevotutor = new Tutor(); //pasar el objeto nuevotutor a la vista return View(nuevotutor); } Crear la vista.
Pgina 56 de 117
Img. 7. Crear la vista Registrar. Modificado el cdigo de la vista para que muestre el combo de programas educativos queda de esta forma: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Registrar nuevo tutor </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Registrar nuevo tutor.</h2> <% using (Html.BeginForm()) {%> <%: Html.ValidationSummary(true) %> <fieldset> <legend>Datos del tutor</legend> <% // eliminamos el div donde se muestra el txt para IdTutor %> <div class="editor-label"> <%: Html.LabelFor(model => model.Nombre) %>
Pgina 57 de 117
</div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.Nombre) %> <%: Html.ValidationMessageFor(model => model.Nombre) %> </div> <div class="editor-label"> <%: Html.LabelFor(model => model.Apellidos) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.Apellidos) %> <%: Html.ValidationMessageFor(model => model.Apellidos) %> </div> <div class="editor-label"> <%// eliminar Html.LabelFor(model => model.IdPE) %> Programa Educativo. </div> <div class="editor-field"> <% // reemplazar Html.TextBoxFor(model => model.IdPE) por el Html.DropDownList %> <% // Esto nos crea un combobox mostrando el nombre corto del pe como texto // y el IdPE como name y value del combo. // y esta sociado a la propiedad IdPE del tutor. %> <%: Html.DropDownList("IdPE", new SelectList(ViewData["ProgramasEducativos"] as IEnumerable, "IdPE", "NombreCorto", Model.IdPE))%> <%: Html.ValidationMessageFor(model => model.IdPE) %> </div> <p> <br /> <input type="submit" value="Guardar" /> </p> </fieldset> <% } %> <div> <%: Html.ActionLink("Regresar a la lista de tutores", "Index") %> </div> </asp:Content> Ahora verificando la funcionalidad obtenemos:
Pgina 58 de 117
Img. 8. Registrar nuevo tutor mostrando la lista de programas educativos. Registrar el nuevo tutor. Nuestra accin [HttpPost] Registrar se encargar de guardar el nuevo objeto en la BD y redireccionarnos a la lista de tutores del programa educativo al que pertenece el nuevo tutor. // GET: /AdministrarTutores/Registrar [HttpPost] public ActionResult Registrar(Tutor tutor) { //Agregar el nuevo tutor BD.AddToTutor(tutor); //guardar los cambios en la bd BD.SaveChanges(); //redireccionar a la lista de tutores del PE return Redirect("Index?idpe="+tutor.IdPE); }
Probando que nuestra app pueda registrar y redireccionar:
Pgina 59 de 117
Img. 9. Registrando un nuevo tutor.
Img. 10. El tutor ha sido registrado y se ha redireccionado a la lista de tutores del PE.
Pgina 60 de 117
Ahora por su propia cuenta cree las acciones correspondientes para Editar y Eliminar tutores, apyese en el controlador AdministrarPE donde se realiz la implementacin similar, pero en esta ocasin tambin debe mostrar el mismo formulario que se muestra en la vista Registrar, considere tambin que al intentar eliminar el tutor debe comprobarse que no est asignado a algn grupo. El resultado que debe obtener ser como se muestra en la imagen (modificar los links de la vista Index).
Img. 11. La vista Index con links para editar, eliminar y ver la lista completa de tutores.
Img. 12. Editando los datos del tutor.
Pgina 61 de 117
Img. 13. Tutor modificado.
Img. 14. Eliminando un tutor.
Pgina 62 de 117
Entonces la tarea es implementar las acciones comentadas, ahora que si despus de intentarlo nadams no se puede, pues agreguen un comentario para pasarles los fragmentos de cdigo en los que tienen problemas. Aplicacin web con ASP.NET MVC 2 parte 8 :: Validacin de formularios En esta parte del tutorial nos centraremos en realizar las validaciones de los datos en nuestros formularios, de forma que haremos solo un ejemplo y por su parte implementar las validaciones en el resto de los formularios. Trabajaremos en la modificacin de las vistas para Registrar y Editar (ProgramaEducativo) del controlador AdministrarPE donde nuestro resultado ser el siguiente:
Img. 1. Validacin de formularios. Plantillas compartidas. Como nos dimos cuenta al crear vistas para Registrar y Editar es que ambas vistas incluyen los mismos campos en el formulario, excepto por IdPE para Editar; esto es lo mismo con cualquier otras vistas para crear y editar registros. Una de las formas de evitar crear 2 vistas para un mismo fin es crear plantillas compartidas llamadas Editor Template.
Img. 2. Carpeta de plantillas usadas por todos los controladores.
Pgina 63 de 117
En la carpeta Views tenemos otra carpeta llamada Shared donde se almacenarn todas las vistas y plantillas compartidas que podrn ser utilizadas por todos los controladores, para crear nuestros Editor Templates compartidos, debemos agregar una nueva carpeta llama EditorTemplates como se ve en la imagen 2.
. Img. 3. Carpeta para plantillas. Si se requiere crear plantillas que sern utilizadas en un solo controlador, entonces en la carpeta Views/[NombreControlador] debe crearse una carpeta llamada EditorTemplates, en este ejemplo crearemos esta carpeta en Views/AdministrarPE como se ve en la imagen 3. . . Crear la plantilla ProgramaEducativo. Crearemos la plantilla a utilizar para Registrar y Editar un programa educativo, esta ser creada en Views/AdministrarPE/EditorTemplates. Para ello, sobre esta carpeta, con botn derecho seleccionamos Agregar/ Vista. La vista a crear ser un poco diferente a las vistas Registrar y Editar, ya que se est pensando que esta vista ser incluida dentro de las vistas Registrar y Editar, este tipo de plantillas se le define como vista parcial y debe llevar el mismo nombre de la clase correspondiente, en este caso, la clase es ProgramaEducativo. Ya en la ventana para crear vista.
Img. 4. Crear vista parcial ProgramaEducativo.
Pgina 64 de 117
Solo asegrese de seleccionar Crear una vista parcial, en content seleccione Create o Edit. Agregada la vista, le haremos modificaciones al cdigo de forma que solo quede la parte para los campos Nombre y NombreCorto. <div class="editor-label"> <%: Html.LabelFor(model => model.Nombre) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.Nombre) %> <%: Html.ValidationMessageFor(model => model.Nombre) %> </div> <div class="editor-label"> Nombre corto </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.NombreCorto) %> <%: Html.ValidationMessageFor(model => model.NombreCorto) %> </div> Modificar la vista Registrar y Editar. Abra el cdigo de la vista Registrar.aspx y elimine la parte del cdigo que muestra los elementos del formulario (Nombre y NombreCorto), ya que ahora se encuentran en la plantilla, la parte del cdigo modificado en la vista Registrar quedara algo como: <fieldset> <legend>Datos del programa educativo</legend> <%: Html.EditorFor(model => Model) %> <p> <input type="submit" value="Registrar programa educativo" /> </p> </fieldset> Nota: El cdigo resaltado en negrita fue el que reemplazo al cdigo que ahora tenemos en nuestra plantilla ProgramaEducativo.ascx Ejecutemos nuestra app y vayamos a intentar registrar un nuevo programa educativo.
Pgina 65 de 117
Img. 5. Formulario utilizando vista parcial. Ahora haga lo mismo con la parte de cdigo correspondiente en la vista Editar.aspx, la parte modificada quedar de esta forma. <fieldset> <legend>Datos del programa educativo</legend> <%: Html.EditorFor(model => Model) %> <p> <input type="submit" value="Guardar Cambios" /> </p> </fieldset> La validacin de datos del formulario. ASP.NET MVC tiene la ventaja de ofrecernos herramientas y uso fcil para realizar esta tarea, el procedimiento es el siguiente: 1. Crear una clase que se encargue de la validacin de datos (clase parcial de metadatos). 2. Configurar la validacin con MicrosoftAjax en nuestro formulario. 3. Verificar su funcionamiento. Actualmente nuestros formularios tienen un fallo muy importante que debemos considerar, estos no realizan ninguna validacin de los datos que son ingresados en sus campos, las validaciones que debemos considerar son los tipos de datos correctos, ya que de no recibir los datos correctos colapsar la base de datos y de paso la aplicacin. Es fcil agregar la validacin a nuestra aplicacin mediante la adicin de anotaciones de datos para las clases de nuestro modelo. Las anotaciones de datos nos permiten describir las reglas que se desean aplicar a las propiedades de nuestro
Pgina 66 de 117
modelo (clases), y ASP.NET MVC se har cargo de hacerlas cumplir y la visualizacin de los mensajes adecuados a los usuarios. Para una clase simple del modelo, agregando una anotacin de datos es manejada por la instruccin using paraSystem.ComponentModel.DataAnnotation, y a continuacin, colocar los atributos ensus propiedades, de esta forma: using System.ComponentModel.DataAnnotations; namespace Validacion.Models { public class Persona { [Required] public string Nombre { get; set; } [Required] public string Apellidos { get; set; } public int Edad { get; set; } } } El ejemplo anterior ([Required]) hace que los valores para Nombre y Apellidos sean campos obligatorios en nuestros formularios. Utilizacin de clases parciales de metadatos con Entity Framework (MetaData Partial Classes with Data Annotations) para validar datos. Cuando queremos validar los datos al crear un objeto (registro) de alguna clase de nuestro modelo, debemos implementar una clase parcial de la misma (mismo nombre) para no sobrescribir la ya existente en el modelo. Nuestro ejemplo se basa en validar los datos al registrar un nuevo programa educativo, as que en nuestra carpeta Models, agregaremos una nueva clase con el mismo nombre de ProgramaEducativo. En el contenido de nuestra clase declararemos nuestra clase metadata. using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace EscuelaWebApp.Models { [MetadataType(typeof(ProgramaEducativoMetaData))] public partial class ProgramaEducativo { //Reglas de validacin para la clase ProgramaEducativo public class ProgramaEducativoMetaData { //Las reglas van aqu } } }
Pgina 67 de 117
Agregando validaciones (Data Annotations) a nuestro formulario ProgramaEducativo. La clase parcial ProgramaEducativo tiene un atributo llamado MetadataType que apunta a la clase ProgramaEducativoMetaData, en esta ltima declararemos las reglas de validacin a las cuales agregaremos algunos atributos como las anotaciones: Required - Indica que la propiedad es un campo obligatorio. DisplayName - Define el texto que desea utilizar en los campos del formulario y los mensajes de validacin. StringLength - Define una longitud mxima de un campo de tipo cadena. Range - Establece un valor mximo y mnimo para el valor de un campo numrico. Bind - Listas de campos para excluir o incluir en los valores de enlace de parmetros o la forma para modelar las propiedades. ScaffoldColumn - Permite ocultar campos de los formularios editor. Para obtener ms informacin acerca de Data mx/library/system.componentmodel.dataannotations.aspx Annotations, visite el link http://msdn.microsoft.com/es-
Revisa tambin este tutorial http://www.asp.net/mvc/tutorials/validation-with-the-data-annotation-validators-cs ( no digas hay no, est en ingls). Entonces el cdigo completo para nuestra clase parcial ProgramaEducativo queda como: using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace EscuelaWebApp.Models { [MetadataType(typeof(ProgramaEducativoMetaData))] public partial class ProgramaEducativo { //Reglas de validacin para la clase ProgramaEducativo [Bind(Exclude = "IdPE")] //Excluir IdPE de la validacin public class ProgramaEducativoMetaData { //Reglas //El campo IdPE lo configuramos para Scaffold dejando la gestin de su valor al sql server. //el campo ya ha sido excluido en nuestro formulario - plantilla (ProgramaEducativo.ascx) [ScaffoldColumn(false)] public object IdPE { get; set; } [Required(ErrorMessage = "El nombre es obligatorio.")] public object Nombre { get; set; } [Required(ErrorMessage = "El nombre corto es obligatorio.")] [DisplayName("Nombre corto")] //Mostrar "Nombre corto" en NombreCorto. [StringLength(12,ErrorMessage = "El nombre corto debe tener como mximo 12 caracteres.")] public object NombreCorto { get; set; } } } lugar de
Pgina 68 de 117
} Habilitar la validacin con AJAX (Validacin por el lado del cliente). Solo falta modificar nuestra plantilla o formulario ProgramaEducativo.ascx para que pueda realizar la validacin de datos con AJAX, entonces vamos al cdigo de ProgramaEducativo.ascx donde agregamos. <%@ Import Namespace="EscuelaWebApp" %> <%@ Control Inherits="System.Web.Mvc.ViewUserControl<EscuelaWebApp.Models.ProgramaEducativo>" %>
Language="C#"
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script> Nota: La lnea de cdigo tachado es como referencia para saber donde deben agregarse las lineas de cdigo faltantes, ms no debe eliminarse. Los archivos JS deben existir en nuestra carpeta Scripts, sino existen por alguna casualidad, cree otro nuevo proyecto de ASP.NET MVC 2 y copie los scripts desde el nuevo proyecto. Ahora debemos utilizar el mtodo Html.EnableClientValidation helper para habilitar o activar la validacin en nuestros formularios, para esto debemos volver a modificar las vistas Registrar y Editar. Actualmente nuestras vistas en la parte del formulario tienen: <% using (Html.BeginForm()) {%> <%: Html.ValidationSummary(true) %> <fieldset> <legend>... Donde la lnea resaltada en negrita debe eliminarse, y agregar una nueva linea antes del inicio del formulario, al final esta parte del cdigo queda: <% Html.EnableClientValidation(); %> <% using (Html.BeginForm()) {%> <fieldset> <legend>Datos del programa educativo</legend> La lnea resaltada en negrita es la nueva linea agregada para activar la validacin. Ahora comprobemos la validacin, para ello ejecute la aplicacin y vaya a registrar un nuevo programa educativo, sin ingresar ningn datos, haga clic en el botn para crearlo, deben saltar nuestros mensajes de error especificados en nuestra clase parcial ProgramaEducativo.
Pgina 69 de 117
Img. 6. Probando validacin de datos.
Img. 7. Validando formularios.
Pgina 70 de 117
Img. 8. Validando datos de formularios. Y bien, la validacin ha funcionado al ingresar solo algunos valores e ingresando una longitud excedida para un campo. Su labor ahora es implementar la validacin para las vistas Registrar y Editar para la clase Tutor (Controlador AdministrarTutores) y para el resto de las vistas Editar y Registrar que se irn creando debe ir implementando la validacin.
Pgina 71 de 117
Img. 9. Validar datos en Registrar y Editar Tutor. Aplicacin web con ASP.NET MVC 2 Estilos en nuestras tablas Ya que estamos trabajando con vistas con contenido List, estas nos crean tablas que pueden mostrar varios registros y lo tedioso puede ser que al tener unos 30 registros o ms tenemos que desplazar la pgina para ir recorriendo la lista. Una de las soluciones es utilizar CSS para crear un contenedor deslizable en nuestra vista y sin mover la pgina podamos desplazar el contenido de la tabla.
Img. 1. Tabla deslizable en nuestra pgina con CSS.
Pgina 72 de 117
Img. 2. Crear nuevo CSS. Para lograr esto en la carpeta Content de nuestro proyecto (en el explorador de windows) crearemos un nuevo archivo llamado resaltar_tabla.css (despus incluimos nuestro archivo en el proyecto), ahora antes de empezar si no estamos familiarizados con CSS, busquemos en la red algn tutorial ya que sobre CSS hay mucha informacin, uno de los sitios ms ricos en informacin acerca de css es http://www.w3schools.com/css/ El contenido de nuestro archivo resaltar_tabla.css es el siguiente: table tr:hover{ background-color:#F0F3FA; } #lista > table {width:99%} #lista { width:800px; height: 120px; overflow:auto; padding-bottom:3px; } .derecha { text-align:right; } Donde: table tr:hover{ } asignamos un color de fondo a la fila que le estemos pasando puntero del ratn, si desea otro color, utilice algn mezclador de colores para obtener un color deseado, un mezclador de colores en lnea es http://www.colorpicker.com/. #lista > table {99%} en esta linea #lista es el ID de un DIV que agregaremos como contenedor de nuestra tabla; table{99%} estamos indicando que la tabla ocupe el 99% del ancho total de nuestro DIV. #lista { width: 800px; height: 120px; } estamos asignando los estilos a nuestro DIV el cual tendra un ancho de 800 pixeles y un alto de 120 pixeles (el resultado es la img 1), 120px se estableci solo como prueba, debe modificar estos valores de acuerdo a sus necesidades (alto un ancho del contenedor para mostrar la tabla.) .derecha { } es un estilo que alinea el texto a la derecha de cualquier elemento HTML que lo herede. Nota: tenga en cuenta que en la img 1 se aprecia la barra de desplazamiento del DIV porque el alto es solo de 120 px y el alto del contenido de la tabla es mayor a 120px, por lo tanto si al aumentar el alto del DIV y el alto del contenido de la tabla en pixeles es menor que el alto del DIV, la barra de desplazamiento no se mostrar. Antes de utilizar nuestro CSS, nuestra vista Index de AdministrarPE se aprecia de esta forma:
Pgina 73 de 117
Img. 3. Vista original. Agregar el CSS a Site.Master. Abra el cdigo de la plantilla del sitio y agregue la lnea de cdigo correspondiente para utilizar nuestro nuevo archivo CSS. <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> <link href="../../Content/misestilos.css" rel="stylesheet" type="text/css" /> <link href="../../Content/estilo_tabla.css" rel="stylesheet" type="text/css" /> Nota: recuerde que las lineas tachadas ya estn en nuestro archivo y no deben eliminarse. Modificar la vista Index del controlador AdministarPE: Ahora lo que haremos a nuestra vista es agregar el DIV que comentamos y agregar el pie a nuestra tabla. El cdigo de nuestra vista quedar en parte como se muestra en el siguiente cdigo, recuerde que solo vamos a agregar lo que nos hace falta para complementar nuestras funciones, no volveremos a implementar desde cero nuestra vista. El cdigo que ya tenemos est tachado y el resaltado en negrita es el que vamos a agregar. <h2>Lista de programas educativos.</h2> <div id="lista"> <table> <tr> <th></th> <th> Id </th> <th> Nombre </th> <th> Nombre corto </th> </tr> <tfoot> <tr> <th class="derecha">Total</th> <th colspan="3"><%:Model.Count() %> Programas educativos</th> </tr> </tfoot> ... contenido de nuestra tabla (aqu va el foreach que genera las filas.) ... </table>
Pgina 74 de 117
</div> Ahora ejecutemos nuestra aplicacin y vayamos a AdministrarPE y tendremos el resultado:
Img. 4. Resultado final con el nuevo estilo CSS. Observe que al pasar el ratn sobre alguna fila, esta cambia su color de fondo. Ahora haga lo mismo que se hizo con la vista Index.aspx a las vistas que desee mostrar la tabla deslizable en el DIV (vistas con contenido List), solo recuerde que ya no tendr que crear ms archivos CSS y agregarlos, ya que ya se encuentra agregado en nuestro Site.Master, solo agregar el pie a la tabla y el DIV. Vista: Index de AdministrarTutores.
Img. 5. Lista de tutores. Aplicacin web con ASP.NET MVC 2 parte 9 En esta parte de nuestro tutorial, implementaremos la administracin de grupos para nuestros cuatrimestres en un nuevo controlador llamado AdministrarGrupos, en esta parte haremos uso de JQuery para visualizar nuestros registros de grupos por cuatrimestres y programa educativo, posteriormente implementaremos tambin la gestin de alumnos.
Pgina 75 de 117
Img. 1. Resultado de nuestro avance al finalizar esta parte. El nuevo controlador AdministrarGrupos. Agregue el nuevo controlador AdministrarGrupos, cuya accin Index puede recibir un parmetro que ser el Id del cuatrimestre del cual se quieren visualizar sus grupos, sin recibir parmetro mostrar solo la vista vaca (sin ninguna lista), pero ademas debe mostrar controles para alternar la informacin que queremos visualizar; algo similar ya se ha hecho en la accin Index de AdministrarTutores (revise esa parte para entender de que se trata y como funciona).
Img. 2. Agregar nuevo controlador AdministrarGrupos. El cdigo de nuestro controlador empezar con nuestra accin Index (Requiere de ms trabajo, debe analizar el cdigo fuente para entender su funcionamiento): public class AdministrarGruposController : Controller { BDEscolarEntities BD = new BDEscolarEntities(); //
Pgina 76 de 117
// GET: /AdministrarGrupos/ public ActionResult Index(int idcuatrimestre=0) { //Crear la lista de programas educativos para mostrarlos en la vista Index var programaseducativos = BD.ProgramaEducativo.ToList(); programaseducativos.Insert(0, new ProgramaEducativo { IdPE = 0, NombreCorto = "" }); //Pasar la lista de PEs a la vista ViewData["ProgramasEducativos"] = programaseducativos; //Crear parmetros auxiliares para //Id del programa educativo (si se est recibiendo el id de cuatrimestre) //Id del cuatrimestre (si se est recibiendo el id de cuatrimestre) //Nombre del PE (si se est pasando el id de cuatrimestre) //Periodo del cuatrimestre ViewData["IdPE"] = ""; ViewData["IdCuatrimestre"] = ""; ViewData["ProgramaEducativo"] = ""; ViewData["Cuatrimestre"] = " - "; //si no se est especificando el cuatrimestre //crear una lista vacia de la clase Grupo if (idcuatrimestre == 0) { //Crear la lista vaca porque no se mostrar grupos de algn cuatrimestre List<Grupo> grupos = new List<Grupo>(); //pasar la lista vaca a la vista return View(grupos); } else //Si se especifica el cuatrimestre, cargar sus grupos { //Buscar el cuatrimestre indicado //como restriccin, debe ser del ao actual var cuatrimestre = BD.Cuatrimestre.Where(c => c.Id == idcuatrimestre && c.Anio == DateTime.Now.Year).FirstOrDefault(); if (cuatrimestre != null) { //Pasar los datos reales ViewData["IdPE"] = cuatrimestre.IdPE; ViewData["ProgramaEducativo"] = cuatrimestre.ProgramaEducativo.NombreCorto.Trim(); ViewData["IdCuatrimestre"] = cuatrimestre.Id; ViewData["Cuatrimestre"] = cuatrimestre.PeriodoInicio.Trim() + " " + cuatrimestre.PeriodoFin.Trim(); //Pasar la lista de cuatrimestres al que corresponde el indicado //utilizando nuestra clase auxiliar List<AuxCuatrimestre> cuatrimestres = new List<AuxCuatrimestre>(); //Recorrer la lista de cuatrimestres (ordenados a-z) del PE foreach(Cuatrimestre item in cuatrimestre.ProgramaEducativo.Cuatrimestre.Where(c => c.IdPE == cuatrimestre.IdPE && c.Anio== DateTime.Now.Year).OrderBy(c => c.PeriodoInicio))
Pgina 77 de 117
cuatrimestres.Add( new AuxCuatrimestre { Id = item.Id, Periodo = item.PeriodoInicio.Trim() + " - " + item.PeriodoFin.Trim(), Anio = item.Anio}); //Ahora si pasamos nuestra lista de cuatrimestres ViewData["cuatrimestres"] = cuatrimestres; //Y seleccionado return View(cuatrimestre.Grupo.ToList()); } else return View("Error"); } } } La vista Index. Crear la vista tipada para la clase Grupo con contenido List. el dato principal es la lista de grupos del cuatrimestre
Img. 3. Crear vista Index. El cdigo de nuestra vista Index, empieza como a continuacin se muestra, posteriormente se le irn haciendo modificaciones donde se les mostrarn las lineas de cdigo como guas para saber donde hacer los cambios.
Pgina 78 de 117
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Administrar grupos </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Administrar grupos</h2> Filtrar por Programa Educativo: <%: Html.DropDownList("IdPE", new SelectList(ViewData["ProgramasEducativos"] as IEnumerable, "IdPE", "NombreCorto", ViewData["IdPE"]))%> Cuatrimestre: <% // si se tiene la lista de cuatrimestres, crear el combo con sus opciones, sino, crear uno vaco %> <% if (ViewData["cuatrimestres"] != null) { %> <%: Html.DropDownList("IdCuatrimestre", new SelectList(ViewData["cuatrimestres"] as IEnumerable, "Id", "Periodo", ViewData["IdCuatrimestre"]))%> <%} else { %> <select id="IdCuatrimestre" name="IdCuatrimestre"></select> <% } %> <br /><br /> <strong>Programa Educativo</strong>: ViewData["ProgramaEducativo"] %></span>, <strong>Cuatrimestre</strong>: <span ViewData["Cuatrimestre"] %></span>.<br /><br /> <span id="nombrepe"><%:
id="nombrecuatrimestre"><%:
<% // asignamos un ID para nuestra tabla de grupos // porque la manipularemos con JQuery %> <table id="GruposTbl"> <% //Cambia de TR a THEAD la fila del encabezado de la tabla %> <thead> <th></th> <th> Id Grupo </th> <th> Nombre </th> <th> Cuatrimestre </th> <th> Tutor </th> </thead> <% //Agrega la etiqueta TBODY a la tabla //Lo utilizaremos para manipular su contenido %> <tbody> <% foreach (var item in Model) { %>
Pgina 79 de 117
<tr> <td> <%: Html.ActionLink("Editar", "Editar", new { id=item.IdGrupo }) %> | <%: Html.ActionLink("Eliminar", "Eliminar", new { id=item.IdGrupo })%> </td> <td> <%: item.IdGrupo %> </td> <td> <%: item.Nombre %> </td> <td> <% //Cambia el IdCuatrimestre por el periodo del cuatrimestre %> <%: item.Cuatrimestre.PeriodoInicio + " " item.Cuatrimestre.PeriodoFin %> </td> <td> <% //Cambia el IdTutor por el nombre completo del tutor %> <%: item.Tutor.Nombre + " " + item.Tutor.Apellidos%> </td> </tr> <% } %> </tbody> </table> <p id="LinkAltaGrupo"> <%: Html.ActionLink("Create New", "Create") %> </p> </asp:Content> Comprobando la funcionalidad: Al ejecutar nuestra aplicacin y al ingresar a http://localhost:XXXX/AdministrarGrupos nos mostrar nuestra vista como se ve en la imagen.
Pgina 80 de 117
Img. 4. Vista sin especificar el Id del cuatrimestre. Observe que no se est pasando el Id del cuatrimestre del cual se quieren ver sus grupos, razn por la cual la lista aparece vaca (pero tampoco se han creado grupos ), Aparece la lista de PE, y el combo de cuatrimestres aparece vaco, cuando el usuario seleccione un PE, se llenar automticamente el combo de cuatrimestres. Ahora ingresemos a la vista pero especificando el parmetro idcuatrimestre cuyo valor sea un Id de cuatrimestre vlido, cheque sus PEs registrados y vea los ID de alguno de sus cuatrimestres, en mi caso mis ID de cuatrimestres vlidos (ao 2011) son los ID 9 y 10, as que probar con uno de ellos.
Img. 5. Vista que recibe el id del cuatrimestre. Hasta aqu va funcionando correctamente, pero hace falta algo muy importante, el registro de nuevos grupos.
Pgina 81 de 117
Lo que haremos ser, si se ha especificado un Id de cuatrimestre para ver sus grupos, mostraremos el link Registrar grupo, por ahora el link lo tenemos como Create New. As que en la vista Index, reemplace la linea de cdigo (dentro del prrafo con id=LinkAltaGrupo): <%: Html.ActionLink(Create New, Create) %> por: <% if (ViewData["IdCuatrimestre"] != "") { %> <%: Html.ActionLink("Registrar nuevo grupo", "Registrar", new { id = ViewData["IdCuatrimestre"] })%> <% } %>
Ahora verifique que al ingresar en http://localhost:XXXX/AdministrarGrupos no muestre el link, y al especificar el id de cuatrimestre si muestre el link, ej. http://localhost:XXXX/AdministrarGrupos?idcuatrimestre=9. Registrar Grupos. Crearemos la accin Registrar y su vista en la cual el usuario solo tenga que seleccionar los valores (nombre o letra del grupo y Tutor). La accin Registrar. public ActionResult Registrar(int id) { //Verificar que el cuatrimestre para el que se ha de registrar el grupo existe var cuatrimestre = BD.Cuatrimestre.Where(c => c.Id == id).FirstOrDefault(); if (cuatrimestre != null) { //crear un nuevo objeto de la clase Grupo y definir sus datos que tendr por defecto Grupo nuevogrupo = new Grupo(); //asociar el objeto cuatrimestre al grupo nuevogrupo.Cuatrimestre = cuatrimestre; List<AuxTutor> tutores = new List<AuxTutor>(); //crear una lista con la nueva clase auxiliar //transformar nuestra lista de tutores a nuestra nueva lista de la clase AuxTutor //En esta clase solo asignamos el ID y el nombre completo del tutor foreach (Tutor tutor in BD.Tutor.Where(t => t.IdPE == cuatrimestre.IdPE)) tutores.Add(new AuxTutor { Id = tutor.IdTutor, Nombre = tutor.Nombre.Trim() + " " + tutor.Apellidos.Trim() }); //Pasar a la vista la lista cuatrimestre ViewData["Tutores"] = tutores; de tutores del PE al que pertenece el
//pasar nuestro objeto a la vista
Pgina 82 de 117
return View(nuevogrupo); }else return View("Error"); } Observe que en esta accin estamos utilizando otra nueva clase llama AuxTutor en la cual solo le implementamos 2 propiedades, para ello, en la carpeta Models, agregue esta clase: namespace EscuelaWebApp.Models { public class AuxTutor { private int id; private string nombre; public int Id { get { return id; } set { id = value; } } public string Nombre { get { return nombre; } set { nombre = value; } } } }
Crear la vista Registrar:
Pgina 83 de 117
Img. 6. Crear la vista Registrar. En esta vista utilizaremos una nueva vista parcial (plantilla) para no trabajar doble en las vistas Registrar y Editar, el cdigo de nuestra vista Registrar quedar as: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Registrar grupo </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Registrar grupo</h2> <% using (Html.BeginForm()) {%> <%: Html.ValidationSummary(true) %> <fieldset> <legend>Datos del grupo</legend> <p><%:ViewData["Mensaje"] %></p> <%: Html.EditorFor(model => ViewData["Tutores"]) %> <p> <input type="submit" value="Registrar grupo" />
Model,
ViewData["Tutores"]
Pgina 84 de 117
</p> </fieldset> <% } %> <div> <%: Html.ActionLink("Regresar a la lista idcuatrimestre = Model.Cuatrimestre.Id }, null)%> </div> </asp:Content> Crear nuestra vista parcial llamada Grupo.ascx En la carpeta Views/AdministrarGrupos agregue su carpeta EditorTemplates, de la misma forma como se explic en la parte 8 cuando empezamos a trabajar con la validacin de formularios. Ahora a EditorTemplates agregue una nueva vista parcial llamada Grupo: de grupos", "Index", new {
Img. 7. Crear vista parcial Grupo. El cdigo para nuestra vista parcial quedar como este: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EscuelaWebApp.Models.Grupo>" %> <div class="editor-label">
Pgina 85 de 117
Programa educativo </div> <div class="editor-field"> <% // crear un cuadro de texto donde se muestre el nombre del programa educativo como solo lectura %> <input type="text" value="<%: Model.Cuatrimestre.ProgramaEducativo.NombreCorto %>" readonly="readonly" /> </div> <div class="editor-label"> Cuatrimestre </div> <div class="editor-field"> <% // crear nuestro campo IdCuatrimestre // como input Hiden que porte el Id del cuatrimestre (no se puede modificar) // y aparte un cuadro de texto donde se muestre el periodo del cuatrimestre como solo lectura %> <%: Html.HiddenFor(model => model.IdCuatrimestre)%> <input type="text" value="<%: Model.Cuatrimestre.PeriodoInicio + " - " + Model.Cuatrimestre.PeriodoFin %>" readonly="readonly" /> </div> <div class="editor-label"> Nombre del grupo </div> <div class="editor-field"> <% //: Html.TextBoxFor(model => model.Nombre) %> <% // Crear un combo para seleccionar la letra del grupo <select id="Nombre" name="Nombre"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> </select> <%: Html.ValidationMessageFor(model => model.Nombre) %> </div>
%>
<div class="editor-label"> Tutor </div> <div class="editor-field"> <% //: Html.TextBoxFor(model => model.IdTutor) %> <%: Html.DropDownList("IdTutor", new SelectList(ViewData["Tutores"] IEnumerable, "Id", "Nombre"))%> <%: Html.ValidationMessageFor(model => model.IdTutor) %> </div>
as
Puede implementar un mecanismo para gestionar las letras para asignar como nombre del grupo, de forma que pudiera comprobar cuales nombres ya existen y no mostrarlos a usuario para que no pueda seleccionarlo como opcin. Ahora comprobemos la funcionalidad, para ello ingrese ej.http://localhost:XXXX/AdministrarGrupos?idcuatrimestre=9: a ver los grupos de un cuatrimestre,
Pgina 86 de 117
Vemos que tenemos nuestro link para agregar un nuevo grupo a este cuatrimestre.
Img. 8. Ir a registrar nuevo grupo. Ahora al hacer clic sobre Registrar nuevo grupo, tenemos nuestro resultado:
Pgina 87 de 117
Img. 9. Vista registrar grupo. Falta crear nuestra accin Registrar que reciba los datos del formulario y los guarde en la BD. La accin [HttpPost] Registrar queda como: [HttpPost] public ActionResult Registrar(Grupo grupo) { //primero comprobaremos que el nombre del grupo no exista //para el cuatrimestre seleccionado. var comprobargrupo = BD.Grupo.Where(g => g.Nombre.Trim() == grupo.Nombre && g.IdCuatrimestre == grupo.IdCuatrimestre).FirstOrDefault(); //si el grupo NO existe, agregarlo a la BD. if (comprobargrupo == null) { BD.AddToGrupo(grupo); BD.SaveChanges(); //Redireccionar a los grupos del cuatrimestre para el que se cre el grupo return Redirect("..\\Index?idcuatrimestre="+grupo.IdCuatrimestre); } else //Si ya existe el grupo, informarlo a usuario { //volver a recuperar el cuatrimestre para obtener todos sus datos var cuatrimestre = BD.Cuatrimestre.Where(c => c.Id == grupo.IdCuatrimestre).FirstOrDefault(); if (cuatrimestre != null) grupo.Cuatrimestre = cuatrimestre; //reasigar el objeto cuatrimestre al grupo //ViewData["Mensaje"] es recibido por la vista Registrar. ViewData["Mensaje"] = "No se puede registrar el grupo ("+grupo.Nombre +") porque ya existe, elija otra letra a asignar."; //Volver a crear nuestra lista tutores List<AuxTutor> tutores = new List<AuxTutor>(); //transformar nuestra lista de tutores a nuestra nueva clase foreach (Tutor tutor in BD.Tutor.Where(t => t.IdPE grupo.Cuatrimestre.ProgramaEducativo.IdPE)) tutores.Add(new AuxTutor { Id = tutor.IdTutor, Nombre tutor.Nombre.Trim() + " " + tutor.Apellidos.Trim() }); //Pasar a la vista la lista cuatrimestre ViewData["Tutores"] = tutores; de tutores del PE al que pertenece
== = el
//Regresamos nuevamente el objeto grupo a la vista para su modificacin return View(grupo); } Ahora ejecutando nuestra aplicacin al registrar nuestro nuevo grupo, tenemos nuestra accin HttpPost Registrar funcionando.
Pgina 88 de 117
Img. 10. Grupo registrado. Ahora al intentar registrar nuevamente un grupo con la letra o nombre A, nos devuelve la vista con los datos del grupo pero NO registrado.
Img. 11. Intentando registrar el mismo grupo.
Pgina 89 de 117
Notese que para la clase Grupo no es estn validando los datos (no se hace validacin de formulario), lo que se hace es que antes de registrar el grupo se verifica que no exista un grupo con el mismo nombre o letra para el cuatrimestre seleccionado, si ya existe, pasamos un mensaje de error a la vista, pero no esta de ms que por su cuenta implemente la validacin para esta clase y haga que los combos aparezcan vacos para que el usuario elija una opcin. Por su cuenta implemente la acciones Editar y Eliminar, solo considere que para eliminar un grupo debe comprobar que no tenga asignado ningn alumno. Esta parte del tutorial queda hasta aqu para no hacerlo ms largo, en la siguiente parte agregaremos la funcionalidad a los combos Programa educativo y Cuatrimestre para hacer las consultas AJAX y JSON para cambiar el contenido de nuestra tabla de grupos, de esa forma el usuario no tendr que regresar a PEs y seleccionar cuatrimestre para administrar sus grupos. Aplicacin web con ASP.NET MVC 2 parte 10 En la parte 9 de nuestro tutorial empezamos la implementacin de la administracin de grupos, donde comentamos que el contenido de la tabla se modificara al cambiar los combobox para los cuales implementaremos el evento Change() de ambos combobox. Todos los datos solicitados al servidor sern devueltos en formato JSON, para lo cual implementaremos una accin 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 accin que devolver la lista de cuatrimestres del PE seleccionado. [ActionName("CuatrimestresPE")] public JsonResult CuatrimestresPE(int idpe) { //cargar los cuatrimestres del ao 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
Pgina 90 de 117
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 aplicacin e ingrese a la direccin de esta accin y especifique el valor para el parmetro idpe con un valor de clave primaria vlido para algn 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 accin 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) {
Pgina 91 de 117
//agregar IdCuatrimestre"
los
cuatrimestres
al
combo
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 lnea 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.
Pgina 92 de 117
Img. 3. Al seleccionar un combo, se cargan los cuatrimestres en el otro combo. Ahora al seleccionar un cuatrimestre, deben cargarse sus grupos, para ello, agregaremos nuestra accin al controlador. Pero como una lista de alguna entidad de nuestro modelo no puede serializarse porque contiene propiedades de navegacin, 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; } }
Pgina 93 de 117
//implemente ms miembros de esta clase si fueran necesarios } Ahora la accin 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 accin funcione, ingrese a la direccin de la accin, 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 Prez Lpez"}] 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) {
Pgina 94 de 117
//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 grupo</a>"); } }); Ahora ejecute la aplicacin e ingrese en AdministrarGrupos, seleccione un PE y un cuatrimestre. nuevo
Img. 4. Comprobando la funcionalidad. Seleccione un cuatrimestre que tenga ya registrados algunos grupos.
Pgina 95 de 117
Img. 5. Cargando los grupos del cuatrimestre seleccionado. Hasta aqu termina esta parte de administrar grupos, pero an falta la administracin de alumnos. Aplicacin web con ASP.NET MVC 2 parte 11 Despus de un tiempo sin avanzar en el tutorial, hoy continuamos con la parte de gestionar los alumnos de los grupos, donde al estar en los grupos de un determinado cuatrimestre podamos acceder a las listas de alumnos.
Img. 1. Resultado final al terminar esta parte del tutorial. Agregaremos un nuevo controlador llamado AdministrarAlumnos cuya accinn Index muestre las listas cargadas dinmicamente al seleccionar opciones en los combobox, pero antes, agregue el link en cada registros de la tabla en la vista Index de AdministrarGrupos para acceder al nuevo controlador.
Pgina 96 de 117
Img. 2. Agregar link para acceder a los grupos de alumnos. La instruccin para crear el link es: <%: Html.ActionLink(Lista de alumnos, Index, AdministrarAlumnos, new { idgrupo=item.IdGrupo }, null) %>
Crear controlado AdministrarAlumnos:
Img. 3. Controlador AdministrarAlumnos. El cdigo lo iremos agregando poco a poco: namespace EscuelaWebApp.Controllers { public class AdministrarAlumnosController : Controller {
Pgina 97 de 117
BDEscolarEntities BD = new BDEscolarEntities(); // // GET: /AdministrarAlumnos/ public ActionResult Index(int idgrupo=0) { //... return View(); } } } La accin Index: Como en la accin Indes de AdministrarGrupos, esta nueva accin tambin recibe un parmetro ( idgrupo), del cual mostraremos sus alumnos solo si el grupo pertenece al ltimo cuatrimestre, caso contrario, mostraremos un mensaje de error, y si no se recibe un valor para este parmetro, mostraremos la vista vaca. El cdigo de la accin queda como: public ActionResult Index(int idgrupo=0) { //Consideremos que solos se pueden modificar las listas de alumno para el //ltimo cuatrimestre registrado //Crear la lista de programas educativos para mostrarlos en la vista Index var programaseducativos = BD.ProgramaEducativo.ToList(); programaseducativos.Insert(0, new ProgramaEducativo { IdPE = 0, NombreCorto = "" }); //Pasar la lista de PEs a la vista ViewData["ProgramasEducativos"] = programaseducativos; //Crear parmetros auxiliares para //Id del programa educativo (si se est recibiendo el id de grupo) //Id del grupo //Lista de grupos //Nombre del PE //Periodo del cuatrimestre //Nombre o letra del grupo ViewData["IdPE"] = ""; ViewData["Grupos"] = ""; ViewData["IdGrupo"] = ""; ViewData["ProgramaEducativo"] = ""; ViewData["Cuatrimestre"] = " - "; ViewData["Grupo"] = ""; ViewData["Tutor"] = ""; if (idgrupo == 0) { //Crear la lista vaca porque no se mostrar List<Alumno> alumnos = new List<Alumno>(); return View(alumnos); }
ningn alumno.
Pgina 98 de 117
else { //si se esta recibiendo el id del grupo a mostrar var grupo = BD.Grupo.Where(g => g.IdGrupo == idgrupo && g.Cuatrimestre.Anio == DateTime.Now.Year) .FirstOrDefault(); //si existe el grupo if (grupo != null) { //recuperar el ultimo cuatrimestre del mismo PE que el grupo para verificar que el grupo corresponde a este //Septiembre - Diciembre //Mayo - Agosto //Enero - Abril //podemos ordenarlos descendentemente por PeriodoInicio y sacar el primero de la lista var cuatrimestre = BD.Cuatrimestre.Where(c => c.IdPE grupo.Cuatrimestre.IdPE && c.Anio == DateTime.Now.Year).OrderByDescending(g g.PeriodoInicio).FirstOrDefault(); alumnos if (grupo.IdCuatrimestre == cuatrimestre.Id) { //cargar la lista de alumnos del grupo var alumnos = grupo.Alumno.ToList(); //Pasar los datos reales ViewData["IdPE"] = grupo.Cuatrimestre.IdPE; ViewData["Grupos"] = cuatrimestre.Grupo.OrderBy(g => g.Nombre).ToList(); ViewData["IdGrupo"] = grupo.IdGrupo; ViewData["ProgramaEducativo"] = grupo.Cuatrimestre.ProgramaEducativo.NombreCorto.Trim(); ViewData["Cuatrimestre"] = grupo.Cuatrimestre.PeriodoInicio.Trim() + " - " + grupo.Cuatrimestre.PeriodoFin.Trim() + " : " + cuatrimestre.Anio; ViewData["Grupo"] = grupo.Nombre; ViewData["Tutor"] = grupo.Tutor.Nombre.Trim() + " " + grupo.Tutor.Apellidos.Trim(); return View(alumnos); } else { //si el grupo no es del ltimo cuatrimestre, lo informaremos al usuario. ViewData["MensajeError"] = "No se puede modificar la lista de alumnos para el grupo seleccionado. " + " Solo puede modificarse la lista de alumnos del ltimo cuatrimestre, utilice esta vista."; == =>
//si el grupo pertenece al ltimo cuatrimestre podremos ver su lista de
Pgina 99 de 117
//Crear la lista vaca porque no se mostrar List<Alumno> alumnos = new List<Alumno>(); return View(alumnos); } }else return View("Error"); } }
ningn alumno.
La vista Index: La creamos tipada para la clase Alumno con contenido List.
Img. 4. Agregar vista tipada para Alumno. Agregaremos el cdigo para crear nuestros combos para filtar los alumnos de determinado PE, Cuatrimestre y Grupo. <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<EscuelaWebApp.Models.Alumno>>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Administrar listas de alumnos </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
Pgina 100 de 117
<script type="text/javascript"></script>
src="../../Content/Scripts/adminalumnos.js"
<h2>Administrar listas de alumnos</h2> <p id="mensaje" class="error"><%: ViewData["MensajeError"]%></p> Filtrar por Programa Educativo: <%: Html.DropDownList("IdPE", new SelectList(ViewData["ProgramasEducativos"] as IEnumerable, "IdPE", "NombreCorto", ViewData["IdPE"]))%> Cuatrimestre: <input type="text" id="Cuatrimestre" name="Cuatrimestre" readonly="readonly" value="<%: ViewData["Cuatrimestre"]%>"/> Grupo: <% if (ViewData["Grupos"] != null) { %> <%: Html.DropDownList("IdGrupo", new SelectList(ViewData["Grupos"] as IEnumerable, "IdGrupo", "Nombre", ViewData["IdGrupo"]))%> <%} else { %> <select id="IdGrupo" name="IdGrupo"><option>Seleccionar</option></select> <% } %> <br /><br /> <fieldset> <legend>Datos de grupo</legend> <strong>Programa Educativo</strong>: ViewData["ProgramaEducativo"] %></span>, <strong>Cuatrimestre</strong>: <span ViewData["Cuatrimestre"] %></span>, <strong>Grupo</strong>: <span ViewData["Grupo"]%></span>.<br /><br /> <strong>Tutor</strong>: <span id="tutor"><%: /><br /> <span id="nombrepe"><%: id="Cuatrimestre"><%: id="nombregrupo"><%: ViewData["Tutor"]%></span>.<br size="10"
<table id="AlumnosTbl"> <% //Cambia de TR a THEAD la fila del encabezado de la tabla %> <thead> <th></th> <th> Matricula </th> <th> Nombre </th> <th> Apellidos </th> </thead> <% //Agregar la etiqueta TBODY a la tabla
Pgina 101 de 117
//Lo utilizaremos para manipular su contenido %> <tbody> <% foreach (var item in Model) { %> <tr> <td> <%: Html.ActionLink("Editar", "Editar", new { id=item.Matricula }) %> | <%: Html.ActionLink("Eliminar", "Eliminar", new { id=item.Matricula })%> </td> <td> <%: item.Matricula %> </td> <td> <%: item.Nombre %> </td> <td> <%: item.Apellidos %> </td> </tr> <% } %> </tbody> <% // Agregar el pie de la tabla para mostrar los totales %> <tfoot> <tr> <th class="derecha">Total</th> <th colspan="3"><span id="total"><%:Model.Count() %></span>Alumnos</th> </tr> </tfoot> </table> <p id="LinkAltaAlumno"> <% if (ViewData["IdGrupo"] != "") { %> <%: Html.ActionLink("Registrar nuevo alumno "Registrar", new { idgrupo = ViewData["IdGrupo"] }, null)%> <% } %> </p> </asp:Content> </fieldset> en este grupo.",
Las acciones a devolver JSON en el controlador. Nuestro JS llamar a las acciones en el controlador que le devolvern tanto la lista de grupos del ltimo cuatrimestre para el PE seleccionado como la lista de alumnos para el grupo seleccionado, para ello recuerde que no podemos transformar una coleccin de Entities a JSON, por lo tanto crearemos una clase llamada AuxAlumno, ya hemos creado anteriormente otra clase llamada AuxGrupo que tambin se utilizar aqu:
Pgina 102 de 117
La accin Grupos: Esta accin nos devolver la lista de grupos del ltimo cuatrimestre para el PE seleccionado. [ActionName("Grupos")] public JsonResult Grupos(int idpe) { //cargar los grupos del ultimo cuatrimestre del PE seleccionado //primero buscamos el ultimo cuatrimestre de PE var cuatrimestre = BD.Cuatrimestre.Where(c => c.IdPE == idpe && c.Anio == DateTime.Now.Year).OrderByDescending(g => g.PeriodoInicio).FirstOrDefault(); if (cuatrimestre != null) { //ahora obtenemos sus grupos var grupos = cuatrimestre.Grupo.OrderBy(g => g.Nombre).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 = "-", //para no pasar tantos datos que no se usarn Tutor grupo.Tutor.Apellidos.Trim() }); } = grupo.Tutor.Nombre.Trim() + " " +
//Prepara nuestro resultado JSON para que: //envie el periodo del cuatrimestre //Envie la lista de sus grupos return this.Json( new { cuatrimestre = cuatrimestre.PeriodoInicio.Trim() + " - " + cuatrimestre.PeriodoFin.Trim() + " - " + cuatrimestre.Anio, grupos = listagrupos }, JsonRequestBehavior.AllowGet); }else return this.Json(new { msg = "Error al recuperar los grupos del ltimo cuatrimestre del PE seleccionado, " + "compruebe que el PE tiene registrados cuatrimestres y estos tienen grupos."}, JsonRequestBehavior.AllowGet); }
Ejemplos:
Pgina 103 de 117
Para este ejemplo: http://localhost:2958/administraralumnos/grupos?idpe=1 El usuario seleccion el PE con el ID=1 y este es vlido, la accin devolver su ltimo cuatrimestre del ao actual, y devolver tambin la lista de sus grupos, el resultado JSON sera como: { "cuatrimestre":"Septiembre - Diciembre : 2011", "grupos":[{ "Id":1, "Nombre":"A", "Cuatrimestre":"-", "Tutor":"Juan Vicente Prez Lpez" }, { "Id":2, "Nombre":"B", "Cuatrimestre":"-", "Tutor":"Pedro Torres" }] } Otro caso sera, cuando se pasara un Id de parahttp://localhost:2958/administraralumnos/grupos?idpe=20 el resultado ser: {"msg":"Error al seleccionado."} recuperar los grupos del PE no vlido, ejemplo, del PE
ltimo
cuatrimestre
La accin AlumnosGrupo: Esta accin devolver en resultado JSON la lista de alumnos para el PE seleccionado, para ello primero crearemos la clase AuxAlumno de la que se coment ms arriba. La clase AuxAlumno: public class AuxAlumno { private int matricula; private string apellidos; private string nombre; public int Matricula { get { return matricula; } set { matricula = value; } } public string Nombre { get { return nombre; } set { nombre = value; } } public string Apellidos { get { return apellidos; } set { apellidos = value; } }
Pgina 104 de 117
Ahora s, la accin AlumnosGrupo: [ActionName("AlumnosGrupo")] public JsonResult AlumnosGrupo(int idgrupo) { //buscar el grupo var grupo = BD.Grupo.Where(g => g.IdGrupo == idgrupo && g.Cuatrimestre.Anio == DateTime.Now.Year).FirstOrDefault(); //si existe el grupo if (grupo != null) { //recuperar el ultimo cuatrimestre del mismo PE que el grupo para verificar que el grupo corresponde a este //Septiembre - Diciembre //Mayo - Agosto //Enero - Abril //podemos ordenarlos descendentemente por PeriodoInicio y sacar el primero de la lista var cuatrimestre = grupo.Cuatrimestre.IdPE && c.Anio g.PeriodoInicio).FirstOrDefault(); BD.Cuatrimestre.Where(c => c.IdPE == DateTime.Now.Year).OrderByDescending(g == =>
//si el grupo pertenece al ltimo cuatrimestre podremos devolver su lista de alumnos if (grupo.IdCuatrimestre == cuatrimestre.Id) { //crear nuestra lista con la clase auxiliar List<AuxAlumno> alumnos = new List<AuxAlumno>(); //transformar de Alumno a AuxAlumno foreach (Alumno item in grupo.Alumno.OrderBy(a a.Apellidos).ToList()) { alumnos.Add( new AuxAlumno { Matricula = item.Matricula, Nombre = item.Nombre.Trim(), Apellidos = item.Apellidos.Trim() }); } =>
//devolver el resultado JSON return this.Json(new { tutor = grupo.Tutor.Nombre.Trim() + " " + grupo.Tutor.Apellidos.Trim(), alumnos = alumnos }, JsonRequestBehavior.AllowGet); } return this.Json(new { msg = "Error al recuperar los alumnos del grupo seleccionado, el grupo no corresponde al ltimo cuatrimestre." }, JsonRequestBehavior.AllowGet); } else
Pgina 105 de 117
return this.Json(new { msg = "Error al recuperar los alumnos del grupo seleccionado, no se encontr el grupo." }, JsonRequestBehavior.AllowGet); } Para comprobar que funciona la accin AlumnosGrupo, registraremos a mano algunos alumnos para algunos grupos.
Img. 5. Registrar alumnos manualmente. Nota: En esta imagen se estn registrando alumnos para determinados grupos que SI Existen en mi tabla y pertenecen al ltimo cuatrimestre de alguno de mis PEs registrado. Comprobando que la accin AlumnosGrupo funciona. Para mi grupo con el Id=1, ingreso manualmente a la direccin http://localhost:2958/administraralumnos/alumnosgrupo?idgrupo=1 y el resultado es: { "tutor":"Juan Vicente Prez Lpez", "alumnos":[ {"Matricula":111,"Nombre":"Benito","Apellidos":"Mndez"}, {"Matricula":112,"Nombre":"Jorge","Apellidos":"Meza"} ] } Por lo tanto, si ingreso a http://localhost:2958/AdministrarAlumnos?idgrupo=1 tambin obtendr los datos en el resultado.
Img. 6. Resultado en la vista Index.
Pgina 106 de 117
El cdigo JavaScript. Ahora nuevamente entra en funcin el uso de jQuery para recuperar los datos desde el servidor, para ello, cree un nuevo archivo llamado adminalumnos.js en la carpeta Content/Scripts como en los casos anteriores, agreguemos entonces el cdigo para recuperar los datos desde el servidor y mostrarlos en la vista. Nuestro JavaScript queda como este: //Al seleccionar un PE, cargar los grupos del ultimo cuatrimestre $("#IdPE").live("change", function (event) { //obtener el Id del PE seleccionado var idpe = $("#IdPE").val(); //Si el ID del PE seleccionado es diferente de 0 if (idpe > 0) { //limpiar el combo de grupos $("#IdGrupo").children("option").remove(); $("#Cuatrimestre").val(""); //limpiar cuatrimestre $("#mensaje").html(""); // limpiar mensaje por si tiene algo $("#notif").html(""); //cargar los grupos del ltimo cuatrimestre con JSON var url = "/AdministrarAlumnos/Grupos?idpe=" + idpe; //hacer la llamada JSON $.getJSON(url, function (data) { var opcion = "<option value=\"0\"></option>"; $("#IdGrupo").append(opcion); $("#Cuatrimestre").val(data.cuatrimestre); if (data.msg) //si devolvi error $("#mensaje").html(data.msg); $.each(data.grupos, function (i, item) { //agregar los cuatrimestres al combo IdCuatrimestre" var opcion = "<option value=\"" + item.Id + "\">" + item.Nombre + "</option>"; $("#IdGrupo").append(opcion); }); $("#IdGrupo").focus(); $("#notif").html(" grupo.</strong></i>"); }); } }); //Al seleccionar el Grupo, cargar sus alumnos $("#IdGrupo").live("change", function (event) { //obtener el Id del grupo seleccionado var idgrupo = $("#IdGrupo").val(); //eliminar todas las filas de la tabla $("#AlumnosTbl").find('tbody').children("tr").remove(); $("#total").html(""); if (idgrupo > 0) { <i><strong>Seleccione el
Pgina 107 de 117
//mostrar el nombre del PE, periodo del cuatrimestre y grupo $("#nombrepe").html($("#IdPE option:selected").html()); $("#NCuatrimestre").html($("#Cuatrimestre").val()); $("#nombregrupo").html($("#IdGrupo option:selected").html()); //cargar los alumnos del grupo con JSON var url = "/AdministrarAlumnos/AlumnosGrupo?idgrupo=" + idgrupo; //hacer la llamada JSON $.getJSON(url, function (data) { if (data.msg) //si devolvi error $("#mensaje").html(data.msg); $("#tutor").html(data.tutor); $.each(data.alumnos, function (i, item) { //agregar los alumnos a la tabla var fila = "<tr><td><a href=\"/AdministrarAlumnos/Editar/" + item.Matricula + "\">Editar</a> | <a href=\"/AdministrarAlumnos/Eliminar/" + item.Matricula + "\">Eliminar</a></td><td>" + item.Matricula + "</td>" + "<td>" + item.Nombre + "</td>" + "<td>" + item.Apellidos + "</td></tr>"; $("#AlumnosTbl").append(fila); }); //mostrar el total de alumnos $("#total").html(data.alumnos.length); }); //habilitar el link para registrar un nuevo alumno en este grupo $("#LinkAltaAlumno").html("<a href=\"/AdministrarAlumnos/Registrar?idgrupo=" + idgrupo + "\">Registrar alumno en este grupo.</a>"); } }); Hora de comprobar funcionalidad. Ejecutemos nuestra App, vayamos a nuestra vista para ver las listas de alumnos.
nuevo
Pgina 108 de 117
Img. 7. Accediendo a nuestras listas.
Img. 8. Seleccionando un PE que no tiene cuatrimestres.
Pgina 109 de 117
Img. 9. Seleccionando otro grupo en el combobox. Hasta aqu es todo, por su parte implemente las acciones correspondientes para Registrar, Editar y si lo prefiere, tambin Eliminar. En la siguiente parte solo mostrar la generacin de reportes partiendo desde estas listas de alumnos para cada grupo. Aplicacin web con ASP.NET MVC 2 parte 12 Reportes en PDF Ahora generaremos un reporte local en nuestra aplicacin y lo presentaremos como documento PDF en el navegador para que pueda ser impreso o guardado, para ello, utilizaremos el elemento Report Document, y la clase LocalReport que se encuentra en el espacio de nombres Microsoft.Reporting.WebForms (visite http://msdn.microsoft.com/esmx/library/microsoft.reporting.webforms.localreport.aspx). Antes de continuar, modifiquemos la vista Index y nuestro cdigo JS para que se muestre un nuevo link junto al link Registrar nuevo alumno en este grupo, el nuevo link lo apuntaremos hacia una nueva accin que la llamaremos ImprimirLista.
Img. 1. Agregar link para imprimir lista.
Pgina 110 de 117
El cdigo a modificar en la vista Index para generar el link lo dejaremos como: <p id="LinkAltaAlumno"> <% if (ViewData["IdGrupo"] != "") { %> <%: Html.ActionLink("Registrar nuevo alumno en este grupo.", "Registrar", new { idgrupo = ViewData["IdGrupo"] }, null)%> | <%: Html.ActionLink("Exportar como PDF", "ImprimirLista", new { idgrupo = ViewData["IdGrupo"] }, null)%> <% } %> </p> Y en el JS modificado quedar como: //habilitar el link para registrar un nuevo alumno en este grupo $("#LinkAltaAlumno").html("<a href=\"/AdministrarAlumnos/Registrar?idgrupo=" + idgrupo + "\">Registrar nuevo alumno en este grupo.</a>" + " | " + "<a href=\"/AdministrarAlumnos/ImprimirLista?idgrupo=" + idgrupo + "\">Exportar como PDF</a>"); Creando el reporte. El reporte a crear solo consiste en llenarlo con la lista de alumnos del grupo que se este mostrando en Index, por lo tanto, el reporte ser llenado con una coleccin de objetos de la clase Alumno, ahora, para poder establecer una fuente de datos (DataSource) a travs de la cual se llenar el reporte, debemos implementar un mtodo en nuestra clase Alumno (puede ser tambin en una clase que en el servidor es una vista o directamente podra llenarse a travs de una funcin que es un procedimiento almacenado en el servidor SQLServer). Modificar la clase Alumno Agregue una nueva clase Alumno en la carpeta Models (la clase ser declarada como PARTIAL CLASS, si ya implement la validacin del formulario para el registro y edicin de Alumno, entonces ya no es necesario volver a agregarla). La partial class Alumno con nuestro nuevo mtodo que ser el DataSource de nuestro reporte quedar de esta forma. public partial class Alumno { /* * Aqu pueden ir o van las reglas de validacin (Clase MetaData) si es que ya implement la validacin del form */ //Agregamos un nuevo mtodo esttico que devuelva la lista de alumnos //que forman parte del grupo especificado //utilizamos la interfaz IList para nuestra coleccin public static IList<Alumno> ListaAlumnos(int idgrupo) { BDEscolarEntities BD = new BDEscolarEntities(); //recuperar la lista de alumnos desde la BD var alumnos = BD.Alumno.Where(a => a.IdGrupoActual == idgrupo).OrderBy(a => a.Apellidos); return alumnos.ToList(); } }
Pgina 111 de 117
Agregando el reporte: Antes de agregar el reporte, agregaremos una nueva carpeta llamada Reportes en la carpeta Content.
Img. 2. Agregar carpeta Reportes. Ahora sobre la carpeta Reportes vamos a agregar un nuevo elemento de tipo Informe llamadoAlumnosGrupo.
Img. 3. Agregar el reporte. Ahora tendremos el diseador de informes, entonces agregaremos el DataSource para nuestro informe, para esto, en la ventana Datos del informe, seleccione Nuevo > Conjunto de datos.
Pgina 112 de 117
Img. 4. Agregando nuevo conjunto de datos al informe. Ahora especifique el nombre para el conjunto de datos, en origen de datos, seleccione el espacio de nombres (NombreProyecto.Models), y ahora en el conjunto de datos disponibles busque la clase Alumnos la cual ya nos muestra que disponemos de un mtodo llamado ListaAlumnos, as que lo seleccionamos y damos en Aceptar.
Img. 5. Seleccionar el conjunto de datos. Agregamos el encabezado y pie al reporte, agregamos tambin la tabla en cuerpo del reporte.
Pgina 113 de 117
Img. 6. Agregar partes al reporte. Agreguemos parmetros al reporte, a traves de los cuales podamos especificar el nombre del PE, cuatrimestre, grupo y nombre del tutor. En la ventana de Datos de informe, nos ubicamos sobre Parmetros, y agregamos los parmetros correspondientes especificando el Nombre, Tipo de dato, etc.
Img. 8. Agregar parmetro.
Pgina 114 de 117
Tendremos que agregar los parmetros que comentamos.
Img. 8. Agregar los parmetros correspondientes. Ya con los parmetros y el conjunto de datos, terminemos el diseo de nuestro reporte.
Img. 9. Diseo del reporte. La accin ImprimirLista. Esta accin que se encargar de llenar el reporte y enviarlo al navegador, comentamos que recibir el ID del grupo que se pretende exportar al reporte. En esta accin utilizamos clases que se encuentran en el espacio de nombres Microsoft.Reporting.WebForms, por lo tanto, debemos agregar la referencia correspondiente:
Img. 10. Agregar referencia al componente Microsoft.ReportViewer.WebForms.
Pgina 115 de 117
El cdigo de la accin: public ActionResult ImprimirLista(int idgrupo) { //comprobar que el grupo exista var grupo = BD.Grupo.Where(g => g.IdGrupo == idgrupo).FirstOrDefault(); if (grupo != null) { //declarar el objeto de la clase LocalReport LocalReport localReport = new LocalReport(); localReport.ReportPath = Server.MapPath("~/Content/Reportes/AlumnosGrupo.rdlc"); //Llenar los 4 parmetros que creamos en el reporte ReportParameter[] parametros = new ReportParameter[4]; parametros[0] = new ReportParameter("ProgramaEducativo", grupo.Cuatrimestre.ProgramaEducativo.NombreCorto.Trim()); parametros[1] = new ReportParameter("Cuatrimestre", grupo.Cuatrimestre.PeriodoInicio.Trim() + " - " + grupo.Cuatrimestre.PeriodoFin.Trim() + " "+grupo.Cuatrimestre.Anio); parametros[2] = new ReportParameter("Grupo", grupo.Nombre.Trim()); parametros[3] = new ReportParameter("Tutor", grupo.Tutor.Nombre.Trim() + " "+grupo.Tutor.Apellidos.Trim()); //agregar los parmetros al reporte localReport.SetParameters(parametros); //Preparar el DataSource del reporte //aqu invocamos al mtodo ListaAlumnos que agregamos a la clase Alumno //pasandole como valor de parmetro el id del grupo que se quiere imprimir //No hemos hablado de vistas o procedimientos almacenados, sino, aqu se invocaran directamente ReportDataSource reportDataSource = new ReportDataSource("DatosAlumnos", Alumno.ListaAlumnos(idgrupo)); //Ahora pasamos los datos al reporte localReport.DataSources.Add(reportDataSource); //declaramos las variables de configuracin para el reporte string reportType = "PDF"; string mimeType; string encoding; string fileNameExtension; //En la configuracin del reporte debe especificarse para el tipo de reporte //consulte el sitio para ms informacin //http://msdn2.microsoft.com/en-us/library/ms155397.aspx Warning[] warnings; string[] streams; byte[] renderedBytes; //Transformar el reporte a bytes para transferirlo como flujo renderedBytes = localReport.Render(reportType, null, out mimeType, out encoding, out fileNameExtension, out streams, out warnings); //enviar el archivo al cliente (navegador) return File(renderedBytes, mimeType); }
Pgina 116 de 117
else return View("Error"); } Ejecutemos ahora nuestra app e intentemos ver un grupo en un reporte como PDF en nuestro navegador. Ejemplo: quiero ver el documento para el grupo con el ID=1, url http://localhost:2958/AdministrarAlumnos/ImprimirLista?idgrupo=1 y obtengo 2, etc. ingreso a la
Img. 11. Reporte generado como PDF. Y hasta aqu terminamos nuestra implementacin de reportes en nuestra aplicacin de ASP.NET MVC 2. En la ltima parte implementaremos los Roles y Usuarios.
Referencias Felipe Lima (2011), Aplicacin web con ASP.NET MVC 2, Visitado: 20/10/2013, http://afelipelc.wordpress.com/2011/09/19/aplicacion-web-con-asp-net-mvc-2/#more-550 Disponible en:
Pgina 117 de 117

Aplicación Web Con ASP (Escolar)

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Aplicación Web Con ASP (Escolar)

Cargado por

Copyright:

Formatos disponibles

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Img. 1. Crear el proyecto

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Img. 1. Diagrama relacional de la BD.

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Img. 3. Base de datos agregada al proyecto.

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Img. 5. Agregar el ADO.NET Entity Data Model.

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Img. 2. Crear vista para Registrar.

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Img. 6. Crear la vista Editar (con contenido Edit).

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

"Index")%> </div> </asp:Content>

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Img. 7. Vista de la lista con el nuevo link Editar.

Img. 8. Editar los datos del programa educativo.

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Guardados los cambios:

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN

Recopil: MSC. Jos Raymundo Ceja Vzquez

INGENIERA EN TECNOLOGAS DE LA INFORMACIN