How to stop refreshing parent page after button click event trigger in child page

Question

0.00/5 (No votes)

See more:

I designed a bootstrap modal popup box which will open after clicking a button in parent page . I want to do few things in modal and close it but parent page is refreshed after I click a button on child page and modal form gets submitted . I tried **OnClientClick="return false;"** but it stops firing button event .
Can anyone tell me how to solve it

**CODE**

**Parent Page**

HTML

<a href=\"/abcd/abcd1/abcd2.aspx?abcd3=" + Eval("abcd4") + "&abcd5=" + Eval("abcd6") + "&abcd7=" + Eval("abcd7") + "&abcd8=" + Eval("abcd8") + "\" class='li-modal'>"+ Eval("abcd9") +  "</a>

**CHILD PAGE**

ASP.NET

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" >
        <title>ABCDEF</title>
        <script language="javascript" type="text/javascript" src="/abcdef/xyzed/Script.js"></script>
       
    </head>
    <body scroll="no">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">X</button>    
        </div>
        <div class="modal-body" style="margin-left:-140px;">
      <div class="panel panel-default">
        <div class="panel-body">
          <form id="form1" runat="server">
            <table class="inputForm" cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 100%; table-layout: fixed">
                <thead>
                    <tr height="18">
                        <td>ABCDEF Order</td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td style="vertical-align: middle">
                        
                    <table>
                        <tfoot>
                        <tr>
                            <td>XYZED no:</td>
                            <td>
                                <asp:TextBox ID="No" runat="server" Width="50px" EnableViewState="False" />
                            </td>
                            <td>
                                <asp:Button ID="xyz1" runat="server" Text="|<" OnClick="xyz1_Click"  autopostback="false"/>
                                <asp:Button ID="xyz2" runat="server" Text="<" OnClick="xyz2_Click" OnClientClick="return false;"  />
                                <asp:Button ID="xyz3" runat="server" Text=">" OnClick="xyz3_Click" OnClientClick="return false;" />
                                <asp:Button ID="xyz4" runat="server" Text=">|" OnClick="xyz4_Click" OnClientClick="return false;" />
                            </td>
                        </tr>
                        </tfoot>
                    </table>

                        </td>
                    </tr>
                    <tr class="footerrow" height="24">
                        <td align="right">
                            <asp:Button ID="btnSubmit" CssClass="button" runat="server" Text="Ok" OnClick="btnSubmit_Click">
                            
                            </asp:Button><input class="button" id="btnCancel" onclick=" top.window.close();" type="button"
                                value="Cancel" name="btnCancel" /></td>
                    </tr>
                </tfoot>
            </table>
        </form>
        </div>
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
        
    </body>

        
        
    </html>

    </asp:Content>

**Childpage.cs**

C#

protected void Page_Load(object sender, EventArgs e)
    {
        No = long.Parse(Request.QueryString["No"]);
        RuleNo = long.Parse(Request.QueryString["RuleNo"]);
        if (!IsPostBack)
        {
            No.Text = ((long)oldRuleNo).ToString();
        }
    }


    protected void xyz1_Click(object sender, EventArgs e)
    {
        No.Text = "1";

    }

After clicking xyz1_Click button parent page refreshing . How do I stop it . Please help

</html>

</asp:Content>

What I have tried:

I tried **OnClientClick="return false;"** but it stops firing button event .

Posted 19-Oct-20 5:11am

Member 14362033

Updated 23-Oct-20 12:12pm

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2020-10-19T05:42:00

Solution 1

That's how asp.net works, you click things which causes a postback which re-requests the page allowing your server-side code to run. That code can then amend the state of controls and the updated html is sent to the browser to show. If you want things to happen without the page refreshing you'll need to use ajax. You can get asp.net to do this for you by putting the relevant controls inside an UpdatePanel, so if you wrap the table that conatins your buttons and also the "No" label with an UpdatePanel .net will use ajax to instigate your postback and again use ajax to update the returned html avoiding a page refresh.

UpdatePanel Class (System.Web.UI) | Microsoft Docs[^]

Posted 19-Oct-20 5:42am

F-ES Sitecore

Comments

Member 14362033 19-Oct-20 11:53am

Hello , thanks for reply :) .. I am trying your solution . I will update if my issue gets solved . Thank you once again :)

Member 14362033 23-Oct-20 18:07pm

@F-ES Sitecore Hello , it's not working . I wrapped table with updatepanel , scriptmanager but still parent page refreshes . Any idea???

Member 14362033 23-Oct-20 18:08pm

Updated my code

F-ES Sitecore 24-Oct-20 8:58am

I don't see an updatepanel in the updated code?

Member 14362033 23-Oct-20 19:57pm

I think I have to use jquery and ajax too to prevent refreshing parent page and triggering the child page button also .

Member 14091458 · Answer 2 · 2024-02-02T01:34:00

Solution 3

I tried OnClientClick="return false;" in my button click and it worked for me.
Ex:
<asp:button id="Button1" runat="server" onclientclick="return false" text="Show Popup" class="btn btn-danger" data-target="#loginmodal" data-toggle="modal">

use this solution its worked for me and not refresh when i click the button and it will show
the modal popup and not refreshed

Posted 2-Feb-24 1:34am

Member 14091458

Updated 2-Feb-24 1:37am

v2

Comments

Richard Deeming 2-Feb-24 7:55am

If you'd actually bothered to read the question, you'd know that this is NOT what the OP wanted.

As you have previously been warned, if you're going to resurrect an old question, make sure you have read and understood the question, and that your solution has not already been mentioned in any other solutions.