Javascript personalizado Ajax para ASP.NET

Question

He escrito algunas funciones básicas de Javascript y me gustaría aprender a habilitar las devoluciones de datos asincrónicas dentro de un proyecto C# 4.0/ASP.net utilizando este código JS.

Por ejemplo, tengo un script que incrementa un número al hacer clic. Cuando se vuelve a hacer clic, el número disminuye. Básicamente cargo el número de una base de datos, luego escondo uno <span> y muestro otro con el número decrementado correspondiente al hacer clic. Esto no es complicado javascript; es un simple ejemplo. Ahora cuando hago clic en el botón, deseo enviar esta llamada de incremento/decremento al servidor para actualizar el número de la base de datos.

Me doy cuenta de que puedo lograr algo similar a este ejemplo utilizando el botón de alternar del kit de herramientas de control AJAX. Yo, sin embargo, quiero saber cómo usar mi PROPIO javascript para crear la funcionalidad de AJAX.

¿Cómo puedo lograr esto usando C# y mi código JavaScript personalizado?

No me opongo al uso de la biblioteca AJAX de ASP.net, simplemente no quiero usar un control listo para usar. Quiero aprender el proceso de crear mi propia funcionalidad AJAX. Supongo que tendré que usar un asp:UpdatePanel, pero no sé cómo llamar a las funciones de C# desde el lado del cliente.

Mi javascript no es jQuery, de hecho, no quiero tener nada que ver con jQuery hasta que sepa más sobre javascript y este proceso.

Answer 1

si usa un UpdatePanel es muy simple con una llamada de JavaScript al __doPostBack. Ver here for example.

Answer 2

Tener un vistazo a este tutorial en torno AJAX http://www.w3schools.com/Ajax/Default.Asp

Se le dará una visión general del uso de Javascript para GET y POST de datos utilizando AJAX.

Espero que esto ayude.

Answer 3

Aquí hay un enlace sobre cómo puede incorporar ASP.NET C# con su código JavaScript personalizado.

http://msdn.microsoft.com/en-us/library/bb386450.aspx

También contiene una muestra VS 2010 proyecto aquí: http://go.microsoft.com/fwlink/?LinkId=185646

Aquí es generalmente lo que está pasando aquí:

En la solución AjaxIScriptControl:

SampleTextBox. cs - se encarga de procesar el script rol en la página; y el apego al cliente de código JavaScript (el archivo js)

SampleTextBox.js - se encarga de la funcionalidad del lado del cliente y genera Javascript objeto de control a través de prototipo

Notas:

• Este ejemplo aprovecha el ASP existente .NET de control incorporado (que aviso SampleTextBox hereda de cuadro de texto y IScriptControl) pero se puede rendir ningún tipo de control HTML si se hereda la clase ScriptControl lugar.

• Esta solución también optó por el código de control de secuencias de comandos separados y el sitio web de código en dos proyectos, pero se puede hacer fácilmente en uno.

• Puede aprovechar fácilmente otra biblioteca Javascript en su archivo JS

En mi experiencia hasta ahora, este es el uno de la manera más elegante para incorporar código del lado del servidor con el lado del cliente si va a crea controles reutilizables para tu sitio web. Aprovecha la potencia del lado del servidor para hacer la representación inicial mientras proporciona capacidades del lado del cliente a través de Javascript.

Answer 4

Si crea sus funciones de C# como WCF REST Services o anterior Script Services, puede llamar fácilmente a sus métodos de servicio desde JavaScript utilizando una XmlHttpRequest básica (no se necesitan jQuery o UpdatePanels).

He aquí una rápida jsFiddle junté: http://jsfiddle.net/ndVeS/

Esta muestra tiene dos cuadros de texto; ingresa un valor en el primero, haga clic en el botón y luego ese valor se pasa a un servicio (un servicio de eco) y se devuelve en la devolución de llamada. El código JavaScript toma ese valor y rellena el segundo cuadro de texto con él.

Se podría definir un C# WCF servicio REST así:

[ServiceContract] 
public class EchoService : IEchoService { 
    [WebGet(UriTemplate="EchoMe?val={theValue}, ResponseFormat=WebMessageFormat.Json)] 
    public string EchoMe(string theValue) { 
    return theValue; 
    } 
} 

Si usted maneja sus llamadas de esta manera, se puede separar a cabo su lógica de servicio de su presentación (archivos ASPX), y esto permite una fácil probando y también puede separar las responsabilidades de aquellos que construyen la UI de aquellos que crean la funcionalidad comercial.

Tengo que admitir que soy más una persona jQuery en lo que respecta a esto, pero pensé que era un gran ejercicio descubrir cómo funciona la XmlHttpRequest bajo el capó. Te hace apreciar lo que proporciona jQuery (o un marco similar).

Aquí hay una buena visión general del objeto XmlHttpRequest y cómo usarlo: http://www.jibbering.com/2002/4/httprequest.html

espero que esto ayude.

Answer 5

function GetXmlHttpObject(handler) { 
var objXMLHttp = null 
if (window.XMLHttpRequest) { 
    objXMLHttp = new XMLHttpRequest() 
} 
else if (window.ActiveXObject) { 
    objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP") 
} 
return objXMLHttp; 

}

función GetDropDown() {

function stateChanged(StatesUpdated) { 


    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { 
     document.getElementById('updateplace').innerHTML = xmlHttp.responseText; 
     //"updateplace" is you div id which will hold the new data or new page 
     if (navigator.appName != "Microsoft Internet Explorer") { 

     } 
    } 
    else { 
     //alert(xmlHttp.status); 
    } 
} 





xmlHttp = GetXmlHttpObject() 
if (xmlHttp == null) { 
    alert("Browser does not support HTTP Request"); 
    return; 
} 



    url = "xyz.aspx" //this might be sent to any post data 
    url = url + "&sid=" + Math.random(); 


    xmlHttp.onreadystatechange = stateChanged; 

    xmlHttp.open("GET", url, true); 

    xmlHttp.send(null); 

}

con el código anterior puede enviar datos a cualquier Cs archivo también donde puede cambiar los datos y cárguelo en una nueva página que se cargará en la actualización div y el método debería redirigirse al nuevo archivo aspx.

Espero que tengas la lógica :)

si tiene cualquier duda me llegan @ sankalpa.sam@gmail.com

Answer 6

Yo sé que no es MVC que está haciendo, pero tienen un aspecto en la sección MVC del sitio ASP.NET y encontrarás muchos ejemplos de llamadas AJAX allí: MVC no usa esos terribles script-soup creando objetos .NET. La mayoría probablemente usará jQuery; esta es una biblioteca de JavaScript de código abierto que se puede conectar a cualquier aplicación web y proporciona una funcionalidad realmente agradable.

Answer 7

Tal vez ur buscando este:

función ajaxscript() {$ .ajax ({ tipo: "POST", url: | url/methodName |, datos: | variable_name |, contentType : "application/json; charset = utf-8", dataType: "json", éxito: | algunos javascript aquí |, error: | algunos javascript aquí | });

Answer 8

simple sin UpdatePanel:

En primer lugar, agregar un controlador genérico para su proyecto (.ashx). Esto actuará como nuestro punto final Http. Nuestro javascript lo llamará. Podríamos (y probablemente deberíamos) usar un punto final del servicio web, pero eso requiere procesar la respuesta y complica el ejemplo. Un controlador devuelve texto sin formato.

<%@ WebHandler Language="C#" Class="Handler" %> 

using System; 
using System.Web; 

public class Handler : IHttpHandler 
{ 
    // We'll use a static var as our "database". 
    // Feel free to add real database calls to the increment 
    // and decrement actions below. 
    static int TheNumber = 0; 

    public void ProcessRequest(HttpContext context) 
    {  
     string action = context.Request.QueryString["action"]; 
     if (!string.IsNullOrEmpty(action)) 
     { 
      if (action == "increment") 
       TheNumber++; //database update and fetch goes here 
      else if (action == "decrement") 
       TheNumber--; //database update and fetch goes here   
     } 
     context.Response.ContentType = "text/plain"; 
     context.Response.Write(TheNumber); 
    } 

    public bool IsReusable { get { return false; } } 
} 

A continuación, cree su página web y añada el código async javascript.

<%@ Page Language="C#"%> 
<html> 
<head runat="server">  
    <script type="text/javascript"> 
    // An XMLHttpRequest object is required to make HTTP requests. 
    // Try a couple instantiation strategies to handle different 
    // browser implementations. 
    function createXMLHttpRequest() { 
     try { return new XMLHttpRequest(); } catch (e) { } 
     try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } 
     try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } 
     alert("XMLHttpRequest not supported"); 
     return null; 
    } 

    function callHandler(action) { 
     var xmlHttpReq = createXMLHttpRequest(); 
     // We're interested in an asychronous request so we define a 
     // callback function to be called when the request is complete. 
     xmlHttpReq.onreadystatechange = function() { 
      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) 
       document.getElementById("<%= lbl.ClientID%>").innerHTML 
        = xmlHttpReq.responseText; 
     } 
     xmlHttpReq.open("GET", "Handler.ashx?action=" + action, true); 
     xmlHttpReq.send(null); 
    } 
    </script> 
</head> 
<body> 
    <form id="Form1" runat="server"> 
    <div> 
    The Number:&nbsp;<Label runat="server" id="lbl">0</Label> 
    </div> 
    <div> 
     <asp:Button ID="Button1" runat="server" Text="Increment" 
      OnClientClick="callHandler('increment');return false;" /> 
     &nbsp; 
     <asp:Button ID="Button2" runat="server" Text="Decrement" 
      OnClientClick="callHandler('decrement');return false;" /> 
    </div> 
    </form> 
</body> 
</html> 

El flujo final es:

• Un Web página de usuario hace clic en el botón Más o Menos que exige nuestro código JavaScript
• Nuestra Javascript envía una petición con la acción deseada en la cadena de consulta a Handler. ashx
• Handler.ashx lee la cadena de consulta, incrementa o disminuye su variable estática, y devuelve el valor
• Nuestra devolución de llamada recibe el valor y actualiza nuestra UI.