Question

I am trying to call a javascript function from onClick event of an asp server button. I have this button and a label in an update panel.

In aspx:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
         <asp:Button ID="Button1" runat="server" 
            style="z-index: 1; left: 49px; top: 119px; position: absolute; height: 26px;" Text="Button" 
            onclick="Button1_Click"/>
         <asp:Label ID="Label1" runat="server" Text="l1" 
            style="position:absolute; top: 123px; left: 127px;"></asp:Label>
       </ContentTemplate>
    </asp:UpdatePanel>

Code behind:

protected void Button1_Click(object sender, EventArgs e)
{
   ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "me", "me()", true);
}

Javascript in aspx:

<script type="text/javascript">
function me()
{
   document.getElementById('<%= Label1.ClientID %>').value="clicked";
}
</script>

All I am trying to do is on button click the label’s value should be changed to ‘clicked’, which isn’t happening and no error as well in firebug. Where am I wrong in the me( )?

P.S: I am doing this to learn calling a javascript function from code behind. So any optimizations to the code are also welcome. (I actually have much lot of code to implement in the JS function later so appropriate suggestions please)

Answer 1

As far as I remember the Label control is rendered as a <div> or <span> (can’t remember exactly), not a text input field. So you should be setting its innerHTML property not the value:

document.getElementById('<%= Label1.ClientID %>').innerHTML = 'clicked';

or simply do it on the server side instead of registering clientside callbacks:

protected void Button1_Click(object sender, EventArgs e)
{
   Label1.Text = "clicked";
}

---

UPDATE:

As requested in the comments section here’s how you could pass parameters to the clientside callback from the server:

protected void Button1_Click(object sender, EventArgs e)
{
    string param1 = ...
    double param2 = ...
    int param3 = ...
    var serializer = new JavaScriptSerializer();

    ScriptManager.RegisterClientScriptBlock(
        this, 
        typeof(Button), 
        "me", 
        string.Format("me({0})", serializer.Serialize(new { param1 = param1, param2 = param2, param3 = param3 })), 
        true
    );
}

and your callback:

function me(values) {
    // you could use values.param1, values.param2, values.param3, ... here
}