Tutorial :C# OnclientClick doens't render asp tags?



Question:

I have an ASP button that lookts like this:

<asp:Button     ID="btnReset"     runat="server"     OnClientClick = "hideOverlay('<%=pnlOverlay.ClientID %>', '<%=pnlAddComment.ClientID  %>');"    CssClass ="btnCancel PopUpButton"  />  

The problem are the asp tags in de hideOverlay part.I don't get it working. Why isn't working? And how do i fix it?


Solution:1

Try below examples

First Example

In aspx

<html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>  </head>  <body>      <form id="form1" runat="server">      <div>          <asp:Button ID="btnReset" runat="server" CssClass="btnCancel PopUpButton" />          <asp:Panel ID="pnlOverlay" runat="server">          </asp:Panel>          <asp:Panel ID="pnlAddComment" runat="server">          </asp:Panel>              </div>      </form>  </body>  </html>  

In Codebehind

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.UI;  using System.Web.UI.WebControls;    public partial class Default10 : System.Web.UI.Page  {      protected void Page_Load(object sender, EventArgs e)      {         btnReset.Attributes.Add("onclick", string.Format("hideOverlay('{0}','{1}')", pnlOverlay.ClientID, pnlAddComment.ClientID));        }  }  

It will generate the below source for the button

<input type="submit" name="btnReset" value="" onclick="hideOverlay('pnlOverlay','pnlAddComment');" id="btnReset" class="btnCancel PopUpButton" />  

Second Example

In Aspx

<html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>  </head>  <body>      <form id="form1" runat="server">      <div>          <asp:Button ID="btnReset" runat="server" CssClass="btnCancel PopUpButton" OnClientClick=<%# "hideOverlay('" + pnlOverlay.ClientID + "', '" + pnlAddComment.ClientID +"');" %> />          <asp:Panel ID="pnlOverlay" runat="server">          </asp:Panel>          <asp:Panel ID="pnlAddComment" runat="server">          </asp:Panel>              </div>      </form>  </body>  </html>  

In CodeBehind

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.UI;  using System.Web.UI.WebControls;    public partial class Default10 : System.Web.UI.Page  {      protected void Page_Load(object sender, EventArgs e)      {          btnReset.DataBind();       }  }  

It will generate the below source for the button

<input type="submit" name="btnReset" value="" onclick="hideOverlay('pnlOverlay', 'pnlAddComment');" id="btnReset" class="btnCancel PopUpButton" />  

Third Example

In aspx

<html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>  </head>  <body>      <form id="form1" runat="server">      <div>          <asp:Button ID="btnReset" runat="server" CssClass="btnCancel PopUpButton" OnClientClick="hideOverlay();" />          <asp:Panel ID="pnlOverlay" runat="server">          </asp:Panel>          <asp:Panel ID="pnlAddComment" runat="server">          </asp:Panel>              </div>      </form>  </body>  <script type="text/javascript" >      function hideOverlay()      {          var pnlOverlayID = '<%= pnlOverlay.ClientID %>';          var pnlAddCommentID = '<%= pnlAddComment.ClientID %>';            //Do your stuff      }  </script>   </html>  

It will generate the follwing source for the script portion

<script type="text/javascript" >      function hideOverlay()      {          var pnlOverlayID = 'pnlOverlay';          var pnlAddCommentID = 'pnlAddComment';            //Do your stuff      }  </script>   


Solution:2

Try to replace "=" with "#" in you inline code. e.g. <%=pnlOverlay.ClientID %> => <%#pnlOverlay.ClientID %>, so that the ClientId is instantiated in compile time.

OnClientClick is only used to call client-sidee script such as javascript code. If you are trying to call a method in code behind, you should use OnClick event.


Solution:3

Change your code to:

<asp:Button     ID="btnReset"     runat="server"     OnClientClick=<%# "hideOverlay('" + pnlOverlay.ClientID + "', '" + pnlAddComment.ClientID +"');" %>    CssClass ="btnCancel PopUpButton"  />  

or even nicer if you use string.Format()

OnClientClick=<%# string.Format("hideOverlay('{0}', '{1}');", pnlOverlay.ClientID,pnlAddComment.ClientID) %>  

And don't forget to databind the link, and yes the onclientclick doesn't have " , since those are used inside the <%# %> tags


Solution:4

You can try this.

i. In the code behind

btnReset.OnClientClick = "hideOverlay'"+pnlOverlay.ClientID+"','"+pnlAddComment.ClientID+"')";  

ii. The second approach is to use an inline javascript.

<asp:Button ID="btnReset" runat="server" OnClientClick = "newhideOverlay()" CssClass  ="btnCancel PopUpButton"/>    <script type="text/javascript">    function newhideOverlay()     {            hideOverlay('<%=pnlOverlay.ClientID %>', '<%=pnlAddComment.ClientID  %>');    }     </script>  

Also ensure that both pnlOverlay and pnlAddComment load before the button.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »