button inside modal loads the page even if validations fire

Question

I have a form inside which I have a button1 which triggers the modal. Inside modal window I have textboxes(to take some credentials) with validations and another button (button2) (type=button) containing onClick definition which is working fine if I provide good data, but when I provide no data in one of the text boxes and click on the button2 the complete page reloads and I get to my main page where I click on button1 and I see the validation messages. The validation should appear just as the user clicks button2

I have looked around and tried couple of thing but cant figure out why is it happening, I am using page routing in page_load is that the reason?

here is the code inside the modal in my html.aspx:

<form=from1  runat=server> 
<div class="modal fade" id="logger_modal" tabindex="-1" role="dialog" aria-labelledby="logger_model1" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body align-content-center">
                      <asp:TextBox ID="textbox1" runat="server" Class="form-control" placeholder="sometext"  onkeydown = "return (event.keyCode!=13);"></asp:TextBox>
                      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="message1" ControlToValidate="textbox1" EnableClientScript="false" Display="Dynamic" ></asp:RequiredFieldValidator>

                      <asp:TextBox ID="textbox2" runat="server"  Class="form-control"  placeholder="sometext"  onkeydown = "return (event.keyCode!=13);"></asp:TextBox>
                      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="message2" ControlToValidate="textbox2" EnableClientScript="false" Display="Dynamic"></asp:RequiredFieldValidator>
                  </div>
                  <div class="modal-footer">

                      <asp:Button ID="close" runat="server" Text="Cancel" type="button" class="btn btn-secondary" data-dismiss="modal"/>
                      <asp:Button ID="button2" runat="server" Text="button2_text" type="button" class="btn btn-primary" CausesValidation="true" OnClick="OnClick_method"  />
                      <asp:Label ID="Label1" runat="server"></asp:Label>

                  </div>
                </div>
              </div>
            </div>

Code inside ONClick_method in html.aspx.cs

if (Page.IsValid)
            {
     some code which works if i provide right values in textboxes
    }
else
        {
           Label1.Text = "Please provide the details.";

        }

Answer 1

This happens because your page does a postback and the page does a complete reload which results in closing the modal which causes probably the lose of values.

To prevent the page from completely reloading you can use a UpdatePanel for partial update of your page.

Example:

      <div class="modal-body align-content-center">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TextBox ID="textbox1" runat="server" Class="form-control" placeholder="sometext" onkeydown="return (event.keyCode!=13);"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="message1" ControlToValidate="textbox1" EnableClientScript="false" Display="Dynamic"></asp:RequiredFieldValidator>

                        <asp:TextBox ID="textbox2" runat="server" Class="form-control" placeholder="sometext" onkeydown="return (event.keyCode!=13);"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="message2" ControlToValidate="textbox2" EnableClientScript="false" Display="Dynamic"></asp:RequiredFieldValidator>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="button2" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>

You only surround the part that needs to be partially updated so the modal won't close and set the control for the async postback to button2.