Chiamata Funzione VbNet da JS

giovedì 13 settembre 2012 - 17.24
Tag Elenco Tags  VB.NET  |  .NET 4.0  |  Windows 7  |  Visual Studio 2010  |  MySQL 5.5  |  Chrome  |  Javascript  |  XHTML 2.0

fabio85 Profilo | Newbie

Salve ragazzi, sono alle prese con un problema abbastanza conosciuto e diffuso "Chiamare una funzione scritta in vb net" da uno script lato client.
Illustro il mio scenario:

Ho una pagina aspx In cui è presente una tabella con un elenco di utenti, in questa tabella in corrispondenza della colonna azioni c'è un'icona "calendario" che al suo click scatena la visualizzazione di una finestra modale jquery;

alla sua visualizzazione vedo un'ulteriore tabella che mi permette di manipolare dei dati salvandoli poi nel db;

il problema è che all'interno di questa finestra "stile pop-up" ho due pulsanti: conferma e annulla su conferma dovrei eseguire appunto il codice di salvataggio e chiudere di conseguenza la finestra.

Vi mostro il codice per avere un'idea completa:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Il codice JS per la dialog:


jQuery('#dialog').dialog({ autoOpen: false, width: 650, height:450, buttons: { "Conferma": function () { jQuery(this).dialog("close"); }, "Annulla": function() { jQuery(this).dialog("close"); } } });

Ora qui dentro vorrei inserire la chiamata al codice vbnet in cui effettuo il salvataggio della finestra visualizzata

Scusatemi in anticipo se sono stato poco chiaro spero cmq di aver espresso la mia richiesta grazie in anticipo

DomA Profilo | Expert

Ciao Fabio,
Io non sono un esperto di js o jquery però qualche giorno fa mi sono imbattuto in questa pagina (che ho subito inserito tra i preferiti):

http://www.html.it/articoli/javascript-e-http-1/

Vedi se può esserti di aiuto.


Ricorda che, accettare la risposta è un modo di ringraziare chi ci ha aiutato ed evidenziare che il problema è stato risolto.

http://www.infomidia.it

Domenico

Gluck74 Profilo | Guru

ciao,
le scelte sono 2:

effettuare un normale postback ed eseguire il codice in modo standard, con conseguente refresh della pagina,
effettuare una chiamata Ajax in modo asincrono, con conseguente configurazione della pagina e del codice.

direi che la cosa più semplice sia la seconda, ovvero:
1 - devi marcare il metodo nella tua pagina con l'attributo [WebMethod]
2 - poi fai la chiamata Ajax usando JQuery:
$.Ajax({ type: "POST", url: "PageName.aspx/MethodName", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json" success: function(msg) { //qui usi msg come messaggio di ritorno //chiudi la finestra del calendario } });

Per una spiegazione dettagliata, vedi questo articolo:
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

fabio85 Profilo | Newbie

Salve ringrazio entrambi per le vostre risposte sto dando un'occhiata come suggerito da Gluck74 al link indicato... ma sinceramente inserendolo nel mio codice non funge...

sicuramente ho sbagliato qualcosa...

per spiegarmi meglio riassumo quanto fatto

Creazione script Custom.js - Si occupa di mostrare a video una dialog con all'interno il mio codice html preparato:

jQuery('#dialog').dialog({ autoOpen: false, width: 650, height: 450, buttons: { "Conferma": function () { //jQuery(this).dialog("close"); }, "Annulla": function () { jQuery(this).dialog("close"); } } }); // Default dialog. jQuery('.dialog_link').click(function () { jQuery('#dialog').dialog('open'); return false; }); // Apertura Dialog

Funzione VbNet (per ora stampa solo il messaggio giusto per vedere la funzionalità)

<WebMethod()> _ Private Function Messaggio() As String Dim my_message As String = "CIAO MONDO!" MsgBox(my_message) Return my_message End Function

Script di interazione CallAjax.js:

$(document).ready(function () { // Add the page method call as an onclick handler for the div. $("#dialog").click(function () { $.ajax({ type: "POST", url: "Dashboard.aspx/Messaggio", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { // Replace the div's content with the page method's return. $("#risultato").text(msg.d); } }); }); });

Non funge dove sbaglio??

Gluck74 Profilo | Guru

>sicuramente ho sbagliato qualcosa...


> MsgBox(my_message)

Che diavolo è questo???? Mica stiamo facendo un'applicazione Windows. Non esiste il messagebox!!!!!

>Script di interazione CallAjax.js:
>
>$(document).ready(function () {
>// Add the page method call as an onclick handler for the div.
> $("#dialog").click(function () {
> $.ajax({
la funzione Ajax non dovrebbe stare qui, ma nel conferma della tua dialog:
buttons: { "Conferma": function () { --> DEVE STARE QUI <-- }, "Annulla": function () { jQuery(this).dialog("close"); } }


> dataType: "json",
modifica in dataType:"text"

> success: function (msg) {
> $("#risultato").text(msg);
SOLO msg, non msg.d


____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

DomA Profilo | Expert

Davvero interessante.
Complimenti Gluck74
può essere davvero utile.


Ricorda che, accettare la risposta è un modo di ringraziare chi ci ha aiutato ed evidenziare che il problema è stato risolto.

http://www.infomidia.it

Domenico

fabio85 Profilo | Newbie

Ciao Gluck74, grazie per la tua risposta ho effettuato le correzioni come da te suggerito ma non funge ancora!!

Pagina Dashboard.aspx con web function:


<WebMethod()> _ Private Function Messaggio() As String Dim my_message As String = "CIAO MONDO!" Return my_message End Function

Script Js:


jQuery('#dialog').dialog({ autoOpen: false, width: 650, height: 450, buttons: { "Conferma": function () { $.ajax({ type: "POST", url: "Dashboard.aspx/Messaggio", data: "{}", contentType: "application/json; charset=utf-8", dataType: "text", success: function (msg) { $("#risultato").text(msg); //jQuery(this).dialog("close"); } }); }, "Annulla": function () { jQuery(this).dialog("close"); } } });

Sarò diventato sicuramente matto oppure continuo a sbagliare!

Thx

Gluck74 Profilo | Guru

andiamo per massi:

visto che per questo test stai restituendo semplice testo, cambia anche questa riga:
contentType: "application/json; charset=utf-8",

inoltre: quando dici "non funziona", cosa intendi?
Puoi spiegare il comportamento della pagina? ci sono errori? hai controllato anche gli errori javascript?

Più informazioni ci dai, meglio è.
Il codice sembra corretto

____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

fabio85 Profilo | Newbie

Script modificato:

jQuery('#dialog').dialog({ autoOpen: false, width: 650, height: 450, buttons: { "Conferma": function () { $.ajax({ type: "POST", url: "Dashboard.aspx/Messaggio", data: "{}", contentType: "text", dataType: "text", success: function (msg) { $("#risultato").text(msg); //jQuery(this).dialog("close"); } }); }, "Annulla": function () { jQuery(this).dialog("close"); } } });

Il problema del "non funge" è che la pagina non fa nulla cioè non esegue la funzione chiamata da js e quindi la dialog rimane lì come se il pulsante conferma non funzionasse tanto meno se abilito l'istruzione:
jQuery(this).dialog("close");

non succede nulla....

Gluck74 Profilo | Guru

dal codice sembra tutto Ok,
dovresti mettere dei breackpoint sia lato server che sul javascript, e capire dove è il problema
____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

fabio85 Profilo | Newbie

Ciao Gluck74 , grazie ancora per la collaborazione; dunque esaminando bene il codice mi sono accorto che c'era un errore nel js ed ho corretto ora al contrario di prima la dialog si chiude ma continua a non eseguire il codice lato server nonostante abbia messo un breakpoint riepilogo il tutto:

funzione js:

jQuery('#dialog').dialog({ autoOpen: false, width: 650, height: 450, buttons: { "Conferma": function () { jQuery.ajax({ type: "POST", url: "Dashboard.aspx/Messaggio", data: "{}", contentType: "text", dataType: "text", success: function (msg) { //jQuery("#risultato").text(msg); jQuery('#dialog').dialog("close"); } }); }, "Annulla": function () { jQuery(this).dialog("close"); } } });

al success praticamente io vorrei che eseguisse solamente la funzione che ho lato server che si preoccupa di effettuare dei salvataggi all'interno del database (anche senza valore di ritorno)

<WebMethod()> _ Private Function Salva() As Boolean ' ISTRUZIONI CON IL DB Return True End Function

forse è in questo che sbaglio?

Gluck74 Profilo | Guru

dunque, la chiamata Ajax non la puoi fare al success.... il success arriva dopo la chiamata Ajax.

La chiamata la devi fare quando viene premuto il pulsante conferma della tua box (e dal codice è così).

l'unica cosa è la chiamata. Intanto verifica il percorso. è giusto?
poi la tua chiamata è questa: url: "Dashboard.aspx/Messaggio", mentre la funzione mi sembra che si chiami "Salva()".
allora la tua chiamata deve essere
url: "Dashboard.aspx/salva",
____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

fabio85 Profilo | Newbie

Ho effettuato la modifica inserendo il corretto nome della funzione vb ma a quanto pare il codice lato server non viene eseguito!
alla pressione del tasto:

jQuery('#dialog').dialog({ autoOpen: false, width: 650, height: 450, buttons: { "Conferma": function () { jQuery.ajax({ type: "POST", url: "Dashboard.aspx/salva", data: "{}", contentType: "text", dataType: "text", success: function (msg) { jQuery('#dialog').dialog("close"); } }); }, "Annulla": function () { jQuery(this).dialog("close"); } } });

ora al success a differenza di prima la dialog si chiude ma il codice lato server non ne vuole sapere....

Gluck74 Profilo | Guru

ma, mi sembra strano che il codice non venga eseguito.
Se la funzione Ajax passa dal success, probabilmente viene eseguito, che dici?

prova questo e dimmi cosa vedi

success: function (msg) { alert(msg); //jQuery('#dialog').dialog("close"); }
____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

fabio85 Profilo | Newbie

Mi ritorna:

"!DOCTYPE <.... ecc ecc"

praticamente sembra il codice della pagina html...

non saprei la cosa più assurda che mettendo il break point anche sulla funzione lato server non si ferma in fase di debug!!!

forse rinuncerò a questa scelta....

Gluck74 Profilo | Guru

questo è alquanto strano, devo provare in locale, altrimenti non posso darti ulteriori aiuti....

a proposito, il metodo salva è statico?
____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

Gluck74 Profilo | Guru

TROVATO L'INGHIPOOOOOOOOOOOOOOOOOO

purtroppo non sono molto pratico di JQuery.Ajax, quindi non sapevo bene come configurare la chiamata. Ora ti spiego:

Ci deve essere una corrispondenza precisa tra i dati passati, ed i parametri del metodo lato server.
Nel tuo test hai un metodo senza parametri, quindi devi configurare la chiamata Ajax correggendo questa riga:
data: "",
devi cioè togliere semplicemente le parentesi graffe.

Nel caso tu debba passare dei dati, ipotiziamo un salva(string input), devi trasformare in questo modo:
data: "{'input':'datiDiIngresso'}",
la stringa "datiDiIngresso" è quella passata alla funzione


altro cosa importante è il dataType. Teoricamente, come scritto sul manuale, si può variare, ma io ho fatto diverse prove, funziona solo con l'originale:
contentType: "application/json; charset=utf-8", dataType: "json",

questo comporta anche che bisogna rimettere il messaggio di ritorno come era in origine:
success: function(msg) { alert(msg.d); }


ecco il codice tutto assieme:
jQuery('#dialog').dialog({ autoOpen: true, width: 650, height: 450, buttons: { "Conferma": function () { jQuery.ajax({ type: "POST", url: "jQueryAjaxPageMethod.aspx/salva", data: "{'input':'datiDiIngresso'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { alert("Messaggio\n\n" + msg); jQuery('#dialog').dialog("close"); }, error: function (err) { alert(err.statusText); } }); }, "Annulla": function () { jQuery(this).dialog("close"); } } });


Dopo questa faticaccia, me ne vado a casina con 1 ora di ritardo.... e son mazzate!!!!!

ciao ciao buon lavoro
____________
http://glucolo.wordpress.com
Ricordati di utilizzare il tasto "Accetta" se i nostri consigli ti sono serviti a risolvere il problema.
È il modo per ringraziare chi ti ha aiutato.

fabio85 Profilo | Newbie

Ti ringrazio tantissimo per la tua disponibilità mi hai risolto una problematica che stava diventando contorta ma che alla fine aveva la soluzione dietro l'angolo... grazie mille

P.S. Scusami per l'oretta di ritardo
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5