【问题标题】:button inside modal loads the page even if validations fire即使验证触发,模式内的按钮也会加载页面
【发布时间】:2018-08-30 17:57:44
【问题描述】:

我有一个表单,里面有一个触发模式的 button1。 在模式窗口内,我有带有验证的文本框(获取一些凭据)和另一个包含 onClick 定义的按钮(button2)(type=button),如果我提供良好的数据,它工作正常,但是当我在其中一个文本框中不提供数据时并单击 button2 重新加载完整的页面,然后我进入我的主页,单击 button1 并看到验证消息。 验证应该会在用户单击 button2 时出现

我环顾四周并尝试了几件事,但无法弄清楚为什么会这样, 我在 page_load 中使用页面路由是这个原因吗?

这是我的 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 内的代码

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

        }

【问题讨论】:

    标签: asp.net validation bootstrap-modal pageload


    【解决方案1】:

    发生这种情况是因为您的页面进行了回发并且页面进行了完全重新加载,这导致关闭模式,这可能导致值丢失。

    为防止页面完全重新加载,您可以使用UpdatePanel 来部分更新您的页面。

    例子:

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

    【讨论】:

    • 你干的!谢谢
    • @VishalSingh 很高兴听到这是否解决了您的问题,请将其标记为已回答
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-12-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-25
    • 2015-01-14
    • 2018-08-23
    相关资源
    最近更新 更多