即使验证触发,模态内的按钮也会加载页面
button inside modal loads the page even if validations fire
我有一个表单,里面有一个触发模式的按钮 1。
在模态 window 中,我有带有验证的文本框(用于获取一些凭据)和另一个包含 onClick 定义的按钮(按钮 2)(类型 = 按钮),如果我提供良好的数据,它可以正常工作,但是当我没有提供任何数据时文本框并单击 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">×</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>
ONClick_method 内的代码 html.aspx.cs
if (Page.IsValid)
{
some code which works if i provide right values in textboxes
}
else
{
Label1.Text = "Please provide the details.";
}
发生这种情况是因为您的页面进行了回发并且页面进行了完全重新加载,这导致关闭模式,这可能会导致值丢失。
要防止页面完全重新加载,您可以使用 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。
我有一个表单,里面有一个触发模式的按钮 1。 在模态 window 中,我有带有验证的文本框(用于获取一些凭据)和另一个包含 onClick 定义的按钮(按钮 2)(类型 = 按钮),如果我提供良好的数据,它可以正常工作,但是当我没有提供任何数据时文本框并单击 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">×</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>
ONClick_method 内的代码 html.aspx.cs
if (Page.IsValid)
{
some code which works if i provide right values in textboxes
}
else
{
Label1.Text = "Please provide the details.";
}
发生这种情况是因为您的页面进行了回发并且页面进行了完全重新加载,这导致关闭模式,这可能会导致值丢失。
要防止页面完全重新加载,您可以使用 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。