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

La acción Registrar (GET)

Se habla de GET porque la acción responde a nuestra petición 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 acción 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 opción Create.
  • Creada la vista, modifique el código para que muestre la leyenda o titulo correspondiente.
Img. 2. Crear vista para Registrar.

Modifiquemos ahora el código de la vista, como el campo IdPE de PrgramaEducativo es auto incremento, eliminemos el código 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 código de la vista quedaría 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 acción en http://localhost:2958/AdministrarPE/Registrar donde vemos el formulario.

Img. 3. Formulario para crear un nuevo registro (Vista Registrar).

Si llenamos el Form e intentamos registrar el PE, no funcionará ya que ninguna acción en nuestro controlador recibe los datos.

La acción Registrar (POST)

Se comentó que esta acción 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 declaración, nuestra acción Registrar (POST) quedaría 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 acción agregará el nuevo objeto y automáticamente nos redireccionará a la lista de PE (por lo que no se necesita crear una vista especial), notese que no se hace ninguna validación 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 aplicación y vuelva al form anterior, llene los datos y cree el registro para que pueda ver el resultado.

Img. 4. Creando un nuevo registro.

Después de hacer clic en el botón, tenemos el resultado.

Img. 5. Registro agregado.

Ahora en la vista Index, modifique el enlace “Create new” para que apunte a nuestra acción Registrar:

<%: Html.ActionLink(“Registrar nuevo Programa educativo”, “Registrar”) %>

La acción Editar

De igual forma como la acción Registrar, deben considerarse las peticiones GET y POST.

La acción Editar (GET)

La acción editar que atienda peticiones GET debe recibir como parámetro el ID del PE a editar, debe buscar en la BD el objeto correspondiente y pasarlo a la vista para su edición, la vista debe mostrar en el formulario con los datos correspondientes.

        // GET: /AdministrarPE/Editar
        public ActionResult Editar(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");
        }

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 aún no está familiarizado), puede consultar el enlace http://msdn.microsoft.com/en-us/library/cc161164.aspx que contiene buena información sobre LINQ y http://msdn.microsoft.com/en-us/vcsharp/aa336746 que contiene 101 ejemplos de consultas LINQ y algunos con expresiones Lambda, busque también más información en la web o en el sitio oficial del MSDN.

Crearemos la vista correspondiente (en contenido de view ahora es Edit).

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

Modificaremos el código 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", 
"Index")%>
    </div>

</asp:Content>

La acción Editar (POST)

Ahora creemos la acción 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 (acción Index).
            return RedirectToAction("Index");
        }

Modificar la vista Index

Recordemos que en la lista de PE´s (Vista Index), muestra en cada registro un enlace con el texto “Edit”, debemos modificar el ActionLink para que apunte hacia nuestra nueva acción:

<%: Html.ActionLink(“Editar”, “Editar”, new { id=item.IdPE }) %>

Ejecutemos nuestra app e intentemos editar un registro, ejemplo: http://localhost:2958/AdministrarPE/Editar/1

Img. 7. Vista de la lista con el nuevo link Editar.
Img. 8. Editar los datos del programa educativo.

Guardados los cambios:

Img. 9. Datos guardados.

Eliminar Registros.

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

Img. 10. Crear vista con contenido Delete.

Modificar el código de la vista (puede utilizar el diseñador):

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

    </fieldset>
    <% using (Html.BeginForm()) { %>
        <p>
		    <input type="submit" value="Si Eliminar" /> |
		    <%: Html.ActionLink("Cancelar", "Index") %>
        </p>
    <% } %>

</asp:Content>

Crear la acción Eliminar para confirmar la eliminación.

        [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 acción Eliminar por medio de una petición POST, buscará el objeto, lo eliminará de la BD, guardará los cambios y mostrará una vista de confirmación, 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 confirmación.

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

<%: Html.ActionLink(“Delete”, “Delete”, new { id=item.IdPE })%>

quedaría 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 acción Detalles implica mostrar todos los detalles correspondientes para cada PE como datos estadísticos: cuatrimestres, alumnos en total, grupos, etc.

Terminada nuestra acción Eliminar y los links correspondientes, ahora comprobemos que ya puede eliminar.

Img. 12. Lista de PE's con el link Eliminar.
Img. 13. Confirmar la eliminación.
Img. 14. Notificación del registro eliminado.
Img. 15. Lista de PE´s después de eliminar el registro.

Después de implementar estas acciones y verificar que funcionen, aquí termina esta parte, en la siguiente entrega iremos agregando cuatrimestres a los PE´s.

¿Algún comentario?

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

  1. Sería muy bueno que nos indicaran antes de guardar cuando se está creando o editando un dato, como evaluar que el dato no se repita en la tabla, mediante dos métodos: 1. haciendo que el campo en la base de datos sea único y así poder capturar el mensaje que devuelve el motor de base de datos; 2. antes de guardar verificar en la base de datos si el dato ya existe o no

    También sería muy chévere que nos enseñaran como hacer que un cuadro de texto cambie de color cuando tiene el enfoque y a demás que cuadros de texto inactivos tengan otro tipo de color.

    Sería muy importante para nosotros las personas novatas un mini tutorial rápido y concreto sobre LINQ y JQuery para ir ganando tiempo.

    Obtener una respuesta a estas preguntas es para nosotros muy importante, gracias por el esfuerzo y tiempo que invierten en respondernos.

    Éxitos

    1. Como tal, este es solo un ejemplo básico del desarrollo de una pequeña aplicación para ir adquiriendo práctica en esta plataforma.
      Pero con respecto a lo que comentas sobre evaluar datos, tu primer método sugerido: el campo se define como único cuando se define la tabla (en el diseñador de tablas o desde el código sql), de esta forma el servidor dará una respuesta que en el código c# o el utilizado para crear la aplicación generará una excepción que debe controlarse e informar al usuario lo sucedido, el segundo, es nuestra labor como desarrolladores evaluar los datos antes de almacenarlos en la BD utilizando distintos métodos como: realizando una consulta en busqueda de coincidencias, o implementar procedimientos almacenados en nuestras BD que se encarguen de dicha función.

      Con respecto a lo chevere que te gustaría es solo aprender un poco de CSS, JavaScript y también un poco de jQuery, de todo esto existen un montón de tutoriales en la red, solo es cosa de indagar un poco (http://www.w3schools.com/css/ | http://www.javascriptya.com.ar/jquery/ | http://librojquery.com/)

      De igual manera, sobre LINQ lo que se requiere es comprender los conceptos, la sintaxis para escribir consultas http://msdn.microsoft.com/en-us/library/bb308959.aspx

      Espero que mi breve respuesta contribuya en tu análisis que habrás de realizar en búsqueda de nuevas respuestas que ayuden a ampliar tus perspectivas como desarrollador.

  2. hola estoy siguiendo tus ejemplos , este proyecto de “PrgramaEducativo ” esta mucho mejor que el anterior de Pelicula , podrias compartirlo o algo? o no esta disponible para compartirlo?
    Saludos

  3. Oye tendras tu ejemplo de aplicacion completo en un pdf o piensas subirlo? esta muy bueno la verdad, me esta ayudando mucho wey , no le entendia mucho a esto pero ahora pff ia estoi encaminado, Saludos !!

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