Iteración n.º 7: Agregar funcionalidad de Ajax (C#)

2023-07-13

En la séptima iteración, mejoramos la capacidad de respuesta y el rendimiento de nuestra aplicación agregando compatibilidad con Ajax.

Creación de una aplicación de administración de contactos ASP.NET MVC (C#)

En esta serie de tutoriales, creamos una aplicación completa de administración de contactos de principio a fin. La aplicación Contact Manager le permite almacenar información de contacto (nombres, números de teléfono y direcciones de correo electrónico) para obtener una lista de personas.

Compilamos la aplicación en varias iteraciones. Con cada iteración, mejoramos gradualmente la aplicación. El objetivo de este enfoque de iteración múltiple es permitirle comprender el motivo de cada cambio.

Iteración n.º 1: Crear la aplicación. En la primera iteración, creamos el Administrador de contactos de la manera más sencilla posible. Agregamos compatibilidad con operaciones básicas de base de datos: Crear, Leer, Actualizar y Eliminar (CRUD).
Iteración n.º 2: Hacer que la aplicación tenga un buen aspecto. En esta iteración, mejoraremos la apariencia de la aplicación modificando la página maestra de vistas y la hoja de estilos en cascada predeterminadas de ASP.NET MVC.
Iteración n.º 3: Agregar una validación de formulario. En la tercera iteración, agregamos validación básica de formularios. Evitamos que los usuarios envíen un formulario sin completar los campos de formulario obligatorios. También validamos las direcciones de correo electrónico y los números de teléfono.
Iteración n.º 4: Hacer que la aplicación tenga un acoplamiento flexible. En esta cuarta iteración, aprovechamos varios patrones de diseño de software para facilitar el mantenimiento y modificación de la aplicación Contact Manager. Por ejemplo, refactorizamos la aplicación para usar el patrón Repository y el patrón de inserción de dependencias.
Iteración n.º 5: Crear pruebas unitarias. En la quinta iteración, hacemos que la aplicación sea más fácil de mantener y modificar agregando pruebas unitarias. Simulamos nuestras clases de modelo de datos y compilamos pruebas unitarias para nuestros controladores y lógica de validación.
Iteración n.º 6: Usar el desarrollo mediante pruebas. En esta sexta iteración, agregamos nueva funcionalidad a nuestra aplicación escribiendo primero pruebas unitarias y escribiendo código en las pruebas unitarias. En esta iteración, agregamos grupos de contactos.
Iteración n.º 7: Agregar funcionalidad de Ajax. En la séptima iteración, mejoramos la capacidad de respuesta y el rendimiento de nuestra aplicación agregando compatibilidad con Ajax.

Esta iteración

En esta iteración de la aplicación Contact Manager, refactorizamos nuestra aplicación para hacer uso de Ajax. Al aprovechar Ajax, hacemos que nuestra aplicación sea más dinámica. Podemos evitar la representación de una página completa cuando es necesario actualizar solo una determinada región de una página.

Refactorizaremos la vista Index para que no sea necesario volver a reproducir toda la página siempre que alguien seleccione un nuevo grupo de contactos. En su lugar, cuando alguien haga clic en un grupo de contactos, solo actualizaremos la lista de contactos y dejaremos el resto de la página en paz.

También cambiaremos la forma en que funciona nuestro vínculo de eliminación. En lugar de mostrar una página de confirmación independiente, se mostrará un cuadro de diálogo de confirmación de JavaScript. Si confirma que quiere eliminar un contacto, se realiza una operación HTTP DELETE en el servidor para eliminar el registro del contacto de la base de datos.

Además, aprovecharemos jQuery para agregar efectos de animación a nuestra vista Index. Mostraremos una animación cuando se capture la nueva lista de contactos del servidor.

Por último, aprovecharemos la compatibilidad del marco de AJAX de ASP.NET para administrar el historial del explorador. Crearemos puntos de historial cada vez que realicemos una llamada Ajax para actualizar la lista de contactos. De este modo, los botones hacia atrás y hacia delante del explorador funcionarán.

¿Por qué usar Ajax?

El uso de Ajax tiene muchas ventajas. En primer lugar, agregar la funcionalidad de Ajax a una aplicación da como resultado una mejor experiencia del usuario. En una aplicación web normal, toda la página debe volver a publicarse en el servidor cada vez que un usuario realiza una acción. Siempre que realice una acción, el explorador se bloquea y el usuario debe esperar hasta que se captura y se vuelve a reproducir toda la página.

Esto sería una experiencia inaceptable en el caso de una aplicación de escritorio. Pero, tradicionalmente, vivíamos con esta mala experiencia de usuario en el caso de una aplicación web porque no sabíamos que podíamos hacerlo mejor. Pensábamos que era una limitación de las aplicaciones web cuando, en realidad, era solo una limitación de nuestra imaginación.

En una aplicación Ajax, no es necesario detener la experiencia del usuario solo para actualizar una página. En su lugar, puede realizar una solicitud asincrónica en segundo plano para actualizar la página. No obliga al usuario a esperar mientras se actualiza parte de la página.

Al aprovechar Ajax, también puede mejorar el rendimiento de la aplicación. Considere cómo funciona la aplicación Contact Manager en este momento sin la funcionalidad de Ajax. Al hacer clic en un grupo de contactos, se debe volver a reproducir toda la vista Index. La lista de contactos y la lista de grupos de contactos deben recuperarse del servidor de bases de datos. Todos estos datos deben pasarse a través de la conexión desde el servidor web al explorador web.

Sin embargo, después de agregar la funcionalidad de Ajax a nuestra aplicación, podemos evitar volver a reproducir toda la página cuando un usuario hace clic en un grupo de contactos. Ya no es necesario obtener los grupos de contactos de la base de datos. Tampoco es necesario insertar toda la vista Index a través de la conexión. Al aprovechar Ajax, se reduce la cantidad de trabajo que debe realizar nuestro servidor de bases de datos y se reduce la cantidad de tráfico de red requerido por nuestra aplicación.

No tenga miedo de Ajax

Algunos desarrolladores evitan usar Ajax porque se preocupan por los navegadores antiguos. Quieren asegurarse de que sus aplicaciones web seguirán funcionando cuando acceda a ellas un explorador que no sea compatible con JavaScript. Dado que Ajax depende de JavaScript, algunos desarrolladores evitan usar Ajax.

Sin embargo, si tiene cuidado de cómo implementa Ajax, puede construir aplicaciones que funcionen con exploradores tanto modernos como antiguos. Nuestra aplicación Contact Manager funcionará con exploradores que admiten JavaScript y exploradores que no lo hacen.

Si usa la aplicación Contact Manager con un explorador que admita JavaScript, tendrá una mejor experiencia de usuario. Por ejemplo, al hacer clic en un grupo de contactos, solo se actualizará la región de la página que muestra los contactos.

Si, por otro lado, usa la aplicación Contact Manager con un explorador que no admite JavaScript (o que tiene JavaScript deshabilitado), tendrá una experiencia de usuario ligeramente menos deseable. Por ejemplo, al hacer clic en un grupo de contactos, toda la vista Index debe volver a publicarse en el explorador para mostrar la lista coincidente de contactos.

Adición de los archivos JavaScript necesarios

Tendremos que usar tres archivos JavaScript para agregar la funcionalidad de Ajax a nuestra aplicación. Los tres archivos se incluyen en la carpeta Scripts de una nueva aplicación ASP.NET MVC.

Si tiene previsto usar Ajax en varias páginas de la aplicación, tiene sentido incluir los archivos JavaScript necesarios en la página maestra de vista de la aplicación. De esta forma, los archivos JavaScript se incluirán en todas las páginas de su aplicación automáticamente.

Agregue las siguientes instrucciones de JavaScript dentro de la etiqueta <head> de la página maestra de vista:

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>

Refactorización de la vista Index para usar Ajax

Comencemos modificando nuestra vista Index para que al hacer clic en un grupo de contactos solo se actualice la región de la vista que muestra los contactos. El cuadro rojo de la figura 1 contiene la región que queremos actualizar.

Figura 01: Actualización solo de contactos (haga clic para ver la imagen de tamaño completo)

El primer paso es separar la parte de la vista que queremos actualizar de forma asincrónica en una parte parcial independiente (vea el control de usuario). La sección de la vista Index que muestra la tabla de contactos se ha trasladado al parcial de la lista 1.

Lista 1: Views\Contact\ContactList.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ContactManager.Models.Group>" %>
<%@ Import Namespace="Helpers" %>
<table class="data-table" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th class="actions edit">
                Edit
            </th>
            <th class="actions delete">
                Delete
            </th>
            <th>
                Name
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>
    </thead>
    <tbody>
        <% foreach (var item in Model.Contacts)
           { %>
        <tr>
            <td class="actions edit">
                <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
            </td>
            <td class="actions delete">
                <a href='<%= Url.Action("Delete", new {id=item.Id}) %>'><img src="../../Content/Delete.png" alt="Edit" /></a>
            </td>
            <th>
                <%= Html.Encode(item.FirstName) %>
                <%= Html.Encode(item.LastName) %>
            </th>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>

Observe que el parcial de la lista 1 tiene un modelo diferente al de la vista Index. El atributo Inherits de la directiva <%@ Page %> especifica que el parcial hereda de la clase ViewUserControl<Group>.

La vista Index actualizada se encuentra en la lista 2.

Lista 2: Views\Contact\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.ViewData.IndexModel>" %>
<%@ Import Namespace="Helpers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

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

<ul id="leftColumn">
<% foreach (var item in Model.Groups) { %>
    <li <%= Html.Selected(item.Id, Model.SelectedGroup.Id) %>>
    <%= Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList"})%>
    </li>
<% } %>
</ul>
<div id="divContactList">
    <% Html.RenderPartial("ContactList", Model.SelectedGroup); %>
</div>

<div class="divContactList-bottom"> </div>
</asp:Content>

Hay dos cosas que debe tener en cuenta sobre la vista actualizada en la lista 2. En primer lugar, observe que todo el contenido trasladado al parcial se reemplaza con una llamada a Html.RenderPartial(). Se llama al método Html.RenderPartial() cuando la vista Index se solicita por primera vez para mostrar el conjunto inicial de contactos.

En segundo lugar, observe que el elemento Html.ActionLink() usado para mostrar grupos de contactos se ha reemplazado por Ajax.ActionLink(). Se llama a Ajax.ActionLink() con los parámetros siguientes:

<%= Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList"})%>

El primer parámetro representa el texto que se va a mostrar para el vínculo, el segundo parámetro representa los valores de ruta y el tercer parámetro representa las opciones de Ajax. En este caso, utilizamos la opción Ajax UpdateTargetId para apuntar a la etiqueta HTML <div> que queremos actualizar después de que se complete la solicitud Ajax. Queremos actualizar la etiqueta <div> con la nueva lista de contactos.

El método Index() actualizado del controlador Contact aparece en la lista 3.

Lista 3: Controllers\ContactController.cs (método Index)

public ActionResult Index(int? id)
{
    // Get selected group
    var selectedGroup = _service.GetGroup(id);
    if (selectedGroup == null)
        return RedirectToAction("Index", "Group");

    // Normal Request
    if (!Request.IsAjaxRequest())
    {
        var model = new IndexModel
        {
            Groups = _service.ListGroups(),
            SelectedGroup = selectedGroup
        };
        return View("Index", model);
    }

    // Ajax Request
    return PartialView("ContactList", selectedGroup);
}

La acción Index() actualizada devuelve condicionalmente una de las dos cosas. Si una solicitud Ajax invoca la acción Index(), el controlador devuelve un parcial. De lo contrario, la acción Index() devuelve una vista completa.

Tenga en cuenta que la acción Index() no necesita devolver tantos datos cuando se invocan mediante una solicitud de Ajax. En el contexto de una solicitud normal, la acción Index devuelve una lista de todos los grupos de contactos y el grupo de contactos seleccionado. En el contexto de una solicitud de Ajax, la acción Index() devuelve solo el grupo seleccionado. Ajax significa menos trabajo en el servidor de bases de datos.

Nuestra vista Index modificada funciona en el caso de exploradores de nivel superior e inferior. Si hace clic en un grupo de contactos y el explorador admite JavaScript, solo se actualiza la región de la vista que contiene la lista de contactos. Si, por otro lado, el explorador no admite JavaScript, se actualiza toda la vista.

Nuestra vista Index actualizada tiene un problema. Al hacer clic en un grupo de contactos, el grupo seleccionado no está resaltado. Como la lista de grupos se muestra fuera de la región que se actualiza durante una solicitud Ajax, el grupo correcto no queda resaltado. Corregiremos este problema en la sección siguiente.

Adición de efectos de animación de jQuery

Normalmente, al hacer clic en un vínculo de una página web, puede usar la barra de progreso del explorador para detectar si el explorador está capturando activamente el contenido actualizado. Al realizar una solicitud de Ajax, por otro lado, la barra de progreso del explorador no muestra ningún progreso. Esto puede poner nerviosos a los usuarios. ¿Cómo sabe si el navegador se ha congelado?

Hay varias maneras de indicar a un usuario que se está realizando el trabajo mientras se realiza una solicitud de Ajax. Un enfoque es mostrar una animación sencilla. Por ejemplo, puedes atenuar una región cuando comienza una solicitud Ajax y volver a hacerla visible cuando la solicitud se completa.

Usaremos la biblioteca de jQuery que se incluye con el marco de Microsoft ASP.NET MVC para crear los efectos de animación. La vista Index actualizada se encuentra en la lista 4.

Lista 4: Views\Contact\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.ViewData.IndexModel>" %>
<%@ Import Namespace="Helpers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

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

<script type="text/javascript">

    function beginContactList(args) {
        // Highlight selected group
        $('#leftColumn li').removeClass('selected');
        $(this).parent().addClass('selected');

        // Animate
        $('#divContactList').fadeOut('normal');
    }

    function successContactList() {
        // Animate
        $('#divContactList').fadeIn('normal');
    }

    function failureContactList() {
        alert("Could not retrieve contacts.");
    }

</script>

<ul id="leftColumn">
<% foreach (var item in Model.Groups) { %>
    <li <%= Html.Selected(item.Id, Model.SelectedGroup.Id) %>>
    <%= Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" })%>
    </li>
<% } %>
</ul>
<div id="divContactList">
    <% Html.RenderPartial("ContactList", Model.SelectedGroup); %>
</div>

<div class="divContactList-bottom"> </div>
</asp:Content>

Observe que la vista Index actualizada contiene tres nuevas funciones de JavaScript. Las primeras dos funciones utilizan jQuery para atenuar y volver a mostrar la lista de contactos cuando se hace clic en un nuevo grupo de contactos. La tercera función muestra un mensaje de error cuando una solicitud Ajax produce un error (por ejemplo, tiempo de espera de red).

La primera función también se encarga de resaltar el grupo seleccionado. Se agrega un atributo class= selected al elemento primario (el elemento LI) del elemento en el que se hace clic. De nuevo, jQuery facilita la selección del elemento correcto y la adición de la clase CSS.

Estos scripts están vinculados a los vínculos de grupo con la ayuda del parámetro Ajax.ActionLink() AjaxOptions. La llamada al método Ajax.ActionLink() actualizada tiene este aspecto:

<%= Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" })%>

Adición de compatibilidad con el historial de exploradores

Normalmente, al hacer clic en un vínculo para actualizar una página, se actualiza el historial del explorador. De este modo, puede hacer clic en el botón Atrás del explorador para volver al estado anterior de la página. Por ejemplo, si hace clic en el grupo de contactos Amigos y después en el grupo de contactos Negocios, puede hacer clic en el botón Atrás del explorador para volver al estado de la página cuando estaba seleccionado el grupo de contactos Amigos.

Desafortunadamente, la realización de una solicitud Ajax no actualiza automáticamente el historial del explorador. Si hace clic en un grupo de contactos y la lista de contactos coincidentes se recupera con una solicitud Ajax, el historial del explorador no se actualiza. No puede usar el botón Atrás del explorador para volver a un grupo de contactos después de seleccionar un nuevo grupo de contactos.

Si desea que los usuarios puedan usar el botón Atrás del explorador después de realizar solicitudes Ajax, debe realizar un poco más de trabajo. Debe aprovechar las ventajas de la funcionalidad de administración del historial del explorador integrada en ASP.NET AJAX Framework.

Historial del explorador de ASP.NET AJAX, tiene que hacer tres cosas:

Habilite el historial del explorador estableciendo la propiedad enableBrowserHistory en true.
Guarde los puntos del historial cuando cambie el estado de una vista llamando al método addHistoryPoint().
Reconstruya el estado de vista cuando se produzca el evento de navegación.

La vista Index actualizada se encuentra en la lista 5.

Lista 5: Views\Contact\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.ViewData.IndexModel>" %>
<%@ Import Namespace="Helpers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

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

<script type="text/javascript">

    var _currentGroupId = -1;

    Sys.Application.add_init(pageInit);

    function pageInit() {
        // Enable history
        Sys.Application.set_enableHistory(true);

        // Add Handler for history
        Sys.Application.add_navigate(navigate);
    }

    function navigate(sender, e) {
        // Get groupId from address bar
        var groupId = e.get_state().groupId;

        // If groupId != currentGroupId then navigate
        if (groupId != _currentGroupId) {
            _currentGroupId = groupId;
            $("#divContactList").load("/Contact/Index/" + groupId);
            selectGroup(groupId);
        }
    }

    function selectGroup(groupId) {
        $('#leftColumn li').removeClass('selected');
        if (groupId)
            $('a[groupid=' + groupId + ']').parent().addClass('selected');
        else
            $('#leftColumn li:first').addClass('selected');
    }

    function beginContactList(args) {
        // Highlight selected group
        _currentGroupId = this.getAttribute("groupid");
        selectGroup(_currentGroupId);

        // Add history point
        Sys.Application.addHistoryPoint({ "groupId": _currentGroupId });

        // Animate
        $('#divContactList').fadeOut('normal');
    }

    function successContactList() {
        // Animate
        $('#divContactList').fadeIn('normal');
    }

    function failureContactList() {
        alert("Could not retrieve contacts.");
    }

</script>

<ul id="leftColumn">
<% foreach (var item in Model.Groups) { %>
    <li <%= Html.Selected(item.Id, Model.SelectedGroup.Id) %>>
    <%= Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" }, new { groupid = item.Id })%>
    </li>
<% } %>
</ul>
<div id="divContactList">
    <% Html.RenderPartial("ContactList", Model.SelectedGroup); %>
</div>

<div class="divContactList-bottom"> </div>
</asp:Content>

En la lista 5, el historial del explorador está habilitado en la función pageInit(). La función pageInit() también se usa para configurar el controlador de eventos para el evento de navegación. El evento de navegación se activa cada vez que el botón Adelante o Atrás del explorador hace que cambie el estado de la página.

Se llama al método beginContactList() al hacer clic en un grupo de contactos. Este método crea un nuevo punto de historial llamando al método addHistoryPoint(). El identificador del grupo de contactos al que se hace clic se agrega al historial.

El identificador de grupo se recupera de un atributo expando en el vínculo del grupo de contactos. El vínculo se representa con la siguiente llamada a Ajax.ActionLink().

<%= Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" }, new {groupid=item.Id})%>

El último parámetro pasado a Ajax.ActionLink() agrega un atributo expando denominado groupid al vínculo (en minúsculas para la compatibilidad con XHTML).

Cuando un usuario pulsa el botón Atrás o Adelante del explorador, se activa el evento de navegación y se llama al método navigate(). Este método actualiza los contactos mostrados en la página para que coincidan con el estado de la página que corresponde al punto de historial del explorador pasado al método de navegación.

Realización de eliminaciones de Ajax

Actualmente, para eliminar un contacto, debe hacer clic en el vínculo Eliminar y, a continuación, hacer clic en el botón Eliminar que se muestra en la página de confirmación de eliminación (vea la figura 2). Esto parece un montón de solicitudes de páginas para hacer algo tan simple como querer eliminar un registro de la base de datos.

Figura 02: La página de confirmación de eliminación (haga clic para ver la imagen de tamaño completo)

Es tentador omitir la página de confirmación de eliminación y eliminar un contacto directamente desde la vista Index. Debería evitar esta tentación porque tomar este enfoque abre la aplicación a vulnerabilidades de seguridad. En general, no quiere realizar una operación HTTP GET al invocar una acción que modifica el estado de su aplicación web. Al realizar una eliminación, quiere realizar una solicitud HTTP POST o, mejor aún, una operación HTTP DELETE.

El vínculo Eliminar está contenido en el parcial ContactList. En la lista 6 se incluye una versión actualizada del parcial ContactList.

Lista 6: Views\Contact\ContactList.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ContactManager.Models.Group>" %>
<%@ Import Namespace="Helpers" %>
<table class="data-table" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th class="actions edit">
                Edit
            </th>
            <th class="actions delete">
                Delete
            </th>
            <th>
                Name
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>
    </thead>
    <tbody>
        <% foreach (var item in Model.Contacts)
           { %>
        <tr>
            <td class="actions edit">
                <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
            </td>
            <td class="actions delete">
            <%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })%> 
            </td>
            <th>
                <%= Html.Encode(item.FirstName) %>
                <%= Html.Encode(item.LastName) %>
            </th>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>

El vínculo Eliminar se representa con la siguiente llamada al método Ajax.ImageActionLink():

<%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })%>

Nota:

El Ajax.ImageActionLink() no es una parte estándar del marco ASP.NET MVC. Ajax.ImageActionLink() es un método auxiliar personalizado incluido en el proyecto Contact Manager.

El parámetro AjaxOptions tiene dos propiedades. En primer lugar, la propiedad Confirm se usa para mostrar un cuadro de diálogo de confirmación emergente de JavaScript. En segundo lugar, la propiedad HttpMethod se usa para realizar una operación HTTP DELETE.

La lista 7 contiene una nueva acción AjaxDelete() que se ha agregado al controlador Contact.

Lista 7: Controllers\ContactController.cs (AjaxDelete)

[AcceptVerbs(HttpVerbs.Delete)]
[ActionName("Delete")]
public ActionResult AjaxDelete(int id)
{
    // Get contact and group
    var contactToDelete = _service.GetContact(id);
    var selectedGroup = _service.GetGroup(contactToDelete.Group.Id);

    // Delete from database
    _service.DeleteContact(contactToDelete);

    // Return Contact List
    return PartialView("ContactList", selectedGroup);
}

La acción AjaxDelete() está decorada con un atributo AcceptVerbs. Este atributo impide que la acción se invoque excepto por cualquier operación HTTP que no sea una operación HTTP DELETE. En concreto, no se puede invocar esta acción con HTTP GET.

Después de eliminar el registro de base de datos, debe mostrar la lista actualizada de contactos que no contiene el registro eliminado. El método AjaxDelete() devuelve el parcial ContactList y la lista actualizada de contactos.

Resumen

En esta iteración, agregamos la funcionalidad de Ajax a nuestra aplicación Contact Manager. Usamos Ajax para mejorar la capacidad de respuesta y el rendimiento de nuestra aplicación.

En primer lugar, hemos refactorizado la vista Index para que al hacer clic en un grupo de contactos no se actualice toda la vista. En su lugar, al hacer clic en un grupo de contactos solo se actualiza la lista de contactos.

A continuación, usamos efectos de animación de jQuery para atenuar y volver a mostrar la lista de contactos. La adición de animación a una aplicación de Ajax se puede usar para proporcionar a los usuarios de la aplicación el equivalente de una barra de progreso del explorador.

También hemos agregado compatibilidad con el historial del explorador a nuestra aplicación Ajax. Hemos habilitado a los usuarios para que hagan clic en los botones Atrás y Adelante del explorador para cambiar el estado de visualización de la vista Index.

Por último, hemos creado un vínculo de eliminación que admita operaciones HTTP DELETE. Al realizar eliminaciones de Ajax, se permite a los usuarios eliminar registros de base de datos sin necesidad de que el usuario solicite una página de confirmación de eliminación adicional.

Anterior Siguiente

Compartir a través de