Guia Ajax

GUIA AJAX
DEMO1.aspx
Agregar un web site y Copiar la carpeta scripts con la clase jquery
Ir a la vista codigo y agregar los siguientes scripts
<head runat="server">
<script type="text/javascript" src="./Scripts/jquery-1.6.1.min.js"
></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
alert("¡Hola mundo!");
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
Capturando el evento "ready" del documento
La función $(document).ready(funcion) es el primer código que cualquier usuario de la

librería debería conocer. Mediante el uso de esta función, se delega la ejecución del código
"envuelto" por la misma, para que éste sea ejecutado solamente cuando todos los elementos del
DOM hayan sido cargados, sin necesidad de esperar a la descarga de los demás recursos
solicitados por la página.
Cualquier código que escribamos y que haga uso de la librería tendrá que incluirse dentro de este
u otro de los métodos de delegación que nos ofrece jQuery.
Ejemplo
En este primer ejemplo, vamos a hacer uso de la función $(document).ready(funcion) para
que una vez el DOM se encuentre disponible, se nos muestre un mensaje de alerta.
Para ello, necesitamos una página básica que incorpore la librería
DEMO2
<title></title>
<script type="text/javascript" src="./Scripts/jquery-1.6.1.min.js"
></script>
$("#btnAnimate").click(function () {
$("#Panel1").animate(
{
width: "350px",
opacity: 0.5,
fontSize: "16px"
}, 1800);
});
});
</script>
<style type="text/css">
div {
background-color:#D5EDEF;
color:#4f6b72;
width:50px;
border: 1px solid #C1DAD7;
}
</style>
AGREGAR LOS CONTROLES
<body>
<form id="form1" runat="server">
<input id="btnAnimate" type="button" value="Animate" />
<asp:Panel ID="Panel1" runat="server">

Algún ejemplo de texto en este panel
</asp:Panel>
<div>
</div>
</form>
</body>
DEMO3
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"
type="text/javascript"></script>
$(function () {
$('#btnSumar').click(function () {
var num1 = $('#num1').val(); //Obtenemos el primer número
var num2 = $('#num2').val(); //Obtenemos el segundo número
$.ajax({
type: "POST", //tipo de llamada
url: "Default0.aspx/Sumar", //Dirección del WebMethod, o
sea, Página.aspx/Método
data: '{Valor1: ' + num1 + ', Valor2: ' + num2 + '}',
//Parámetros para pasarle al método
contentType: "application/json; charset=utf-8", //Tipo de
contenido
dataType: "json", //Tipo de datos
success: resultado, //Función a la cual llamar cuando se
pudo llamar satisfactoriamente al método
error: errores //Función a la cual llamar cuando se
producen errores
});
});
});
function resultado(msg) {
//msg.d tiene el resultado devuelto por el método
$('#num3').val(msg.d);
}
function errores(msg) {
//msg.responseText tiene el mensaje de error enviado por el
servidor
alert('Error: ' + msg.responseText);
}
</script>
</head>
<body>
<div>
<br />
<br />
<br />
<input type="text" id="num1" />
<input type="text" id="num2" />
<input type="button" value="=" id="btnSumar" />
<input type="text" id="num3" disabled />
</div>
<div>
</div>
</form>
<p>
Demo4
1.Copiar en Script
jquery.autocomplete
2.agregar el archivo ashx (Search.ashx)

Código de search.ashx
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
public class Search_CS : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string prefixText = context.Request.QueryString["q"];

using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactName from Customers where " +
"ContactName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = conn;
StringBuilder sb = new StringBuilder();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
sb.Append(sdr["ContactName"])
.Append(Environment.NewLine);
}
}
conn.Close();
context.Response.Write(sb.ToString());
}
}
public bool IsReusable {

get {
return false;
}
}
3. agregar la conexión en el Web.config
<connectionStrings>
<add name="constr" connectionString="Data Source = .;
Initial Catalog = Northwind; Integrated Security = true"/>
</connectionStrings>
4. agregar en el formularo el cuadro de texto con este nombre

<div>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
5. agregar el siguiente script
<script src="./Scripts/jquery-1.6.1.min.js"
type="text/javascript"></script>
<script src="./Scripts/jquery.autocomplete.js" type="text/javascript"></script>
$("#<%=txtSearch.ClientID%>").autocomplete('Search_CS.ashx');
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>
</head>

Guia Ajax

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Ajax

Cargado por

Copyright:

Formatos disponibles

GUIA AJAX

Agregar un web site y Copiar la carpeta scripts con la clase jquery

Ir a la vista codigo y agregar los siguientes scripts

Capturando el evento "ready" del documento

La función $(document).ready(funcion) es el primer código que cualquier usuario de la

AGREGAR LOS CONTROLES

<asp:Panel ID="Panel1" runat="server">

2.agregar el archivo ashx (Search.ashx)

public void ProcessRequest (HttpContext context) {

string prefixText = context.Request.QueryString["q"];

public bool IsReusable {

3. agregar la conexión en el Web.config

4. agregar en el formularo el cuadro de texto con este nombre

<form id="form1" runat="server">

<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>

5. agregar el siguiente script

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

También podría gustarte