Aplicación 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.

Como ya estamos familiarizados con la parte de crear vistas tipadas, iremos avanzando un poco más rápido, solo que a nuestra vista principal le agregaremos un ComboBox más para realizar los filtros.

Agregaremos también 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 parámetro 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 parámetro 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();
                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: título, 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>

    <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 })%> |
                <%: Html.ActionLink("Delete", "Delete", new { id=item.IdTutor })%>
            </td>
            <td>
                <%: item.IdTutor %>
            </td>
            <td>
                <%: item.Nombre %>
            </td>
            <td>
                <%: item.Apellidos %>
            </td>
            <td>
                <%: item.ProgramaEducativo.NombreCorto%>
            </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.

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 válido 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 aplicación para ver nuestro resultado.

Img. 5. Lista de todos los tutores.

Especificando el parámetro para filtrar por programa educativo.

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 acción 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.

Img. 7. Crear la vista Registrar.

Modificado el código 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) %>
            </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:

Img. 8. Registrar nuevo tutor mostrando la lista de programas educativos.

Registrar el nuevo tutor.

Nuestra acción [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:

Img. 9. Registrando un nuevo tutor.
Img. 10. El tutor ha sido registrado y se ha redireccionado a la lista de tutores del PE.

Ahora por su propia cuenta cree las acciones correspondientes para Editar y Eliminar tutores, apóyese en el controlador AdministrarPE donde se realizó la implementación similar, pero en esta ocasión también debe mostrar el mismo formulario que se muestra en la vista Registrar, considere también que al intentar eliminar el tutor debe comprobarse que no esté asignado a algún 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.
Img. 13. Tutor modificado.
Img. 14. Eliminando un tutor.

Entonces la tarea es implementar las acciones comentadas, ahora que si después de intentarlo nadamás no se puede, pues agreguen un comentario para pasarles los fragmentos de código en los que tienen problemas.

Lo del combo para filtrar nuestra lista lo dejamos para la próxima.

Saludos y a trabajar…!

4 comentarios en “Aplicación web con ASP.NET MVC 2 – parte 7

  1. Hola estoy empezando con la programacion en ASP.net con MVC, hasta la parte 7 estaba perfecto, pero luego al querer editar y guardar, al cargar los valores en un DropDownList no me dio, me da una serie de errores, no guarda el id en la bd etc, Me podrias regalar el codigo del Controller y de las View para la edicion y carga desde un DropDownList? solamente eso pido, no el programa, solo el codigo para generar. Desde ya muchas gracias.

  2. Tengo un problemilla en Editar me puede pasar el codigo del combox que muestra los programas educativos la verdad su ejemplo me interesa mucho y soy aun medio novato en esto me pudiera ayudar por favor

    1. El código es el mismo que Registrar, ya que se utiliza la misma vista parcial Tutor.ascx que se encuentra en EditorTemplates, el valor del parámetro ProgramasEducativos que llena el dropdownlist es enviado desde el controlador:
      var programaseduc = BD.ProgramaEducativo.ToList();
      ViewData[“ProgramasEducativos”] = programaseduc;

Escribe tu comentario:

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s