Postback ASP.NET con JavaScript

Ho diversi piccoli div che utilizzano jQuery trascinabili. Queste div sono inserite in un UpdatePanel e su dragstop utilizzo la funzione JavaScript _doPostBack() . dove estraggo le informazioni necessarie dal modulo delle pagine.

Il mio problema è che quando chiamo questa funzione l’intera pagina viene ricaricata ma voglio solo ricaricare il pannello di aggiornamento.

Ecco una soluzione completa

Tag dell’intero modulo della pagina asp.net

 
<%-- included to force __doPostBack javascript function to be rendered --%>





L’intero contenuto della class Code-Behind della pagina

 Private Sub ButtonA_Click(sender As Object, e As System.EventArgs) Handles ButtonA.Click Response.Write("You ran the ButtonA click event") End Sub Private Sub ButtonB_Click(sender As Object, e As System.EventArgs) Handles ButtonB.Click Response.Write("You ran the ButtonB click event") End Sub 
  • Il LinkButton è incluso per garantire che la funzione javascript __doPostBack sia resa al client. Avere semplicemente i controlli Button non causerà il rendering di questa funzione __doPostBack. Questa funzione sarà resa in virtù di una varietà di controlli sulla maggior parte delle pagine ASP.NET, quindi in genere un pulsante di collegamento vuoto non è necessario

Cosa sta succedendo?

Due controlli di input sono resi al client:

   
  • __EVENTTARGET riceve l’argomento 1 di __doPostBack
  • __EVENTARGUMENT riceve l’argomento 2 di __doPostBack

La funzione __doPostBack è resa in questo modo:

 function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } 
  • Come puoi vedere, assegna i valori agli input nascosti.

Quando il modulo invia / postback si verifica:

  • Se hai fornito l’ javascript:__doPostBack('ButtonB','') pulsante di controllo server di cui si desidera eseguire il pulsante-clic-gestore ( javascript:__doPostBack('ButtonB','') , verrà eseguito il gestore di clic del pulsante per quel pulsante.

Cosa succede se non desidero eseguire un gestore di clic, ma preferisco invece fare qualcos’altro?

Puoi passare tutto ciò che vuoi come argomento a __doPostBack

È quindi ansible analizzare i valori di input nascosti ed eseguire il codice specifico di conseguenza:

 If Request.Form("__EVENTTARGET") = "DoSomethingElse" Then Response.Write("Do Something else") End If 

Altre note

  • Cosa succede se non conosco l’ID del controllo di cui voglio eseguire il gestore di clic?
    • Se non è accettabile impostare ClientIDMode="Static" , allora puoi fare qualcosa di simile a questo: __doPostBack('<%= myclientid.UniqueID %>', '') .
    • Oppure: __doPostBack('<%= MYBUTTON.UniqueID %>','')
    • Questo inserirà l’ID univoco del controllo nel javascript, nel caso lo desiderassi

Per Phairoh: utilizzare questo nella pagina / componente nel caso in cui il nome del pannello cambi

  

Anche se la soluzione di Phairoh sembra teoricamente valida, ho anche trovato un’altra soluzione a questo problema. Passando l’id UpdatePanels come parametro (destinazione dell’evento) per la funzione doPostBack, il pannello di aggiornamento invierà di nuovo il post ma non l’intera pagina.

 __doPostBack('myUpdatePanelId','') 

* nota: il secondo parametro è per gli argomenti degli eventi aggiuntivi

spero che questo aiuti qualcuno!

EDIT: quindi sembra che questo stesso consiglio è stato dato sopra mentre stavo scrivendo 🙂

Se qualcuno ha problemi con questo (come ero), è ansible ottenere il codice di postback per un pulsante aggiungendo l’attributo UseSubmitBehavior = “false” ad esso. Se esamini la fonte di rendering del pulsante, vedrai il javascript esatto che devi eseguire. Nel mio caso stava usando il nome del pulsante piuttosto che l’id.

Hai provato a passare l’id del client del pannello di aggiornamento alla funzione __doPostBack? Il mio team ha fatto questo per aggiornare un pannello di aggiornamento e per quanto ne so ha funzionato.

 __doPostBack(UpdatePanelClientID, '**Some String**'); 

L’utilizzo di __doPostBack direttamente è __doPostBack negli anni 2000. Chiunque codifica WebForms nel 2018 utilizza GetPostBackEventReference

(Più seriamente però, aggiungendo questo come una risposta per completezza. Usare direttamente __doPostBack è una ctriggers pratica (un singolo prefisso di sottolineatura indica in genere un membro privato e doppio indica un membro privato più universale), anche se probabilmente non cambierà o diventerà obsoleto a questo punto. Abbiamo un meccanismo completamente supportato in ClientScriptManager.GetPostBackEventReference .)

Supponendo che btnRefresh sia all’interno del nostro UpdatePanel e causi un postback, puoi utilizzare GetPostBackEventReference come questo ( ispirazione ):

 function RefreshGrid() { <%= ClientScript.GetPostBackEventReference(btnRefresh, String.Empty) %>; } 

Innanzitutto, non utilizzare i pannelli di aggiornamento. Sono la seconda cosa più malvagia che Microsoft abbia mai creato per lo sviluppatore web.

In secondo luogo, se è necessario utilizzare i pannelli di aggiornamento, provare a impostare la proprietà UpdateMode su Conditional. Quindi aggiungi un trigger a un Asp: controllo nascosto che aggiungi alla pagina. Assegna l’evento change come trigger. Nel tuo evento dragstop, modifica il valore del controllo nascosto.

Questo non è stato verificato, ma la teoria sembra valida … Se questo non funziona, puoi provare la stessa cosa con un asp: pulsante, imposta il display: nessuno stile e usa l’evento click anziché l’evento change.

Non è ansible chiamare _doPostBack() perché impone l’invio del modulo. Perché non disabiliti PostBack su UpdatePanel ?