2009-02-18 6 views
11

Ho difficoltà a entrare nella mia ricerca WebMethod dalla mia chiamata JQuery. Forse qualcuno potrebbe aiutare a indicarmi la giusta direzione.Utilizzo di JQuery per chiamare un WebMethod

Ho anche impacchettato tutto in un file zip nel caso qualcuno volesse controllarlo per dare un'occhiata più da vicino.

http://www.filedropper.com/jsonexample

Grazie 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> 

Ed ecco il codice dietro per il 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

Che cosa vuoi dire entrare nel tuo WebMethod, come non colpire un breakpoint? Perché non usi semplicemente il codice che viene emesso per te tramite MS Ajax PageMethods? Altrimenti chiamarlo via jQuery non ti fa davvero risparmiare nulla. –

+0

Capisco che ci sono un paio di altri modi per accedere ai metodi tramite javascript come PageMethods. Mi rendo anche conto che questo esempio non fa nulla. Ma ho reso la versione non più semplice per l'aiuto di tutti. Non riesco a entrare nel mio breakpoint per il metodo di ricerca. –

+0

compresi i tag di script di apertura/chiusura sulla stessa linea, gestisce il codice. Si prega di aggiornare la domanda e inserire un'interruzione di riga tra i tag di script aperti e chiusi. – bendewey

risposta

15

Per risolvere un problema come questo, la prima cosa da fare è guardarlo in Firebug.

Se fai clic sul link "Cerca" e guardi la richiesta/risposta POST nella console di Firebug, vedrai che genera un errore di 500 server: JSON Primitive non valido.

Il motivo è perché gli identificatori di chiave/valore nel letterale JSON "dati" non sono quotati. La riga 17 dovrebbe essere:

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

Quindi, tutto funzionerà come previsto.

Nota: Il suggerito di dati {test: ricerca} sarà non lavoro. Se fornisci jQuery con un vero letterale JSON invece di una stringa, lo convertirà in una coppia chiave/valore di test = search e POST che invece del JSON. Ciò causerà anche un ASP.NET AJAX ScriptService o PageMethod per generare l'errore primitivo JSON non valido.

+1

FireBug e Fiddler sono una manna. –

+0

Che risolto! Grazie Dave, adoro il tuo blog e le cose incredibili di cui scrivi. –

6

È necessario eseguire le seguenti operazioni (C#):

  • Il WebMethod deve essere public static
  • Deve essere decorata con l'attributo [WebMethod]
  • Hai bisogno di uno ScriptManager sulla tua pagina aspx
  • Impostare del EnablePageMethods="true"

E qui ScriptManager è un javascript campione:

$().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

Sto usando un metodo condiviso. Il metodo che stai descrivendo è l'altro tipo di accesso ai metodi web. Ho ottenuto il mio esempio basato su http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/ –