locked
Linkbutton To open ModalPopupExtender & Fire event RRS feed

  • Question

  • User2037455357 posted

    Hello there.

    I have a linkButton that opens a ModalPopupExtender which works fine, but I have a JS script to call fire off a hidden button that also has c# code behind the button.  But when I run I get the following error.

    Compiler Error Message: CS1955: Non-invocable member 'Risk_Assessment_Summary.Comment1' cannot be used like a method.

    see code below, ( I have only put in the important parts as the page code is quite large. )

    <%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
    
    <script src="js/bootstrap.min.js"></script>   
    <link href="css/bootstrap.min.css" rel="stylesheet" /> 
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    
    
    
     <script type="text/javascript">      
            function Comment1() { document.getElementById('<%=RiskAssCL_Btn_Comment1.ClientID %>').click(); } 
        </script>
        
    
       <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
                  <asp:Panel ID="Panel_Comment" runat="server" CssClass="auto-style101">
    
                       <table class="auto-style1">
                <tr>
                    <td>
                        <asp:Label ID="Label4" runat="server" Text="Comments"></asp:Label>
                        <br />
                          <asp:TextBox ID="Comments_TxtBox" runat="server" Width="400px" Height="200" TextMode="MultiLine"></asp:TextBox>
    
                    </td>
                   
                </tr>
    
    
    
                           <tr>
                    <td>
    
    
                           <asp:Button ID="Save_Btn" runat="server" Text="Save" OnClick="Save_Btn_Click" />
                        <asp:Button ID="Cancel_Btn" runat="server" Text="Cancel" />
    
    
                        </td>
                </tr>
             
            </table> 
                      <br />
    
                </asp:Panel>
    
           <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender_Comment1" runat="server" BackgroundCssClass="modalbackground" PopupControlID="Panel_Comment" TargetControlID="RiskAssCL_LinkBtn_Comment1" CancelControlID="Cancel_Btn"></ajaxToolkit:ModalPopupExtender>
    	   
    	   
    	   <asp:LinkButton ID="RiskAssCL_LinkBtn_Comment1" CausesValidation="false" OnClick="Comment1()" runat="server">Add/Amend Comment</asp:LinkButton>
                       <asp:Button ID="RiskAssCL_Btn_Comment1" runat="server" Visible="false" Text="Add/Amend Comment" OnClick="RiskAssCL_Btn_Comment1_Click" />
    				   
    				   
    	   
    	   
    
    
    

    Can someone please help me achieve this please.

    Kind Regards

    Rob

    Tuesday, August 27, 2019 8:38 PM

Answers

  • User288213138 posted

    Hi masterdineen,

    As you made the button invisible, asp.net will not rendering the button control in html. (You can check the HTML source),

    So as you said, you can create a style and apply it to the asp.net button once it is rendered at client side to make it invisible.

    <style>
            #RiskAssCL_Btn_Comment1{
                display:none;
            }
        </style>
    

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 6:04 AM
  • User288213138 posted

    Hi  masterdineen,

    That's because it will post back after clicking the button.

    You can try below code, I use a HiddenField control to hidden the ModalPopupExtender, then display it in the button click event .

    The code:

    <asp:HiddenField ID="HiddenField1" runat="server" />
           <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender_Comment1" runat="server" BackgroundCssClass="modalbackground" PopupControlID="Panel_Comment" TargetControlID="HiddenField1" CancelControlID="Cancel_Btn"></ajaxToolkit:ModalPopupExtender>    
                 <asp:LinkButton ID="RiskAssCL_LinkBtn_Comment1" CausesValidation="false" OnClientClick="Comment1(); return false;" runat="server">Add/Amend Comment</asp:LinkButton>
           <asp:Button ID="RiskAssCL_Btn_Comment1" runat="server" Text="Add/Amend Comment" OnClick="RiskAssCL_Btn_Comment1_Click"/>
    <script type="text/javascript">      
                    function Comment1() {
                        document.getElementById('<%=RiskAssCL_Btn_Comment1.ClientID %>').click();
                       
                    }
                </script>
    
    Aspx.cs:
    protected void RiskAssCL_Btn_Comment1_Click(object sender, EventArgs e)
            {
                CommentNumber = 1;
    
                if (Comment1.Length > 0)
                {
                    Comments_TxtBox.Text = Comment1.ToString();
                }
                ModalPopupExtender_Comment1.Show();
            }
    

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 9:45 AM

All replies

  • User475983607 posted

    Use the OnClientClick to execute JavaScript.  OnClick is for server side event handlers.  

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultButton.aspx.cs" Inherits="WebFormsApp.DefaultButton" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:LinkButton ID="RiskAssCL_LinkBtn_Comment1" CausesValidation="false" OnClientClick="Comment1(); return false;" runat="server">Add/Amend Comment</asp:LinkButton>
        </form>
         <script type="text/javascript">      
             function Comment1() {
                 console.log("Hello World");
             }
        </script>
    </body>
    </html>

    Tuesday, August 27, 2019 9:10 PM
  • User2037455357 posted

    Hello Mgebhard

    thank you for coming back to me so quickly.

    I have made the change and now I am getting the following webpage error

    Error: Unable to get property 'click' of undefined or null reference

    the cs code the JS function is calling ( see below )

     protected void RiskAssCL_Btn_Comment1_Click(object sender, EventArgs e)
            {
    
                CommentNumber = 1;
    
                if (Comment1.Length > 0)
                {
                    Comments_TxtBox.Text = Comment1.ToString();
                }
    
            }

    Tuesday, August 27, 2019 9:36 PM
  • User475983607 posted

    That's a JavaScript error. 

    Keep in mind that opening a modal and doing a full page refresh is not a good design.   You need partial refresh which is the realm of the ASP.NET UpdatePanel.  I'm pretty sure you need to rethink the design.

    Tuesday, August 27, 2019 11:31 PM
  • User2037455357 posted
    Thank you Mgebhard

    i shall look into partial refresh. Do you have any idea why i am getting this JavaScript error?
    Wednesday, August 28, 2019 4:59 AM
  • User2037455357 posted



    Looks like i should be using

    “Display: None” instead of Visible=“False”

    i shall give that a go. also i will look into partial page refresh.

    Just for reference to everyone else in need of this

    ASP Parital Refresh

    Wednesday, August 28, 2019 5:08 AM
  • User288213138 posted

    Hi masterdineen,

    As you made the button invisible, asp.net will not rendering the button control in html. (You can check the HTML source),

    So as you said, you can create a style and apply it to the asp.net button once it is rendered at client side to make it invisible.

    <style>
            #RiskAssCL_Btn_Comment1{
                display:none;
            }
        </style>
    

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 6:04 AM
  • User2037455357 posted

    Hi all.

    I have got managed to fire off my event from the LinkButton, but now I have another problem.

    The ModalPopupExtender pops up, then disappears again a about 2 secs, ie once the event has finished.  ( c# event shown above )

    within my javaScript function do I need to call the ModalPopExtender for example.

    $find('ModalPopupExtender_Comment1).show();  ???

    Regards Rob

    Wednesday, August 28, 2019 7:26 AM
  • User288213138 posted

    Hi  masterdineen,

    That's because it will post back after clicking the button.

    You can try below code, I use a HiddenField control to hidden the ModalPopupExtender, then display it in the button click event .

    The code:

    <asp:HiddenField ID="HiddenField1" runat="server" />
           <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender_Comment1" runat="server" BackgroundCssClass="modalbackground" PopupControlID="Panel_Comment" TargetControlID="HiddenField1" CancelControlID="Cancel_Btn"></ajaxToolkit:ModalPopupExtender>    
                 <asp:LinkButton ID="RiskAssCL_LinkBtn_Comment1" CausesValidation="false" OnClientClick="Comment1(); return false;" runat="server">Add/Amend Comment</asp:LinkButton>
           <asp:Button ID="RiskAssCL_Btn_Comment1" runat="server" Text="Add/Amend Comment" OnClick="RiskAssCL_Btn_Comment1_Click"/>
    <script type="text/javascript">      
                    function Comment1() {
                        document.getElementById('<%=RiskAssCL_Btn_Comment1.ClientID %>').click();
                       
                    }
                </script>
    
    Aspx.cs:
    protected void RiskAssCL_Btn_Comment1_Click(object sender, EventArgs e)
            {
                CommentNumber = 1;
    
                if (Comment1.Length > 0)
                {
                    Comments_TxtBox.Text = Comment1.ToString();
                }
                ModalPopupExtender_Comment1.Show();
            }
    

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 9:45 AM
  • User2037455357 posted

    Thank you so much Sam

    I shall try it out in a bit and will let you know.

    Thank you again.

    Wednesday, August 28, 2019 9:58 AM
  • User2037455357 posted

    Hi Sam

    I have implemented the suggestion above it works, but it the modelPopupExtender doesn't open up with the desired background CSS.

    It just opens up a plain box in the top right hand side with textbox and buttons.

    is there a way I can force it to open as it would before implanting the server side JS script?

    Regards

    Rob

    Wednesday, August 28, 2019 12:41 PM
  • User2037455357 posted

    Hi all

    excellent learning curve

    I have achieved my desired functionality with this.

    Instead of using  <asp:HiddenField ID="ModalPopUp_Hidden1" runat="server"/>

    I used  ModalPopupExtender_Comment1.Show(); within my LinkedButton event which is being called from a JS function.

    Then to save and close the ModalPopUpExender, I removed the OkControlID="Save_Btn" from my ajaxToolkit:modelpopupExtender

    and have the save button run some behind code (c#) to save my text and also to hide the popup. (  ModalPopupExtender_Comment1.Hide(); 

    Thank you again.

    Regards Rob

    Wednesday, August 28, 2019 7:21 PM