How to pass a interpreted parameter on the server to a javascript function?

Asked

Viewed 347 times

-1

I’m creating a control ascx that will have multiple impressions on the same page.

In this control, there is an image that I intend to perform a function javascript when clicked. By example, like this:

<asp:Panel ID="divPai" runat="server" >
    <div>
        <div ...>
            <input .../>
        </div>
        <asp:Image ID="btnMensagem" 
                   Class="animated-transition rotate-90-degrees" 
                   ImageUrl="../../Images/bt_proximo.png" 
                   onclick="mostrarAlerta2();" 
                   runat="server" 
                   Style="padding:10px;"/>
    </div>
    <div class="div-manipulavel" ...>
        <input ... />
    </div>
</asp:Panel>

In an archive js separate I have all the functions I need to use in this control and the inclusion of this script is taking place normally.

I imported the script like this:

Page.ClientScript.RegisterClientScriptInclude(GetType(), "scriptsMeuControle", ResolveClientUrl("~/Componentes/Scripts/MeuControle.js"));

That would be the archive content:

function mostrarAlerta(mensagem)
{
    alert('Conteúdo: ' + mensagem);
}

function mostrarAlerta2()
{
    alert('Função acionada!');
}

The problem occurs when I need to pass a parameter to run in the function, as is the mostrarAlerta(mensagem).

I tried that way:

<asp:Image ID="btnMensagem"
           ...
           onclick="mostrarAlerta2('<% =divPai.ClientID %>');"/>

That doesn’t work. The expression <% =divPai.ClientID %> is not interpreted and the content I tried to pass is displayed literally:

Conteúdo: <% =divPai.ClientID %>

How do I pass a parameter that is interpreted from the server side like this to a function javascript?

javascript asp.net webforms

  • Diego, I don’t remember much how it is used. Have you tried using Jquery to capture its value, it will be something like: $('#<% =divPai.ClientID %>').val()

  • @Marconi Yes, I have tried, but it does not work in the function call because the code is also not interpreted. From what I saw in this OS response I referenced above, it seems that I can’t use these codes embedded in controls that already run on the server side (the <asp:... of life).

  • I also can’t put the jQuery selector inside the js function, because on a page there will be several impressions of that control, the js function would be overwritten and would only work for one of them.

  • 1

    It is not the case to pass this.id for the function? Because Clientid turns ID when the control is rendered, no?

  • @bfavaretto I want to pass the id of another element in case divPai. I think the this.id eh would refer to the image itself

  • 2

    You can pass this and in the function get the data of the grandfather.

  • In fact you wouldn’t even need to pass anything if the function is not called inline, this would come automatically.

Show 2 more comments

1 answer

0


I ended up finding in that OS post the answer to my question.

In short,

Cannot use expressions of type <% %> on controls that run on the server side.

The solution I chose was to reverse the component <asp:Image .../> to the native correspondent - <img /> - and the call was made correctly:

<asp:Panel ID="divPai" runat="server" >
    <div>
        <div ...>
            <input .../>
        </div>
        <img id="<% =divPai.ClientID %>_btnMensagem" 
             class="animated-transition rotate-90-degrees" 
             src="../../Images/bt_proximo.png" 
             onclick="mostrarAlerta2('<% =divPai.ClientID %>');" 
             style="padding:10px;"/>
    </div>
    <div class="div-manipulavel" ...>
        <input ... />
    </div>
</asp:Panel>

The tips given by colleagues @dvd and @bfavaretto helped me to complete the implementation of the function javascript in my real scenario.

Browser other questions tagged javascript asp.net webforms

You are not signed in. Login or sign up in order to post.