Postback de ASP.NET con JavaScript

Question

Tengo varias pequeñas div que pueden arrastrar jQuery. Estos div s se colocan en un UpdatePanel, y en dragstop utilizo la función de JavaScript _doPostBack(). donde extraigo la información necesaria del formulario de páginas.

Mi problema es que cuando llamo a esta función toda la página se vuelve a cargar, pero solo quiero que el panel de actualización se vuelva a cargar.

Answer 1

Aquí es una solución completa

etiqueta del formulario completo de la página asp.net

<form id="form1" runat="server"> 
    <asp:LinkButton ID="LinkButton1" runat="server" /> <%-- included to force __doPostBack javascript function to be rendered --%> 

    <input type="button" id="Button45" name="Button45" onclick="javascript:__doPostBack('ButtonA','')" value="clicking this will run ButtonA.Click Event Handler" /><br /><br /> 
    <input type="button" id="Button46" name="Button46" onclick="javascript:__doPostBack('ButtonB','')" value="clicking this will run ButtonB.Click Event Handler" /><br /><br /> 

    <asp:Button runat="server" ID="ButtonA" ClientIDMode="Static" Text="ButtonA" /><br /><br /> 
    <asp:Button runat="server" ID="ButtonB" ClientIDMode="Static" Text="ButtonB" /> 
</form> 

totalidad del contenido de la página de clase de código subyacente

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 

• El LinkButton se incluye para asegurar que la función javascript __doPostBack se ha prestado al cliente. El simple hecho de tener botones no hará que se reproduzca esta función __doPostBack. Esta función se representará en virtud de tener una variedad de controles en la mayoría de ASP.Páginas de red, por lo que normalmente no se necesita un botón de enlace vacío

¿Qué está pasando?

Dos controles de entrada se prestan al cliente:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 

• __EVENTTARGET recibe argumento 1 de __doPostBack
• __EVENTARGUMENT recibe argumento 2 de __doPostBack

La función __doPostBack se rindió a cabo como esto:

function __doPostBack(eventTarget, eventArgument) { 
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
     theForm.__EVENTTARGET.value = eventTarget; 
     theForm.__EVENTARGUMENT.value = eventArgument; 
     theForm.submit(); 
    } 
} 

• Como puede ver, asigna los valores a las entradas ocultas.

Cuando el formulario envía/devolución de datos se produce:

• Si proporcionó el UniqueID del botón de servidor de control cuyo botón-click-controlador que desea ejecutar (javascript:__doPostBack('ButtonB',''), a continuación, el botón de clic se llevará a cabo controlador para ese botón.

¿Qué pasa si no quiero ejecutar un controlador de clic, pero quieren hacer otra cosa en su lugar?

Puede pasar lo que quiera como argumentos para __doPostBack

continuación, se pueden analizar los valores de entrada ocultos y ejecutar código específico en consecuencia:

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

Otras Notas

• ¿Qué pasa si yo no' ¿conozco la ID del control cuyo manejador de clics quiero ejecutar?
  • Si no es aceptable establecer ClientIDMode="Static", entonces puede hacer algo como esto: __doPostBack('<%= myclientid.UniqueID %>', '').
  • O: __doPostBack('<%= MYBUTTON.UniqueID %>','')
  • Esto inyectará el identificador único del control en el javascript, si desea que

Answer 2

No puede llamar al _doPostBack() porque fuerza la sumisión del formulario. ¿Por qué no deshabilita el PostBack en el UpdatePanel?

Answer 3

Primero, no use los paneles de actualización. Son la segunda cosa más malvada que Microsoft ha creado para el desarrollador web.

En segundo lugar, si debe usar paneles de actualización, intente configurar la propiedad UpdateMode en Conditional. A continuación, agregue un activador a un Asp: control oculto que agrega a la página. Asigna el evento de cambio como el disparador. En su evento de detención, cambie el valor del control oculto.

Esto no se ha probado, pero la teoría parece sólida ... Si esto no funciona, podría intentar lo mismo con un botón asp: simplemente configure la pantalla: sin estilo y use el evento click en lugar de el evento de cambio.

Answer 4

¿Ha intentado pasar el ID de cliente del panel de actualización a la función __doPostBack? Mi equipo ha hecho esto para actualizar un panel de actualización y, hasta donde sé, funcionó.

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

Answer 5

Si bien la solución de Phairoh parece teóricamente sólida, también he encontrado otra solución a este problema. Al pasar el ID de UpdatePanels como un parámetro (objetivo del evento) para la función doPostBack, el panel de actualización publicará la página pero no toda la página.

__doPostBack('myUpdatePanelId','') 

* Nota: segundo parámetro es para evento args Además

esperanza esto ayude a alguien!

EDIT: Por lo que parece fue dada esta misma pieza de consejo anterior, ya que estaba escribiendo :)

Answer 6

por Phairoh: Use esto en la página/Componente por si acaso el nombre del panel cambia

<script type="text/javascript"> 
    <!-- 
    //must be global to be called by ExternalInterface 
     function JSFunction() { 
      __doPostBack('<%= myUpdatePanel.ClientID %>', ''); 
     } 
    --> 
    </script> 

Answer 7

Si alguien está teniendo problemas con esto (como yo), se puede obtener el código de devolución de un botón agregando el atributo UseSubmitBehavior = "false". Si examina la fuente representada del botón, verá el javascript exacto que necesita ejecutar. En mi caso, estaba usando el nombre del botón en lugar de la identificación.