Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

Tutorial: Agregar scripting de Ajax

ASP.NET AJAX habilita una aplicación web para recuperar los datos del servidor de forma asincrónica y actualizar partes de la página existente. Esto mejora la experiencia del usuario al hacer que la aplicación web sea más sensible.

Este tutorial muestra cómo comenzar a agregar la funcionalidad de ASP.NET AJAX a una aplicación ASP.NET MVC.

Un proyecto de Visual Studio con código fuente está disponible como acompañamiento de este tema: Download.

Para poder completar este tutorial, necesitará:

  • Microsoft Visual Studio 2008. No puede utilizar Microsoft Visual Web Developer Express Edition para este tutorial.

  • El marco de ASP.NET MVC 2. Si ha instalado Visual Studio 2010, ASP.NET MVC 2 ya está instalado en su equipo. Para descargar la versión más actualizada del marco, vea la página de descarga de ASP.NET MVC.

Para empezar, creará un proyecto nuevo de ASP.NET MVC. Para que este tutorial sea sencillo, no creará el proyecto de prueba que es una opción para los proyectos de ASP.NET MVC. Para obtener más información acerca de cómo crear un proyecto de prueba de MVC, vea Walkthrough: Creating a Basic MVC Project with Unit Tests in Visual Studio.

Para crear un proyecto nuevo de MVC

  1. En el menú Archivo, haga clic en Nuevo proyecto.

  2. En Tipos de proyecto del cuadro de diálogo Nuevo proyecto, expanda Visual Basic o Visual C# y, a continuación, haga clic en Web.

  3. En Plantillas instaladas de Visual Studio, seleccione aplicación web ASP.NET MVC.

  4. En el cuadro Nombre, escriba MvcAjaxApplication.

  5. En el cuadro Ubicación, escriba el nombre de la carpeta de proyecto.

  6. Seleccione Crear directorio para la solución.

  7. Haga clic en Aceptar.

  8. En el cuadro de diálogo Crear proyecto de prueba, seleccione No, no cree un proyecto de prueba unitaria.

    NotaNota:

    Si está utilizando Visual Studio 2008 Standard, no se muestra el cuadro de diálogo Crear proyecto de prueba unitaria. En su lugar, el nuevo proyecto de aplicación MVC se genera sin un proyecto de prueba.

  9. Haga clic en Aceptar.

    Se genera el nuevo proyecto de aplicación MVC.

La compatibilidad con la funcionalidad del cliente de ASP.NET AJAX se encuentra en dos bibliotecas de scripts: MicrosoftAjax.js y MicrosoftMvcAjax.js. La versión de lanzamiento y la versión de depuración de estos scripts se encuentran en la carpeta Scripts del proyecto. Para poder tener acceso a estas bibliotecas en el script de cliente, debe agregar las referencias de la biblioteca a las vistas de MVC en el proyecto actual.

Para hacer referencia a las bibliotecas de scripts de ASP.NET AJAX

  1. En el Explorador de soluciones, expanda la carpeta Views y, a continuación, expanda la carpeta Shared.

  2. Haga doble clic en el archivo Site.Master para abrirlo.

  3. Agregue el siguiente marcado al final del elemento head:

    
        <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" 
    		type="text/javascript"></script>  
        <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" 
    		type="text/javascript"></script>
    
    
    

    También puede arrastrar estos archivos desde el Explorador de soluciones a la vista Site.Master y este código se agregará automáticamente.

Luego agregará dos métodos de acción a los que se puede llamar de forma asincrónica desde el script de cliente. El método GetStatus sencillamente devuelve un estado de "OK" y la hora actual. El método UpdateForm recibe la entrada de un formulario HTML y devuelve un mensaje que incluye la hora actual.

Para agregar métodos de acción a la clase HomeController

  1. En el Explorador de soluciones, expanda la carpeta Controllers y, a continuación, haga doble clic en la clase HomeController para abrirla.

  2. Agregue el siguiente código después del método About.

    
    public string GetStatus()
    {
        return "Status OK at " + DateTime.Now.ToLongTimeString();
    }
    
    public string UpdateForm(string textBox1)
    {
        if (textBox1 != "Enter text")
        {
            return "You entered: \"" + textBox1.ToString() + "\" at " +
                DateTime.Now.ToLongTimeString();
        }
    
        return String.Empty;
    }
    
    
    

Por último, reemplazará el contenido de la página Index.aspx, que se agrega automáticamente al proyecto de Visual Studio para ASP.NET MVC. La nueva página Index.aspx muestra la hora a la que se representa la página, un mensaje del estado que tiene un vínculo para actualizar el mensaje de forma asincrónica y un formulario para enviar una cadena de texto.

Para volver a definir la página de índice

  1. En el Explorador de soluciones, expanda la carpeta Views, expanda la carpeta Home y, a continuación, abra la vista Index.

  2. Reemplace el contenido del control Content con el marcado siguiente:

    
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
    </p>
    <span id="status">No Status</span>
    <br />   
    <%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
    <br /><br />
    <% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
      <%= Html.TextBox("textBox1","Enter text")%>  
      <input type="submit" value="Submit"/><br />
      <span id="textEntered">Nothing Entered</span>
    <% } %>
    
    
    

    En el ejemplo, se crea un vínculo asincrónico llamando al método Ajax.ActionLink. Este método tiene varios reemplazos. En este ejemplo, acepta tres parámetros. El primero es el texto para el vínculo. El segundo parámetro es el método de la acción de MVC a la que se llama. El tercero es un objeto AjaxOptions que define el propósito de la llamada. En este caso, el código actualizará el elemento DOM cuyo identificador es status.

    El formulario se define utilizando el método Ajax.Form, que también tiene varios reemplazos. En este ejemplo, acepta dos parámetros. El primer parámetro es el método de acción al que se llama. El segundo parámetro es otro objeto AjaxOptions, que especifica que se actualizará el elemento DOM cuyo identificador es textEntered.

Ahora puede ejecutar la aplicación y ver cómo funciona.

Para ejecutar la aplicación MVC

  1. Presione CTRL+F5.

    La página muestra la hora en que se representó.

  2. Haga clic en el vínculo Estado de la actualización.

    El mensaje del estado se actualiza con la hora de la actualización. Observe que sólo se actualizó el mensaje de estado.

  3. En el cuadro de texto, escriba el texto y, a continuación, haga clic en el botón Enviar.

    Un mensaje muestra el texto que escribió y la hora a la que lo escribió. Una vez más, observe que sólo se procesó el formulario.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2015 Microsoft