I want to validate two fields in a bootstrap modal and I want to close the modal in
ELSE
part of the
IF
condition. The issue is, modal is closing before display the
MesssageBoxModal
modal. Please help me to solve the issue.
My .aspx file (markup) is as below
<pre><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="User_Control.TestPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/bootstrap.css" rel="stylesheet" />
<script src="JS/jquery-3.2.1.js"></script>
<link href="CSS/jquery-ui.css" rel="stylesheet" />
<script src="JS/jquery-ui.js"></script>
<script src="JS/bootstrap.js"></script>
<script>
function openModal() {
$('#exampleModal').modal({ hide: true });
};
function openMessageBox() {
$('#MesssageBoxModal').modal({ hide: true });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
<asp:TextBox ID="txtConfirmPassword" runat="server"></asp:TextBox>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<asp:Button ID="Button1" runat="server" Text="Button" class="btn btn-primary" OnClick="Button1_Click" />
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<div id="MesssageBoxModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Field validation is failed. Please check and retry.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
My C# code behind is as below
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CommonFunctions;
namespace User_Control
{
public partial class TestPage : System.Web.UI.Page
{
DBTasks objDBTasks = new DBTasks();
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
if (txtPassword.Text != txtConfirmPassword.Text)
{
objDBTasks.manipulateData("insert into test_table values (now(), 'FAILED')");
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "MesssageBoxModal", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#MesssageBoxModal').hide();", true);
}
else
{
objDBTasks.manipulateData("insert into test_table values (now(), 'SUCCESS')");
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "exampleModal", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#exampleModal').hide();", true);
}
}
}
}
What I have tried:
Please help me to avoid this issue...