Home Northwind

jueves, 7 de marzo de 2013

Llamando un asp.net WebService con JQuery Ajax con parametros

No hay comentarios.: Publicadas por Carlos Juan a la/s 8:28 p.m.
En este ejemplo vamos a llamar un web service que haga "Hello World" el cual es un ejemplo sencillo pero explica el llamado al web service con Jquery.

Primer paso: Crear una nueva aplicación.



 File > new web site




Segundo paso: Crear un web service



 Web site> Add new item

Codigo del web service:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 

/// <summary> 
/// Summary description for HelloWorld 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService] 
public class HelloWorld : System.Web.Services.WebService
{ 

    public HelloWorld() 
    { 

        //Uncomment the following line if using designed components 
        //InitializeComponent();  
    }    

    [WebMethod] 
    public string DisplayMessage(string message)
    { 
        return message; 
    } 
}



Tercer paso: Agregar una web page que realice la llamada al web service

 Web site> Add new item


Codigo de la llamada:

<%@ 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></title> 
    <script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <h2> 
            Example 1: Call Webservice using JQuery AJax (Without Input)</h2>
        <h2> 
             
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>         
        <asp:Button ID="btnGetMsg" runat="server" Text="Click Me" OnClientClick="DisplayMessageCall();return false;" /><br /> 
        <asp:Label ID="lblOutput" runat="server" Text=""></asp:Label> 
        <script type="text/javascript"> 
            function DisplayMessageCall() { 

                var pageUrl = '<%=ResolveUrl("~/HelloWorld.asmx")%>' 
                //var smensaje = document.getElementById("mensaje").value; 
                var smensaje = $("#TextBox1").val() 
                var dataString = "{ 'message' : '" + smensaje + "'}"; 
                $.ajax({ 
                    type: "POST", 
                    url: pageUrl + "/DisplayMessage", 
                    data: dataString, 
                    contentType: "application/json; charset=utf-8", 
                    dataType: "json", 
                    success: OnSuccessCall, 
                    error: OnErrorCall 
                }); 

            } 

            function OnSuccessCall(response) { 
                $('#<%=lblOutput.ClientID%>').html(response.d); 
            } 

            function OnErrorCall(response) { 
                alert(response.status + " " + response.statusText); 
            } 
        </script> 
    </div> 
    </form> 
</body> 
</html>
Ver

sábado, 2 de marzo de 2013

Llamando un asp.net WebService con JQuery Ajax

No hay comentarios.: Publicadas por Carlos Juan a la/s 11:12 p.m.
En este ejemplo vamos a llamar un web service que haga "Hello World" el cual es un ejemplo sencillo pero explica el llamado al web service con Jquery.

Primer paso: Crear una nueva aplicación.



 File > new web site




Segundo paso: Crear un web service



 Web site> Add new item

Codigo del web service:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 

/// <summary> 
/// Summary description for HelloWorld 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService] 
public class HelloWorld : System.Web.Services.WebService
{ 

    public HelloWorld() 
    { 

        //Uncomment the following line if using designed components 
        //InitializeComponent();  
    }    

    [WebMethod] 
    public string DisplayMessage()
    { 
        return "Hello World using jQuery Ajax"; 
    } 
}



Tercer paso: Agregar una web page que realice la llamada al web service

 Web site> Add new item


Codigo de la llamada:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" language="Javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <h2> 
            Example 1: Call Webservice using JQuery AJax (Without Input)</h2>
        <asp:Button ID="btnGetMsg" runat="server" Text="Click Me" 
        OnClientClick="DisplayMessageCall();return false;" />
        <br /> 
        <asp:Label ID="lblOutput" runat="server" Text=""></asp:Label> 
        <script type="text/javascript"> 
            function DisplayMessageCall() { 

                var pageUrl = '<%=ResolveUrl("~/HelloWorld.asmx")%>'

                $.ajax({ 
                    type: "POST", 
                    url: pageUrl + "/DisplayMessage", 
                    data: '{}', 
                    contentType: "application/json; charset=utf-8", 
                    dataType: "json", 
                    success: OnSuccessCall, 
                    error: OnErrorCall 
                }); 

            } 

            function OnSuccessCall(response) { 
                $('#<%=lblOutput.ClientID%>').html(response.d);
            } 

            function OnErrorCall(response) { 
                alert(response.status + " " + response.statusText); 
            } 
        </script> 
    </div> 
    </form> 
</body> 
</html>

Ver
Suscribirse a: Entradas (Atom)