2009-02-18 36 views
11

Tengo problemas para ingresar a mi método de búsqueda web desde mi llamada JQuery. Tal vez alguien podría ayudar a señalarme en la dirección correcta.Uso de JQuery para llamar a un WebMethod

También empaqué todo en un archivo zip en caso de que alguien quiera echarle un vistazo para verlo de cerca.

http://www.filedropper.com/jsonexample

Gracias Ryan

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>JSON Example</title> 
    <script type="text/javascript" language="JavaScript" src="jquery-1.3.1.min.js"></script> 

<script type="text/javascript" language="javascript"> 

function Search() { 
    var search = $("#searchbox").val(); 
    var options = { 
     type: "POST", 
     url: "Default.aspx/Search", 
     data: "{text:" + search + "}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(msg) { 
      alert('Success!'); 
     } 
    }; 
    $.ajax(options); 
} 
</script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <input type="text" id="searchbox" size="40" /> 
     <a href="#" onclick="Search()" id="goSearch">Search</a> 
     <br />   
     <div id="Load" /> 
    </form> 
</body> 
</html> 

Y aquí es el código detrás de la default.aspx

Imports System.Data 
    Imports System.Web.Services 
    Imports System.Web.Script.Serialization 

    Partial Class _Default 
     Inherits System.Web.UI.Page 

     <WebMethod()> _ 
     Public Shared Function Search(ByVal text As String) As IEnumerable 
      Return "test" 
     End Function 

    End Class 
+0

¿Qué quiere decir con meterse en su WebMethod, como no golpear un punto de interrupción? ¿Por qué no utiliza el código que se emite a través de MS Ajax PageMethods? De lo contrario, llamarlo a través de jQuery realmente no te ahorra nada. –

+0

Entiendo que hay otras maneras de acceder a los métodos a través de JavaScript, como PageMethods. También me doy cuenta de que este ejemplo no hace nada. Pero hice la versión simplista que no funciona para la ayuda de todos. Simplemente no puedo ingresar a mi punto de ruptura para el Método de búsqueda. –

+0

, incluyendo las etiquetas de guión para abrir/cerrar en la misma línea, alega el código. Actualice su pregunta y establezca un salto de línea entre las etiquetas de secuencia de comandos abrir y cerrar. – bendewey

Respuesta

15

Para resolver un problema como este, lo primero que debe hacer es mirarlo en Firebug.

Si hace clic en el enlace "Buscar" y observa la solicitud/respuesta POST en la consola de Firebug, verá que arroja un error de 500 servidores: JSON Primitive no válido.

La razón de esto se debe a que los identificadores de clave/valor en su literal "JSON" de "datos" no están citados. La línea 17 debe ser:

data: "{'text':'" + search + "'}", 

Luego, todo funcionará como se esperaba.

Nota: El sugirieron los datos de prueba {:} búsqueda se no trabajo. Si le proporciona a jQuery un literal JSON real en lugar de una cadena, lo convertirá en un par de clave/valor de prueba = búsqueda y POST que en lugar de JSON. Eso también provocará que ASP.NET AJAX ScriptService o PageMethod arrojen el error Primitiva JSON no válida.

+1

FireBug y Fiddler son una bendición. –

+0

¡Eso lo solucionó! Gracias Dave, me encanta tu blog y las cosas increíbles sobre las que escribes. –

6

Es necesario hacer lo siguiente (C#):

  • El WebMethod debe ser public static
  • Debe ser decorado con el atributo [WebMethod]
  • Se necesita un ScriptManager en su página .aspx
  • Conjunto de EnablePageMethods="true"

Y aquí el ScriptManager es algo de JavaScript muestra:

$().ready(function() { 
    $(yourDropDownList).change(LoadValues); 
}); 


function LoadValues() { 
    PageMethods.YourMethod(arg1, CallSuccess, CallFailed); 
} 

function CallFailed(result) { 
    alert('AJAX Error:' + result.get_message()); 
} 

function CallSuccess(result) { 
    //do whatever you need with the result 
} 
+0

Estoy usando un método compartido. El método que está describiendo es el otro tipo de forma de acceder a webmethods. Obtuve mi ejemplo basado en http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/ –

Cuestiones relacionadas