【解決方法】子ページのボタンクリックイベントトリガー後に親ページの更新を停止する方法

[ad_1]

親ページのボタンをクリックすると開くブートストラップモーダルポップアップボックスをデザインしました。モーダルでいくつかのことを実行して閉じたいのですが、子ページのボタンをクリックすると親ページが更新され、モーダルフォームが送信されます。 **OnClientClick=”return false;”** を試しましたが、ボタンイベントの起動が停止します。
誰か解決方法を教えてください

**コード**

**親ページ**

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>

**子供ページ**

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>

**チャイルドページ.cs**

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";

    }

xyz1_Click ボタンをクリックすると、親ページが更新されます。どうすれば止められますか？助けてください

私が試したこと:

**OnClientClick=”return false;”** を試しましたが、ボタンイベントの起動が停止します。

解決策 1
解決策 3

解決策 1

これが asp.net の仕組みです。クリックするとポストバックが発生し、ページが再要求され、サーバー側のコードが実行できるようになります。そのコードはコントロールの状態を修正することができ、更新された HTML がブラウザに送信されて表示されます。ページを更新せずに処理を実行したい場合は、ajax を使用する必要があります。関連するコントロールを UpdatePanel 内に配置することで、asp.net にこれを実行させることができます。そのため、ボタンを含むテーブルと「No」ラベルを UpdatePanel でラップすると、.net は ajax を使用してポストバックを開始し、再度 ajax を使用して、ページの更新を回避して、返された HTML を更新します。

UpdatePanel クラス (System.Web.UI) Microsoft ドキュメント[^]