method - ejecutar javascript desde asp.net c#

Llamar a la función JQuery desde el código detrás(aparte) ASP.Net y C#

Question

Necesito deshabilitar las pestañas de JQuery programáticamente. Las pestañas están dentro de un panel de actualización (Ajax) y el panel de actualización está en una página ASP.NET. Código:

<link type="text/css" rel="stylesheet" href="http://ui.jquery.com/testing/themes/base/ui.all.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.core.js"></script>

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.tabs.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
        $("#example").tabs();
    });


    function hidetabs(){
        $(document).ready(function(){
        $("#example").tabs();
        $(''#example'').data(''disabled.tabs'', [1, 2]);});
    }
</script>


<%@ Page Language="C#" MasterPageFile="~/any.Master" AutoEventWireup="true" Codebehind="anycode.aspx.cs"
    Inherits="anycode" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:UpdatePanel ID="UpdatePanel_Deal_Import" runat="server">
<ContentTemplate>
<div id="example">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>
First tab is active by default:</p>
<pre><code>$(''#example'').tabs();</code></pre>

<asp:Button ID="btn_Save" OnClick="btn_Save_Click" runat="server" Text="Save" Visible="False" CommandName="Save">
</div>

<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer 
ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer 
aliquam erat volutpat.
</div>
</div>

      </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>


Code behind:

protected void btn_Save_Click(object sender, EventArgs e)
{
//here I need to diable the panels.

}

La función btn_Save_Click no publica la página, por lo que no llama a la función Javascript / jquery hidetabs. ¡¡¡Gracias por cualquier ayuda!!!

Answer 1

Parece que necesita un botón que tenga una acción del lado del cliente en lugar de uno que publique.

<asp:Button ID="Clickable" runat="server" text="Click me" OnClientClick="JavascriptCall();" />

Además, aunque jQuery generalmente es compatible con versiones anteriores, no es una buena idea hacer referencia directamente al último archivo .js de jQuery. En su lugar, descargaría una versión que desee y la colocaría estáticamente en su sitio para referencia directa de una versión conocida. No es bueno agregar una dependencia en el estado o la disponibilidad de un recurso en un sitio externo cuando no es necesario.

Answer 2

Gracias Chris,

En realidad, sí, parte de la solución es llamar directamente a la función javascript, pero en lugar de usar un control del lado del cliente, llamé al Javascript una vez que mi solicitud de UpdatePanel terminó como se explica en el siguiente blog:

http://blog.jeromeparadis.com/archive/2007/03/01/1501.aspx

Ahora mi código se ve así:

<link type="text/css" rel="stylesheet" href="css/ui.all.css" />

    <script type="text/javascript" src="jquery-latest.js"></script>

    <script type="text/javascript" src="ui.core.js"></script>

    <script type="text/javascript" src="ui.tabs.js"></script>

    <script type="text/javascript">

    //enable tabs if a deal is selcted or saved.
    function EndRequestHandler(sender, args) {
        var rec_id = document.getElementById(''<%=hidden_value.UniqueID %>'').value;

        if (rec_id=="")
            hidetabs();
        else
            showtabs();
    }

    hidetabs();

    $(document).ready(function(){
        $("#rec_entry").tabs();
    });

    function hidetabs(){
        $(document).ready(function(){
        $("#rec_entry").tabs();
        $(''#rec_entry'').data(''disabled.tabs'', [1, 2, 3, 4, 5]);});
    }

    function showtabs(){
        $(document).ready(function(){
        $("#rec_entry").tabs();
        $(''#rec_entry'').data(''disabled.tabs'', []);});
    }

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    </script>

    ...html code add the tabs... 

Código detrás:

void protegido btn_Save_Click (remitente del objeto, EventArgs e) {

        .... code to save the new record ........  

        UpdatePanel_mypanel.Update();
    }

después de actualizar el panel, EndRequestHandler evalúa un indicador (en este caso un campo oculto) y llama a la función Javascript que habilita o deshabilita las pestañas.

El endrequesthandler está controlado gracias a esta oración incluida en mi javascript:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

Seguí tu consejo de incluir los archivos javascript en mi proyecto. ¡Gracias de nuevo!

Ixtlan

Answer 3

Lo he usado de la siguiente manera y para mí funciona 100% correctamente:

el primero que creo una función y escribo mi función jquery en la función en la página my:

<script>
    function myFunction(params) {
        $.my_jquery(params...)
        ......
    }
</script>

luego utilicé este código en el controlador de eventos de mi control (por ejemplo, haga clic en un botón) que mi control se encuentra dentro de un panel de actualización:

protected void myButton(object sender, EventArgs e)
{
    .....
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type=''text/javascript''>myFunction(params...);</script>", false);
}

exitoso