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

Después de haber creado nuestra base de datos y el modelo de datos a utilizar en nuestra aplicación, antes de agregar cualquier registro a las tablas es recomendable tener un respaldo de la BD vacía, posteriormente si se le realiza algún cambio al diseño de la BD volver a crear un respaldo ya que al ir realizando las pruebas de funcionalidad de la aplicación se irán agregando registros y para cuando la aplicación esté terminada tendremos que limpiar la BD para que ahora sí empiece a trabajar desde cero, entonces será más fácil reemplazar la BD con datos de prueba por la vacía.

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 opción “Agregar métodos de acción para los escenarios Create, Update, Delete y Details” y al crear el controlador se crearán estas acciones (pero con los nombres en inglés), en este caso agregamos el controlador sin seleccionar esta opción.

Acceder al modelo desde el controlador.

Para que nuestro controlador pueda acceder al modelo, debemos agregar el using correspondiente.

using EscuelaWebApp.Models;

El propósito de este controlador es permitir al usuario (administrador) visualizar la lista de programas educativos con la opción 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 código correspondiente para que la acción Index() del nuevo controlador pase la lista de programas educativos a la vista, para ello primero crearemos una instancia de nuestra conexión a la BD (Modelo).

El código de nuestro controlador es el siguiente (no incluí aquí el código 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 acción que devuelva una vista.

Para crear una vista para una acción, sobre el nombre de la acción Index() presionamos botón derecho y seleccionamos CrearVista esto nos abrirá una ventana donde:

  1. Debemos especificar el nombre para nuestra vista (mismo nombre de la acción).
  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 página 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.
Img. 3. Agregar una vista fuertemente tipada.

Observamos que el código de la nueva vista mostrará como título “Index”, así que cambiamos el título a “Programas Educativos”.

Vemos también que el código 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 también un enlace para crear un nuevo registro.

Consideremos que los enlaces que se muestren en nuestra página aún no funcionan, ya que los enlaces apuntan hacia las acciones Create, Edit, Details y Delete que no existen en nuestro controlador (más adelante crearemos las nuestras, por ahora lo dejamos así).

Código de la vista Index.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Programas Educativos
</asp:Content>

<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 aplicación 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 aplicación).

Img. 4. Nuestra primera vista mostrando la lista de programas educativos.

Y ese es el resultado que tenemos hasta ahora, vaya que es rápido desarrollar aplicaciones web con esta tecnología, pero apenas estamos empezando 😀

Los Links (ActionLink)

Vemos que nuestra aplicación muestra algunos enlaces y si navegamos por el código de nuestra vista o Site.Master donde genera los links vemos que se utiliza Html.ActionLink.

¿Cómo se generan los vínculos o links?

Ejemplos de links:

  1. <%: Html.ActionLink(“Acerca de”, “About”, “Home”)%>
  2. <%: Html.ActionLink(“Programas educativos”, “Index”, “AdministrarPE”)%>
  3. <%: Html.ActionLink(“Edit”, “Edit”, new { id=item.IdPE }) %>
  4. <%: Html.ActionLink(“Details”, “Details”, new { id=item.IdPE })%>
  5. <%: Html.ActionLink(“Delete”, “Delete”, new { id=item.IdPE })%>

Por medio de Html.ActionLink genera los vínculos 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/Xnúmero, etc. nótese que no se pone la palabra “Controller” en Home, AdministrarPE (nombre de los controladores), entonces la sintaxis es:

Cuando estamos llamando a una acción en el mismo controlador.

<%: Html.ActionLink(
                    "Acceso externo",    // Texto del enlace
                    "Editar",            // Acción
       new { id=Model.Id }  // Parámetros
)
%>

Esta sintaxis es la utilizada en los links 3, 4 y 5 porque solo se están mostrando y utilizando en las vistas del controlador AdministrarPE.

Y cuando queremos acceder a la acción de otro controlador

<%: Html.ActionLink(
             "Acceso Externo",  //Texto del enlace
             "Editar",               // Acción
             "Productos",            // Nombre del controlador
             new { id=Model.Id }    // Parámetros
) %>

Por Ejemplo cuando en la página principal queremos que se muestre un enlace para acceder algún 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 código para generar el enlace.

Ejecutamos nuestra aplicación donde en la página principal y por toda la aplicación podremos ver nuestro nuevo link.

Img. 5. Resultado de agregar un nuevo link a la plantilla Site.Master.

Ahora podemos acceder rápidamente a nuestra nueva sección de nuestra aplicación.

Ya para no aburrir más con esto de la aplicación aquí paramos esta lección, continuaremos con la parte de agregar, editar y eliminar en la siguiente entrega.

No olvides aportar para mejorar o complementar la nota.

Anuncios

9 comentarios en “Aplicación web con ASP.NET MVC 2 – parte 3

    1. Para generar tus menús desplegables tienes que combinar el código generado por asp.net mvc 2 con algún plugin o javascript + css que genere menús desplegables atractivos (existen muchos ejemplos de menús en la red).

  1. seria bueno si explicaras primero como iniciar sesion con el logeo que trae por defecto el MVC 2.0 en ASP.net al darle “APLICACION WEB DE ASP.NET “… esa que te crea el logeo por defecto.

  2. Hola Felipe, un favor podrias subir Aplicación web con ASP.NET MVC 2 – parte 1 y Aplicación web con ASP.NET MVC 2 – parte 2 para ver las tablas de la base de datos,Una consulta como trabajaria con ajax en MVC Gracias,

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