This article is currently in the process of being translated into Spanish (~99% done).

Los basicos:

Hello, world!

Como siempre, utilizaremos nuestro viejo y conocido "Hello, world!" como nuestro primer ejemplo. Empezaremos con el código y luego haremos un poco de explicaciones después. Si aún no lo has hecho, debes de crear un nuevo proyecto sitio web ASP.NET en Visual Studio Express 2012. El IDE creara un archivo Default.aspx y un Default.aspx.cs para ti, que se parecerá tal como cualquier otra página habilitada por ASP.NET. Vamos a agregarle algo de AJAX a él:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello, world!</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="MainScriptManager" runat="server" />
        <asp:UpdatePanel ID="pnlHelloWorld" runat="server">
            <ContentTemplate>
                <asp:Label runat="server" ID="lblHelloWorld" Text="Click the button!" />
                <br /><br />
                <asp:Button runat="server" ID="btnHelloWorld" OnClick="btnHelloWorld_Click" Text="Update label!" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

En el CodeBehind, no hay nada nuevo a excepción de este evento que debes agregar:

protected void btnHelloWorld_Click(object sender, EventArgs e)
{
    lblHelloWorld.Text = "Hello, world - this is a fresh message from ASP.NET AJAX! The time right now is: " + DateTime.Now.ToLongTimeString();
}

En la parte de marcado, usamos dos cosas nuevas, en comparación con ASP.NET regular: el control ScriptManager y el control UpdatePanel. ScriptManager se asegura de que se incluyan los archivos ASP.NET AJAX necesarios y que se agregue la compatibilidad con AJAX, y debe incluirse en todas las páginas en las que desee utilizar la funcionalidad AJAX.

Después del administrador, tenemos uno de los controles más utilizados al trabajar con AJAX, el UpdatePanel. Este control le permite ajustar el marcado que desea permitir que se actualice parcialmente, es decir, que se actualice sin causar una devolución de datos real al servidor. Más sobre UpdatePanel en un próximo capítulo. Además de esos dos controles, todo lo demás son controles estándar, sin modificaciones que indiquen un comportamiento alternativo.

Intenta ejecutar el sitio de ejemplo y haz clic en el botón. La etiqueta se actualizará con nuestro texto Hello World habitual y la hora actual. Intente hacer clic repetidamente en el botón, y verá que la etiqueta obtiene la marca de tiempo actual cada vez. Observe la maravillosa ausencia de una ventana parpadeante y una barra de estado en ejecución; todo está hecho sin actualizar nada más que la etiqueta. Acabamos de crear nuestra primera página habilitada para AJAX. Si desea ver cómo funcionaría esta página sin AJAX, intente configurar el "enablepartialrendering" del ScriptManager como falso:

<asp:ScriptManager ID="MainScriptManager" runat="server" enablepartialrendering="false" />

Esto no permitirá el uso de renderizado parcial en la página, y le mostrará cómo funcionaría sin AJAX.

En los siguientes capítulos examinaremos los diversos controles AJAX y cómo usarlos.

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata

Hello, world!