locked
Button Click event within Panel RRS feed

  • Question

  • User2037455357 posted

    Hello there

    I have the below panel with a two buttons,

    one button to close the panel, and the other to run a button click event but both buttons close the panel.

    can someone point me in the right direction please.

    aspx code below

    
      <style>
    
            .Center {
                width: 100%;
                text-align: center;
                
              
            }
    
            .GridViewCenter {
                margin-left: auto;
                margin-right: auto;
                height: 200px;
                width: 800px;
                overflow: auto;
            }
    
    
            .Panel_SearchContract {
                /*padding:20pc 0px 24px 10px;*/
                ;
                margin-left:auto;
                margin-right:auto;
                margin-top:auto;
                margin-bottom:auto;
                width: 1000px;
                height: 600px;
                background-color: white;
                border: 1px solid black;
                left: 0px;
                top: 0px;
                
                
            }
    
              .modalbackground
            {
                background-color:black;
                filter:alpha(opacity=90);
                opacity:0.6;
                z-index:20;
            }
    
              .HiddenButton
            {
                display:none;
            }
    
               .DropdownOverFlow
              {
                max-height:310px;
                height:auto;
                height:310px;
                width:300px;
                overflow-x: hidden;
                overflow-y: scroll;
                margin-left:auto;
                margin-right:auto;
                ;
                /*margin-left:52%;*/
                text-align:left;
                /*border:solid 1px;*/
     }
    
               .CheckBoxListCenter {
                margin-left: auto;
                margin-right: auto;
                height: 300px;
                width: 235px;
                overflow: auto;
                background-color:lightblue
            }
    
            .productsServicesList {
                background-color: #eeeeee;
                padding: 3px;
                border: solid 1px #bbbbbb;
                vertical-align: top;
                text-align: left;
                overflow: auto;
                height: 170px;
                width: 230px;
            }
    
             .Panel_ProductsServices {
                /*padding:20pc 0px 24px 10px;*/
                ;
                /*margin-left:auto;*/
                /*margin-right:auto;*/
                margin:auto;
                width: 600px;
                height: 520px;
                background-color: white;
                border: 1px solid black;
                left: 0px;
                top: 0px;
                
                
            }
    
    
    
    
        </style>
    
    
    
    
    
        <asp:Panel ID="Panel_SearchContract" runat="server" CssClass="Panel_SearchContract" style="display:none;">
    
            <div>
    
        <table class ="Center">
    
    
        <tr>
            <td>
                <br /><br />
                <asp:Label ID="Label35" runat="server" Text="Search Contract" Font-Size="30" Font-Bold="True" ForeColor="#3366FF"></asp:Label>
    
                
                <br />
    
            </td>
    
            </tr>
    
            <tr>
            <td>
                <br />
                <asp:Button ID="Button5" runat="server" class="btn btn-primary btn-md" Text="Search"/>
                <asp:Button ID="ClientRepDet_SearchContractPanel_btn" runat="server" Cssclass="btn btn-primary btn-md" Text="Cancel" OnClick="ContractPanelTest"/>
            <br /><br />    <asp:Label ID="ClientRepDet_SearchContractPanel_TestSQL" runat="server" Text="SQL TEST"></asp:Label>
                <br /><br />
    
            </td>
    
            </tr>
    
    
            
        
    
        <tr>
                    
                    <td>  
                        <%--LEFT COLUMN--%>
                        <asp:Label ID="Label36" runat="server" Text="Legal Name" Width="120px" style="text-align:right;"></asp:Label>
                        <asp:TextBox ID="ClientRepDet_SearchContract_LegalName_TxtBox" runat="server" Width="200px"></asp:TextBox>
    
                         <%--MIDDLE COLUMN--%>
                        <asp:Label ID="Label37" runat="server" Text="Analyst" Width="120px" style="text-align:right"></asp:Label>
                        <asp:DropDownList ID="ClientRepDet_SearchContract_Analyst_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
    
                         <%--RIGHT COLUMN--%>
                        <asp:Label ID="Label38" runat="server" Text="Review Status" Width="120px" style="text-align:right"></asp:Label>
                        <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewStatad_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
    
                        <br /><br />
                    </td>
    
                </tr>
    
        <tr>
                    
                    <td>  
                        <%--LEFT COLUMN--%>
                        <asp:Label ID="Label39" runat="server" Text="CW Number" Width="120px" style="text-align:right;"></asp:Label>
                        <asp:TextBox ID="ClientRepDet_SearchContract_CwNumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
    
                         <%--MIDDLE COLUMN--%>
                        <asp:Label ID="Label40" runat="server" Text="Contract Status" Width="120px" style="text-align:right"></asp:Label>
                        <asp:DropDownList ID="ClientRepDet_SearchContract_ContractStatus_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
    
                         <%--RIGHT COLUMN--%>
                        <asp:Label ID="Label41" runat="server" Text="Reviewed By" Width="120px" style="text-align:right"></asp:Label>
                        <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewedBy_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
    
                        <br /><br />
                    </td>
    
                </tr>
    
        <tr>
                    
                    <td>  
                        <%--LEFT COLUMN--%>
                        <asp:Label ID="Label42" runat="server" Text="ICA Number" Width="120px" style="text-align:right;"></asp:Label>
                        <asp:TextBox ID="ClientRepDet_SearchContract_ICANumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
    
                         <%--MIDDLE COLUMN--%>
                        <asp:Label ID="Label43" runat="server" Text="Allocated To" Width="120px" style="text-align:right"></asp:Label>
                        <asp:DropDownList ID="ClientRepDet_SearchContract_AllocatedTo_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
    
                         <%--RIGHT COLUMN--%>
                        <asp:Label ID="Label44" runat="server" Text="Count" Width="120px" style="text-align:right"></asp:Label>
                        <asp:TextBox ID="ClientRepDet_SearchContract_SearchCount_TxtBox" runat="server" Width="200px"></asp:TextBox>
    
                    </td>
    
                </tr>
    
    
    
    </table>
    
    
    
            </div>
    <br /><br />
    
           
    
    <div class="GridViewCenter">  
    
    <%--    <div style ="height:200px; width:1000px; overflow:auto; align-content:center;">--%>
        <asp:GridView ID="SearchContract_GridView" runat="server" DataSourceID="SearchContracts" GridLines="None" Style="margin-left: auto; border-style: none; border: none; margin-right: auto" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="#C2D69B">
    
    
            <Columns>
    
    
                <asp:HyperLinkField DataTextField="Legal_Name" HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataNavigateUrlFields="Client_ID"  ItemStyle-Width="450px" HeaderText="CompanyName"
                    DataNavigateUrlFormatString="Client_Rep_Details.aspx?SearchContract_ClientId={0}" SortExpression="Legal_Name">
                         <HeaderStyle HorizontalAlign="Left" Font-Names="Tahoma"></HeaderStyle>
                     </asp:HyperLinkField>
    
                <%--<asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left"  DataField="User_Name" HeaderText="User_Name" ItemStyle-Width="130px" SortExpression="User_Name"></asp:BoundField>--%>
                <%--<asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left"  DataField="Legal_Name" HeaderText="Legal_Name" ItemStyle-Width="130px" SortExpression="Legal_Name"></asp:BoundField>--%>
                <%--<asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left"  DataField="ICA_Number" HeaderText="ICA_Number" ItemStyle-Width="130px" SortExpression="ICA_Number"></asp:BoundField>--%>
                <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataField="Incorporation_Number" HeaderText="Incorporation_Number" ItemStyle-Width="130px" SortExpression="Incorporation_Number"></asp:BoundField>
                <%--<asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left"  DataField="CW_Number" HeaderText="CW_Number" ItemStyle-Width="130px" SortExpression="CW_Number"></asp:BoundField>--%>
                <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left"  DataField="Status" HeaderText="Status" ItemStyle-Width="130px" SortExpression="Status"></asp:BoundField>
    
                    </Columns>
                </asp:GridView>
    
    
    
    
        <asp:SqlDataSource runat="server" ID="SearchContracts" ConnectionString='<%$ ConnectionStrings:Risk_AssessmentConnectionString %>' SelectCommand="SELECT [User_Name], [Legal_Name], [ICA_Number], [Incorporation_Number], [CW_Number], [Status], [Review_Status], [Assigned_To], [Reviewed_By], [Client_ID] FROM [vw_Repository_Clients]"></asp:SqlDataSource>
         </div>   
    
        
                </asp:Panel>
    
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender_SearchContract" runat="server" BackgroundCssClass="modalbackground" PopupControlID="Panel_SearchContract"  TargetControlID="ClientRepDet_SearchContract_btn"></ajaxToolkit:ModalPopupExtender>
    

    my click event is just a simple display text to a label.

    Regards

    Rob

    Wednesday, September 11, 2019 11:54 AM

Answers

  • User-719153870 posted

    Hi masterdineen,

    masterdineen

    one button to close the panel, and the other to run a button click event but both buttons close the panel.

    This is caused by the post back of your button click event, this will refresh your page and the panel will disappear.

    My first thought is that you can use JS function and Ajax in th front to do what you want the button do in the behind, this will definitely solve your problem.

    Or, you can do a little trick with an updatepanel and modalpopup.show() method.

    In this case, please refer to below code:

    ASPX:

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="ClientRepDet_SearchContract_btn" runat="server" Text="Show Panel"  />
                        <asp:Panel ID="Panel_SearchContract" runat="server" CssClass="Panel_SearchContract" Style="display: none;">
                            <div>
                                <table class="Center">
                                    <tr>
                                        <td>
                                            <br />
                                            <br />
                                            <asp:Label ID="Label35" runat="server" Text="Search Contract" Font-Size="30" Font-Bold="True" ForeColor="#3366FF"></asp:Label>
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <br />
                                            <asp:Button ID="Button5" runat="server" class="btn btn-primary btn-md" Text="Search" OnClick="Button5_Click" />
                                            <asp:Button ID="ClientRepDet_SearchContractPanel_btn" runat="server" CssClass="btn btn-primary btn-md" Text="Cancel" OnClick="ClientRepDet_SearchContractPanel_btn_Click" />
                                            <br />
                                            <br />
                                            <asp:Label ID="ClientRepDet_SearchContractPanel_TestSQL" runat="server" Text="SQL TEST"></asp:Label>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label36" runat="server" Text="Legal Name" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_LegalName_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label37" runat="server" Text="Analyst" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_Analyst_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label38" runat="server" Text="Review Status" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewStatad_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label39" runat="server" Text="CW Number" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_CwNumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label40" runat="server" Text="Contract Status" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ContractStatus_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label41" runat="server" Text="Reviewed By" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewedBy_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label42" runat="server" Text="ICA Number" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_ICANumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label43" runat="server" Text="Allocated To" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_AllocatedTo_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label44" runat="server" Text="Count" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_SearchCount_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <br />
                            <br />
                            <div class="GridViewCenter">
                                <asp:GridView ID="SearchContract_GridView" runat="server" DataSourceID="SearchContracts" GridLines="None" Style="margin-left: auto; border-style: none; border: none; margin-right: auto" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="#C2D69B">
                                    <Columns>
                                        <asp:HyperLinkField DataTextField="UName" HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataNavigateUrlFields="UID" ItemStyle-Width="450px" HeaderText="CompanyName"
                                            DataNavigateUrlFormatString="Client_Rep_Details.aspx?SearchContract_ClientId={0}" SortExpression="UName">
                                            <HeaderStyle HorizontalAlign="Left" Font-Names="Tahoma"></HeaderStyle>
                                        </asp:HyperLinkField>
                                        <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataField="UAge" HeaderText="Incorporation_Number" ItemStyle-Width="130px" SortExpression="UAge"></asp:BoundField>
                                        <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataField="UAge" HeaderText="Status" ItemStyle-Width="130px" SortExpression="UAge"></asp:BoundField>
                                    </Columns>
                                </asp:GridView>
                                <asp:SqlDataSource runat="server" ID="SearchContracts" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True" SelectCommand="SELECT * FROM [Users]"></asp:SqlDataSource>
                            </div>
    
                        </asp:Panel>
                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender_SearchContract" runat="server" BackgroundCssClass="modalbackground" PopupControlID="Panel_SearchContract" TargetControlID="ClientRepDet_SearchContract_btn"></ajaxToolkit:ModalPopupExtender>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>

    .CS:

            protected void ClientRepDet_SearchContractPanel_btn_Click(object sender, EventArgs e)
            {
            }
    
            protected void Button5_Click(object sender, EventArgs e)
            {
                ModalPopupExtender_SearchContract.Show();//show your panel and do the panel change operation
                ClientRepDet_SearchContractPanel_TestSQL.Text = "Success";
            }

    See the result:

    Notice: If this trick won't applicable to your project, try Ajax this will definitely work.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 12, 2019 3:12 AM

All replies

  • User2037455357 posted

    I have found the following post and shall give it a go.

    https://forums.asp.net/t/2100773.aspx?Set+button+as+default

    ive never come across the DefultButton.

    Wednesday, September 11, 2019 3:29 PM
  • User-719153870 posted

    Hi masterdineen,

    masterdineen

    one button to close the panel, and the other to run a button click event but both buttons close the panel.

    This is caused by the post back of your button click event, this will refresh your page and the panel will disappear.

    My first thought is that you can use JS function and Ajax in th front to do what you want the button do in the behind, this will definitely solve your problem.

    Or, you can do a little trick with an updatepanel and modalpopup.show() method.

    In this case, please refer to below code:

    ASPX:

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="ClientRepDet_SearchContract_btn" runat="server" Text="Show Panel"  />
                        <asp:Panel ID="Panel_SearchContract" runat="server" CssClass="Panel_SearchContract" Style="display: none;">
                            <div>
                                <table class="Center">
                                    <tr>
                                        <td>
                                            <br />
                                            <br />
                                            <asp:Label ID="Label35" runat="server" Text="Search Contract" Font-Size="30" Font-Bold="True" ForeColor="#3366FF"></asp:Label>
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <br />
                                            <asp:Button ID="Button5" runat="server" class="btn btn-primary btn-md" Text="Search" OnClick="Button5_Click" />
                                            <asp:Button ID="ClientRepDet_SearchContractPanel_btn" runat="server" CssClass="btn btn-primary btn-md" Text="Cancel" OnClick="ClientRepDet_SearchContractPanel_btn_Click" />
                                            <br />
                                            <br />
                                            <asp:Label ID="ClientRepDet_SearchContractPanel_TestSQL" runat="server" Text="SQL TEST"></asp:Label>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label36" runat="server" Text="Legal Name" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_LegalName_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label37" runat="server" Text="Analyst" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_Analyst_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label38" runat="server" Text="Review Status" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewStatad_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label39" runat="server" Text="CW Number" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_CwNumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label40" runat="server" Text="Contract Status" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ContractStatus_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label41" runat="server" Text="Reviewed By" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewedBy_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label42" runat="server" Text="ICA Number" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_ICANumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label43" runat="server" Text="Allocated To" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_AllocatedTo_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label44" runat="server" Text="Count" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_SearchCount_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <br />
                            <br />
                            <div class="GridViewCenter">
                                <asp:GridView ID="SearchContract_GridView" runat="server" DataSourceID="SearchContracts" GridLines="None" Style="margin-left: auto; border-style: none; border: none; margin-right: auto" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="#C2D69B">
                                    <Columns>
                                        <asp:HyperLinkField DataTextField="UName" HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataNavigateUrlFields="UID" ItemStyle-Width="450px" HeaderText="CompanyName"
                                            DataNavigateUrlFormatString="Client_Rep_Details.aspx?SearchContract_ClientId={0}" SortExpression="UName">
                                            <HeaderStyle HorizontalAlign="Left" Font-Names="Tahoma"></HeaderStyle>
                                        </asp:HyperLinkField>
                                        <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataField="UAge" HeaderText="Incorporation_Number" ItemStyle-Width="130px" SortExpression="UAge"></asp:BoundField>
                                        <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataField="UAge" HeaderText="Status" ItemStyle-Width="130px" SortExpression="UAge"></asp:BoundField>
                                    </Columns>
                                </asp:GridView>
                                <asp:SqlDataSource runat="server" ID="SearchContracts" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True" SelectCommand="SELECT * FROM [Users]"></asp:SqlDataSource>
                            </div>
    
                        </asp:Panel>
                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender_SearchContract" runat="server" BackgroundCssClass="modalbackground" PopupControlID="Panel_SearchContract" TargetControlID="ClientRepDet_SearchContract_btn"></ajaxToolkit:ModalPopupExtender>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>

    .CS:

            protected void ClientRepDet_SearchContractPanel_btn_Click(object sender, EventArgs e)
            {
            }
    
            protected void Button5_Click(object sender, EventArgs e)
            {
                ModalPopupExtender_SearchContract.Show();//show your panel and do the panel change operation
                ClientRepDet_SearchContractPanel_TestSQL.Text = "Success";
            }

    See the result:

    Notice: If this trick won't applicable to your project, try Ajax this will definitely work.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 12, 2019 3:12 AM
  • User2037455357 posted

    Hi Yang

    I have managed to get this working using an updatePanel, so thank you for that.

    just out of interest can you show me an example how to do this using and AJAX call please.?

    Regards

    Rob

    Thursday, September 12, 2019 1:48 PM
  • User-719153870 posted

    Hi masterdineen,

    can you show me an example how to do this using and AJAX call please.?

    Sure, i'm glad to show you a simple demo using AJAX. Also, you can found a lot of other samples online.

    ASPX:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <style>
            .Center {
                width: 100%;
                text-align: center;
            }
    
            .GridViewCenter {
                margin-left: auto;
                margin-right: auto;
                height: 200px;
                width: 800px;
                overflow: auto;
            }
    
            .Panel_SearchContract {
                /*padding:20pc 0px 24px 10px;*/
                ;
                margin-left: auto;
                margin-right: auto;
                margin-top: auto;
                margin-bottom: auto;
                width: 1000px;
                height: 600px;
                background-color: white;
                border: 1px solid black;
                left: 0px;
                top: 0px;
            }
    
            .modalbackground {
                background-color: black;
                filter: alpha(opacity=90);
                opacity: 0.6;
                z-index: 20;
            }
    
            .HiddenButton {
                display: none;
            }
    
            .DropdownOverFlow {
                max-height: 310px;
                height: auto;
                height: 310px;
                width: 300px;
                overflow-x: hidden;
                overflow-y: scroll;
                margin-left: auto;
                margin-right: auto;
                ;
                /*margin-left:52%;*/
                text-align: left;
                /*border:solid 1px;*/
            }
    
            .CheckBoxListCenter {
                margin-left: auto;
                margin-right: auto;
                height: 300px;
                width: 235px;
                overflow: auto;
                background-color: lightblue
            }
    
            .productsServicesList {
                background-color: #eeeeee;
                padding: 3px;
                border: solid 1px #bbbbbb;
                vertical-align: top;
                text-align: left;
                overflow: auto;
                height: 170px;
                width: 230px;
            }
    
            .Panel_ProductsServices {
                /*padding:20pc 0px 24px 10px;*/
                ;
                /*margin-left:auto;*/
                /*margin-right:auto;*/
                margin: auto;
                width: 600px;
                height: 520px;
                background-color: white;
                border: 1px solid black;
                left: 0px;
                top: 0px;
            }
        </style>
        <script>
            $(function () {
                $('#Button5').click(function () {
                    var UID = "11";
                    $.ajax({
                        type: "POST",
                        url: "ClickEventPanelDemo.aspx/QueryUsers",
                        data: "{'UID':'" + UID + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            $('#ClientRepDet_SearchContractPanel_TestSQL').html(data.d);
                        },
                        error: function (msg) {
                            alert('fail');
                        }
                    });
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <%-- In the Ajax case, you will need no Updatepanel --%>
                        <asp:Button ID="ClientRepDet_SearchContract_btn" runat="server" Text="Show Panel"  />
                        <asp:Panel ID="Panel_SearchContract" runat="server" CssClass="Panel_SearchContract" Style="display: none;">
                            <div>
                                <table class="Center">
                                    <tr>
                                        <td>
                                            <br />
                                            <br />
                                            <asp:Label ID="Label35" runat="server" Text="Search Contract" Font-Size="30" Font-Bold="True" ForeColor="#3366FF"></asp:Label>
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <br />
                                            <%--<asp:Button ID="Button5" runat="server" class="btn btn-primary btn-md" Text="Search" />--%>
                                            <input type="button" id="Button5" class="btn btn-primary btn-md" value="Search" /> <%-- You will need to change your asp:Button to a html input tag because of the postback issue --%>
                                            <asp:Button ID="ClientRepDet_SearchContractPanel_btn" runat="server" CssClass="btn btn-primary btn-md" Text="Cancel" OnClick="ClientRepDet_SearchContractPanel_btn_Click" />
                                            <br />
                                            <br />
                                            <asp:Label ID="ClientRepDet_SearchContractPanel_TestSQL" runat="server" Text="SQL TEST"></asp:Label>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label36" runat="server" Text="Legal Name" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_LegalName_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label37" runat="server" Text="Analyst" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_Analyst_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label38" runat="server" Text="Review Status" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewStatad_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label39" runat="server" Text="CW Number" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_CwNumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label40" runat="server" Text="Contract Status" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ContractStatus_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label41" runat="server" Text="Reviewed By" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_ReviewedBy_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <%--LEFT COLUMN--%>
                                            <asp:Label ID="Label42" runat="server" Text="ICA Number" Width="120px" Style="text-align: right;"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_ICANumber_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                            <%--MIDDLE COLUMN--%>
                                            <asp:Label ID="Label43" runat="server" Text="Allocated To" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:DropDownList ID="ClientRepDet_SearchContract_AllocatedTo_DropDwnLst" runat="server" Width="200px"></asp:DropDownList>
                                            <%--RIGHT COLUMN--%>
                                            <asp:Label ID="Label44" runat="server" Text="Count" Width="120px" Style="text-align: right"></asp:Label>
                                            <asp:TextBox ID="ClientRepDet_SearchContract_SearchCount_TxtBox" runat="server" Width="200px"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <br />
                            <br />
                            <div class="GridViewCenter">
                                <asp:GridView ID="SearchContract_GridView" runat="server" DataSourceID="SearchContracts" GridLines="None" Style="margin-left: auto; border-style: none; border: none; margin-right: auto" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="#C2D69B">
                                    <Columns>
                                        <asp:HyperLinkField DataTextField="UName" HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataNavigateUrlFields="UID" ItemStyle-Width="450px" HeaderText="CompanyName"
                                            DataNavigateUrlFormatString="Client_Rep_Details.aspx?SearchContract_ClientId={0}" SortExpression="UName">
                                            <HeaderStyle HorizontalAlign="Left" Font-Names="Tahoma"></HeaderStyle>
                                        </asp:HyperLinkField>
                                        <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataField="UAge" HeaderText="Incorporation_Number" ItemStyle-Width="130px" SortExpression="UAge"></asp:BoundField>
                                        <asp:BoundField HeaderStyle-CssClass="text-left" ItemStyle-CssClass="text-left" DataField="UAge" HeaderText="Status" ItemStyle-Width="130px" SortExpression="UAge"></asp:BoundField>
                                    </Columns>
                                </asp:GridView>
                                <asp:SqlDataSource runat="server" ID="SearchContracts" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True" SelectCommand="SELECT * FROM [Users]"></asp:SqlDataSource>
                            </div>
    
                        </asp:Panel>
                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender_SearchContract" runat="server" BackgroundCssClass="modalbackground" PopupControlID="Panel_SearchContract" TargetControlID="ClientRepDet_SearchContract_btn"></ajaxToolkit:ModalPopupExtender>
            </div>
        </form>
    </body>
    </html>

    .CS:

    using System.Data.SqlClient;
    using System.Web.Services;
    
    [WebMethod]
            public static string QueryUsers(string UID)
            {
                string UName = "";
                SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True");
                con.Open();
                try
                {
                    SqlCommand cmd = new SqlCommand();
                    cmd.Connection = con;
                    cmd.CommandText = "select UName from Users where UID ="+UID;
                    SqlDataReader sdr = cmd.ExecuteReader();
                    while (sdr.Read())
                    {
                        UName = sdr["UName"].ToString();
                    }
                    return UName;
                }
                catch (Exception ex)
                {
                    return UName;
                }
            }

    The result of the Ajax case:

    Of course, if you are interested in the JQuery Ajax or met any problem when you use it, please open other new threads in the forum.

    Hope this can help you.

    Best Regard,

    Yang Shen

    Friday, September 13, 2019 1:39 AM
  • User2037455357 posted
    Thank you very much.
    Friday, September 13, 2019 4:22 AM