sábado, 7 de diciembre de 2013

Llenar DropDownlist con MVC 4.5 Json

No hay comentarios.:



1.) Primer paso a ser un proyecto, File --> New Project



2.) Se solicitara que seleccione el tipo de proyecto, seleccione MVC.



3.) Para realizar el ejemplo, necesitamos datos, utilizaremos Entity Framework,  en la carpeta de "Model" presione clic derecho, y luego "New Item".



4.) En la sección de Data seleccione "Ado .Net Entity Data Model"



5.) Se mostrara la pantalla para que seleccione "Generate from database"



6.) Se solicitara la pantalla para que ingrese sus credenciales.




7.) Se mostrara la pantalla para seleccionar las tablas, seleccione "Categories","Products" y "Suppliers"



 Ahora vamos a crear el controlador de la tabla "Products" y generamos con Scaffold las vistas, no olvide generar el proyecto.

8.) Agregado el controller, en la carpeta "Controller" clic derecho "add new item"


9.) En la pantalla de "Add Scaffold" selecionamos "MVC 5 Controller with views using Entity Framework"



10.) En la pantalla de Add Controller complete con lo siguiente. (No olvide compilar antes), esto generar las vistas de "products"



Por fin tenemos vistas con DropDownlist para jugar, si ejecutamos el proyecto y entramos "Productos/Create" podremos ver que tiene los DropDownlist de "Categoria" y "Proveedores"


Debemos de crear los métodos que retornen json para su posterior uso.

11.)  Abra la el controllador de Productos Ubicado en Controllers, el nombre será "ProductsController" y agregue el siguiente código:




 public JsonResult getcategories() 
        { 
            var query = from c in db.Categories 
                        select new { c.CategoryID, c.CategoryName };

            return Json(query,JsonRequestBehavior.AllowGet); 

        } 
 public JsonResult getsuppliers() 
        { 
            var query = from s in db.Suppliers 
                        select new {s.SupplierID, s.CompanyName };

            return Json(query, JsonRequestBehavior.AllowGet); 

        }

12.)  En este mismo controlador, debemos de comentar el código de llenado de los viewbag que usan los  Dropdownlist en el método create.

public ActionResult Create() 
{ 
//ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName"); //ViewBag.SupplierID = new SelectList(db.Suppliers, "SupplierID", "CompanyName"); 
 return View(); 
}

Procederemos a llenar el DropDownlist de Suppliers y Category con Json.

13.) Abra el archivo de "Create" ubicado en "View" --> "Products" --> "Create.cshtml"



Al abrir el archivo debemos de comentar los Dropdownlist de Razor y cambiarlos por select de html.

Cambia:

@Html.DropDownList("SupplierID", String.Empty)

Por:
<select name="SupplierID" id="SupplierID"> 
      <option value="">Seleccione uno...</option> 
</select> 
                 
             


Cambia:

@Html.DropDownList("CategoryID", String.Empty)

Por:
<select name="CategoryID" id="CategoryID"> 
            <option value="">Seleccione uno...</option> 
</select> 
               



15.) En el mismo archivo "Create.cshtml" debemos agregar el Json de llenado, busque la  sección "Script" y reemplace por los siguiente:

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script> 
        $(document).ready(function () { 
            load_categories(); 
            load_suppliers(); 
        }); 

        function load_categories() { 
            $.get( 
                  '@Url.Action("getcategories", "products")' 
               ) 
              .done(function (data) { 
                  $.each(data, function (i, row) { 
                      var $option = $('<option>');
                      $option.val(row.CategoryID); 
                      $option.html(row.CategoryName); 
                      $('#CategoryID').append($option); 
                  }) 
              }) 
              .fail(function (data) { 
                  console.log('error !!!'); 
              } 
          ); 
        } 

        function load_suppliers() { 
            $.get( 
                '@Url.Action("getsuppliers", "products")' 
             ) 
            .done(function (data) { 
                $.each(data, function (i, row) { 
                    var $option = $('<option>');
                    $option.val(row.SupplierID); 
                    $option.html(row.CompanyName); 
                    $('#SupplierID').append($option); 
                }) 
            }) 
            .fail(function (data) { 
                console.log('error !!!'); 
            } 
        ); 
        } 
    </script> 
} 

El resultado sera:

Ver

jueves, 14 de noviembre de 2013

Bienvenido Visual Studio 2013

2 comentarios:
Me ha sorprendido que sacaran un nuevo Visual Studio con tan solo un año de su antecesor  la verdad he estado perdiendo la fe en el gigante de Seattle, pero esta versión me ha sorprendido tiene cambios que tanto pedíamos.


Novedades Web

  • La primera buena noticia es que han incorporado como tema de nuestras aplicaciones web Bootstrap 3.0 que nuestros amigos de twitter nos lo proporcionan,  para los que no lo conocen es un framework front-end (CSS,JavaScript) que nos ayudara a que nuestro sitio este elegante y tenga la característica de "Responsive"

  • La segunda buena noticia es la integración de las aplicaciones web, ahora están unidas MVC y web Form, por lo que podemos tener ambos en un mismo sitio, esto es una gran ventaja para que aun están en webForm ya que pueden utilizar los desarrollos actuales (con unos ligeros cambios) y luego migrarlos a MVC.
Bueno pronto estaré haciendo mas post.



Ver

miércoles, 30 de octubre de 2013

Instalar Cliente de Oracle en REDHAT

No hay comentarios.:
1.) Descargar el cliente de la pagina de oracle Instant Client Downloads los siguientes archivos:

Instant Client Package - Basic
Instant Client Package - SQL*Plus
Instant Client Package - SDK
Instant Client Package - JDBC

2.) Descomprima los archivos

mkdir instantclient
unzip instantclient-basic-linux-11.2.zip
unzip instantclient-sqlplus-linux-11.2.zip
unzip instantclient-sdk-linux-11.2.zip
unzip instantclient-jdbc-linux-11.2.zip

3.) Crear dos enlaces simbólicos para los archivos que tienen la versión adjunta, también les servirá para OCI8.

cd instantclient
ln -s libclntsh.so.11.1 libclntsh.so
ln -s libocci.so.11.1 libocci.so

4.) Crea el directorio /usr/local/oracle/ y mueva allí su carpeta instantclient

sudo mkdir /usr/local/oracle
sudo mv instantclient11_1 /usr/local/oracle/instantclient11_1

5.)  Editaremos el archivo /etc/profile

sudo vi /etc/profile

6.) Agregaremos las variables de ambiente al archivo /etc/profile

export ORACLE_HOME="/usr/local/oracle/instantclient11_1"
export LD_LIBRARY_PATH=$ORACLE_HOME
export SQLPATH=$ORACLE_HOME
export TNS_ADMIN=$ORACLE_HOME/admin
export PATH=$PATH:$ORACLE_HOME
export EDITOR=vi 

7.) Recargar el profile

source /etc/profile

8.) Ahora podemos probar el sqlplus, debe mostrarnos algo como lo siguiente:

sqlplus

SQL*Plus: Release 11.2.0.3.0 Production on Wed Oct 30 14:30:30 2013

Copyright (c) 1982, 2012, Oracle.  All rights reserved.

Enter user-name:

9.) Crear tnsnames.ora

sudo vi $ORACLE_HOME/admin/tnsnames.ora 

10.) Agregue lo siguiente, cambie la información para que se adecue a su servidor.

TEST =
  (DESCRIPTION =
    (ADDRESS_LIST =
      (ADDRESS = (PROTOCOL = TCP)(HOST = 10.0.0.1)(PORT = 1521))
    )
    (CONNECT_DATA =
      (SERVICE_NAME = test)
    )
  )

11.) Pruebe su conexion con sqlplus.

sqlplus scott/scott@orcl

Ver

Instalar Cliente de Oracle en Mac OS X

5 comentarios:
1.) Descargar el cliente de la pagina de oracle Instant Client Downloads los siguientes archivos:

Instant Client Package - Basic
Instant Client Package - SQL*Plus
Instant Client Package - SDK
Instant Client Package - JDBC


2.) Descomprima los archivos

mkdir instantclient
unzip instantclient-basic-macosx-11.2.zip
unzip instantclient-sqlplus-macosx-11.2.zip
unzip instantclient-sdk-macosx-11.2.zip
unzip instantclient-jdbc-macosx-11.2.zip

3.) Crear dos enlaces simbólicos para los archivos que tienen la versión adjunta, también les servirá para OCI8.

cd instantclient
ln -s libclntsh.dylib.11.1 libclntsh.dylib
ln -s libocci.dylib.11.1 libocci.dylib

4.) Crea el directorio /usr/local/oracle/ y mueva allí su carpeta instantclient

sudo mkdir /usr/local/oracle
sudo mv instantclient11_1 /usr/local/oracle/instantclient11_1

5.)  Editaremos el archivo /etc/profile

sudo vi /etc/profile

6.) Agregaremos las variables de ambiente al archivo /etc/profile

export ORACLE_HOME="/usr/local/oracle/instantclient11_1"
export DYLD_LIBRARY_PATH=$ORACLE_HOME
export SQLPATH=$ORACLE_HOME
export TNS_ADMIN=$ORACLE_HOME/admin

7.) Editaremos el archivo /Users/usuario/. bash_profile

vi .bash_profile

8.) Agregaremos las variables de ambiente a su profile, esto le servirá para poder llamar al sqlplus de cualquier lugar y editar las consultas en el sqlplus, el editor seria vi, puede que su favorito sea nano o algún otro.

export PATH=$PATH:$ORACLE_HOME
export EDITOR=vi 

8.) Recargar el profile

source /etc/profile

9.) Ahora podemos probar el sqlplus, debe mostrarnos algo como lo siguiente:

sqlplus

SQL*Plus: Release 11.2.0.3.0 Production on Wed Oct 30 14:30:30 2013

Copyright (c) 1982, 2012, Oracle.  All rights reserved.

Enter user-name:

10.) Crear tnsnames.ora

sudo mkdir $ORACLE_HOME/admin
sudo vi $ORACLE_HOME/admin/tnsnames.ora 

11.) Agregue lo siguiente, cambie la información para que se adecue a su servidor.

TEST =
  (DESCRIPTION =
    (ADDRESS_LIST =
      (ADDRESS = (PROTOCOL = TCP)(HOST = 10.0.0.1)(PORT = 1521))
    )
    (CONNECT_DATA =
      (SERVICE_NAME = test)
    )
  )

12.) Pruebe su conexion con sqlplus.

sqlplus scott/scott@orcl

Ver

sábado, 14 de septiembre de 2013

Ejemplo de un reporte Visual Studio (RDLC)

19 comentarios:
Cual es la diferencia entre un RDL VS RDLC.

RDL = Reporte de Reporting Service (Si cuentas con reporting service)

RDLC = Reporte que no necesita Reporting Service. (Recomendado para web hosting)



 1.) Seleccione “Add new item” y seleccione report, en nombre escriba: clientes.rdlc



Puede observar que se agrego el reporte a su web site, presione doble click sobre el reporte clientes.rdlc



 2.) El reporte esta en blanco...  presione clic derecho sobre dataset y luego new dataset...



 3.) En la pantalla de "Dataset Properties" se mostrara. Deje el nombre "DataSet1", en la sección de Data source precione "New..."



4.) En la ventana de "Data Source Configuration Wizard" , seleccione "New Connection.."



5.) En la ventana "Add Connection" complete la información de la conexión.



6.) Al completar la información del servidor se mostrara una pantalla como esta, precione "Next >"



7.) En el siguiente paso complete la información solo esta en la imagen siguiente y precione "Next >"



8.) En el ultimo paso, puede seleccionar los objetos a utilizar, seleccione la tabla "Customers" y precione "Finish"



9.)  Regresara a la pantalla "Dataset Properties" pero ahora no esta vacío los campos "Data Source" y "Avaible dataset",  complete la información tal y como se muestra en la imagen y luego precione "OK"



10.) Regresa al reporte y aun esta vacío, relax pronto lo llenara. Precione clic derecho sobre el reporte y luego Insert--> Table



11.) Ahora es tiempo de agregar los campos a la tabla, es muy fácil solo tiene que arrastrar los campos.




12.) Abra la pagina "Defaul.aspx" si no la tiene créala, en esta pagina tiene que agregar los controles "ScriptManager" y "ReportViewer".



13.) Ahora debemos de agregar el codigo de llenado, precione clic derecho "View code" y agregue el siguiente código, no olvide los using.


Aquí tienen su reporte, por lo que el resultado  será:



Agregando un filtro al reporte

Es posible que quieras agregar algún filtro, en el siguiente ejemplo filtraremos el país.

14.) Lo primero será  abrir el Dataset "NorthwindDataSet.xsd"



15.) En la tabla de "Customers" clic derecho "Add Query"



16.) En la ventana "TableAdapter"  Seleccione "Use SQL Statements"




17.) En la ventana "TableAdapter" Seleccione "Select which returns rows"



18.) En la ventana "TableAdapter" agregue al query el where "Country = @country"



19.) En la ultima pantalla puede agregar un nombre de query, complete la información tal y como muestra la imagen y uego precione "finish"



20.) Finalmente llamaremos el query que acabamos de hacer y enviaremos un parámetro.



Resultado:

Ver

sábado, 1 de junio de 2013

Timer con jquery

No hay comentarios.:
Un ejemplo fácil de un timer con jquery, la función se ejecutara cada 5mil mili segundos.



<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
        window.setInterval(funciontimer, 5000);           
         
  function funciontimer() {    
   alert('test'); 
  } 
</script>
</body>
</html>

Ver

jueves, 23 de mayo de 2013

Llenar un combo con query y json con aspnet

3 comentarios:

1.) Agregar este codigo en el HTML


<Form>
 <select id="cboEjemplo">
  <option value="">Seleccione uno...</option>
 </select>
</Form>
            

2.) Agregar este jquery al final del documento.

 <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "pagina.aspx/llenar",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var datos = $.parseJSON(msg.d);

                    $(datos).each(function () {
                        var option = $(document.createElement('option'));

                        option.text(this.Nombre);
                        option.val(this.Codigo);

                        $("#cboEjemplo").append(option);
                    });
                },
                error: function (msg) {
                    $("#dvAlerta > span").text("Error al llenar el combo");
                }
            });
         });
</script>
            

3.) Agregar este codigo para crear en webmethod que generar el json basado en entity framework

[System.Web.Services.WebMethod]
    public static string llenar()
    {
        NorthwindEntities db = new NorthwindEntities();

        var query = from c in db.Categories
                    select new
                    {
                        Codigo = c.CategoryID,
                        Nombre = c.CategoryName
                    };

        return Newtonsoft.Json.JsonConvert.SerializeObject(query);
        
    }
            

Nota: no olvide descargar la libreria Newtonsoft para generar el json, es mas rapida que la nativa de Microsoft.

Ejemplo del HTML Completo.

<!DOCTYPE html>
<html>
  <head>
    <title>ejemplo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <Form>
 <select id="cboEjemplo">
  <option value="">Seleccione uno...</option>
 </select>
    </Form>
    <script src="js/jquery.js"></script>
    <script type="text/javascript"&gt
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "pagina.aspx/llenar",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var datos = $.parseJSON(msg.d);

                    $(datos).each(function () {
                        var option = $(document.createElement('option'));

                        option.text(this.Nombre);
                        option.val(this.Codigo);

                        $("#cboEjemplo").append(option);
                    });
                },
                error: function (msg) {
                    $("#dvAlerta > span").text("Error al llenar el combo");
                }
            });
         });
</script&gt
 
  </body&gt
</html>

Librerias necesarias:
Jquery

Newtonsoft

Agradecimientos a Luis Alberto por su ayuda. 
Ver

miércoles, 10 de abril de 2013

Generar un JSON desde PHP

No hay comentarios.:
En este ejemplo vamos a crear un JSON desde PHP.

Para crear una cadena para expresar un objeto con JSON en PHP se dispone de una función llamada json_encode(), que recibe lo que deseamos convertir en notación JSON y devuelve una cadena de texto con el JSON producido.

En el ejemplo nos conectaremos a mysql y extraemos información y la convertiremos en JSON.

<?php
 $link = mysql_pconnect("localhost", "root", "xxx") or die("Unable To Connect");
 mysql_select_db("Northwind") or die("Unable To Connect To Northwind");
 
 $arr = array();
 $rs = mysql_query("SELECT EmployeeID, LastName, FirstName FROM Employees");
 
   while($obj = mysql_fetch_object($rs)) {
         $arr[] = $obj;
   }
 
  header("Content-type: application/json"); 
 
  echo "{"data":" .json_encode($arr). "}";
 ?>


Resultado:
{"data":[{"EmployeeID":"1","LastName":"Davolio","FirstName":"Nancy"},
{"EmployeeID":"2","LastName":"Fullerr","FirstName":"Andrew"},
{"EmployeeID":"3","LastName":"Leverling","FirstName":"Janet"},
{"EmployeeID":"4","LastName":"Peach","FirstName":"Margaret"},
{"EmployeeID":"5","LastName":"Buchanan","FirstName":"Steven"},
{"EmployeeID":"6","LastName":"Suyama","FirstName":"Michael"},
{"EmployeeID":"7","LastName":"King","FirstName":"Robert"},
{"EmployeeID":"8","LastName":"Callahan","FirstName":"Laura"},
{"EmployeeID":"9","LastName":"Dodsworth","FirstName":"Anne"}]}
Ver

domingo, 7 de abril de 2013

bashrc vrs bash_profile

No hay comentarios.:
Cual es la diferencia entre .bashrc y .bash_profile? 






Cuando hacen login en un Sistema Unix, el sistema inicia un programa. Ese programa es un shell, es decir un programa diseñado para empezar otros programas como linea de comando, el shell predeterminado es un Bourne Shell,
lee comandos desde una archivo denominado ~/.profile cuando es invocado desde una session de login.

Todos los shell pueden construir su propio profile, por ejemplo:

bash --> ~/.bash_profile

Cuando el archivo personalizado para cada tipo de shell no existe (~/.bash_profile) lee el archivo predeterminado ~/.profile

Se puede invocar un shell directamente en cualquier momento, por ejemplo, cuando abre un emulador de terminal adentro de un ambiente GUI, si el shell no es una session de login lee un arhivo llamado ~/.bashrc

En otras palabras:

Una session de login: es cuando ingresas su usuario y contraseña en la maquina o remotamente con ssh, aquí se ejecuta: ~/.bash_profile

Una session NO login : es cuando inicias un Linux con modelo grafico(GNOME o KDE) luego abres una terminal se allí  ejecuta: ~/.bashrc


Por lo tanto:


~/.profile
Es el lugar para poner cosas que apliquen a la sesiones completa y definiciones de variables de ambiente.

~/.bash_profile
Puede ser usado en lugar de  ~/.profile, pero necesitara incluir ~/.bashrc si la session es interactiva.

~/.bashrc
Es el lugar para poner cosas que aplican únicamente a sessiones tipo bash.

Recomendacion:

La mayor parte del tiempo no quieres mantener dos archivos separados de configuración para sesiones de login o non-login. Cuando defines tu PATH quieres aplicar las 2, puedes alegrarlo llamando a  ~/.bashrc  dentro de ~/.bash_profile luego incluyes todas las definiciones en   ~/.bashrc

Para hacer esto agrega la siguiente linea en el  ~/.bash_profile


if [ -f ~/.bashrc ]; then
   source ~/.bashrc
fi

Ver

jueves, 7 de marzo de 2013

Llamando un asp.net WebService con JQuery Ajax con parametros

No hay comentarios.:
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.:
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