即使验证通过，模态内的按钮也会加载页面 [英] button inside modal loads the page even if validations fire

问题描述

我有一个表单，里面有一个触发模态的button1. 在模式窗口中，我有一个带有验证的文本框(需要一些凭证)和另一个包含onClick定义的按钮(button2)(type = button)，如果我提供了良好的数据，但在其中一个文本框中没有提供数据时，该按钮就可以正常工作然后单击button2，将重新加载整个页面，然后转到主页，单击button1，然后看到验证消息. 验证应该与用户单击button2一样出现

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

我环顾四周并尝试了几件事，但无法弄清楚为什么会发生这种情况， 我在page_load中使用页面路由是什么原因?

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?

这是我的html.aspx模态中的代码:

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>

html.aspx.cs中ONClick_method内的代码

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

        }

推荐答案

之所以会发生这种情况，是因为您的页面执行了回发并且页面进行了完全重新加载，从而导致关闭模态，从而可能导致值丢失.

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.

要防止页面完全重新加载，可以使用UpdatePanel进行页面的部分更新.

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

示例:

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

您只围绕需要部分更新的部分，因此模态不会关闭，并将异步回发的控件设置为button2.

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.

这篇关于即使验证通过，模态内的按钮也会加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！