ASP.NET How to use button on modal Pop Up Bootstrap 4 without closing or refreshing popup
Question
I have a button on my main page which open popup, in pop up I have gridview, table and button (Add new row) where the user adds a new person in a table and on the button(Add new row) add that new row from table to the grid view. The problem is when the button(Add new row) is clicked popup will close and when open again popup will have that new row in the gridview. How to prevent pop up from closing when button (Add new row) is clicked?
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:LinkButton ID="btnOpenPopUp" runat="server" CssClass="btn btn-dark btn-sm" data-toggle="modal" data-target="#PopUpModal">Open PopUp</asp:LinkButton>
<div class="modal fade" id="PopUpModal" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="container-fluid">
<br />
<div class="text-center">
<asp:Label ID="Label28" runat="server" Font-Size="X-Large" Text="GRID with table"></asp:Label>
</div>
</div>
</div>
<div class="modal-body ">
<div>
<table class="table-borderless p-0"
border="1" id="HeaderGridView1"
style="border-style: None; border-collapse: collapse;">
<tr>
<th style="width: 185px; text-align: center">Name</th>
<th style="width: 150px; text-align: center">Surname</th>
<th style="width: 110px; text-align: center">Nickname</th>
</tr>
</table>
</div>
<div class="container-fluid p-0" style="max-height: 99px; overflow-y: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
CssClass="table-borderless"
CellPadding="1"
BorderStyle="None"
ShowHeader="false"
ShowFooter="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server" Width="185px" Text='<%#Eval("cls_Name") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtSurname" runat="server" Width="150px" Text='<%#Eval("cls_Surname") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtNickname" runat="server" Width="110px" Text='<%#Eval("cls_Nickname") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div>
<table class="table-borderless p-0"
border="1" id="FooterGridview1"
style="border-style: None; border-collapse: collapse;">
<tr>
<th>
<asp:TextBox ID="FtxtName" BackColor="#CCCCCC" runat="server" Width="185px" Text='<%#Eval("cls_Name") %>'></asp:TextBox>
</th>
<th>
<asp:TextBox ID="FtxtSurname" runat="server" Width="150px" Text='<%#Eval("cls_Surname") %>'></asp:TextBox>
</th>
<th>
<asp:TextBox ID="FtxtNickname" runat="server" Width="110px" Text='<%#Eval("cls_Nickname") %>'></asp:TextBox>
</th>
</tr>
</table>
</div>
<div class="p-0">
<asp:Button ID="Button1" runat="server" OnClick="AddNewRow_Click" UseSubmitBehavior="False" Text="Add new row" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
This is code behind:
protected void AddNewRow_Click(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("cls_Name");
dt.Columns.Add("cls_Surname");
dt.Columns.Add("cls_Nickname");
DataRow dr = null;
if (ViewState["vs"] != null)
{
for (int i = 0; i < 1; i++)
{
dt = (DataTable)ViewState["vs"];
if (dt.Rows.Count > 0)
{
dr = dt.NewRow();
dr["cls_Name"] = FtxtName.Text;
dr["cls_Surname"] = FtxtSurname.Text;
dr["cls_Nickname"] = FtxtNickname.Text;
dt.Rows.Add(dr);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
else
{
dr = dt.NewRow();
dr["cls_Name"] = FtxtName.Text;
dr["cls_Surname"] = FtxtSurname.Text;
dr["cls_Nickname"] = FtxtNickname.Text;
dt.Rows.Add(dr);
GridView1.DataSource = dt;
GridView1.DataBind();
}
ViewState["vs"] = dt;
FtxtName.Text = "";
FtxtSurname.Text = "";
FtxtNickname.Text = "";
}
1 answers
solution1
0 2020-11-07 22:11:20
In order to achieve partial page post back while using ASP.NET WebForms, you should use ajax calls or use an UpdatePanel to achieve the required task.
For that, put the ScriptManager right after the form element of yours with runat="server" attribute.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
and wrap your modal in the UpdatePanel like this:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div class="modal fade" id="PopUpModal" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="container-fluid">
<br />
<div class="text-center">
<asp:Label ID="Label28" runat="server" Font-Size="X-Large" Text="GRID with table"></asp:Label>
</div>
</div>
</div>
<div class="modal-body ">
<div>
<table class="table-borderless p-0"
border="1" id="HeaderGridView1"
style="border-style: None; border-collapse: collapse;">
<tr>
<th style="width: 185px; text-align: center">Name</th>
<th style="width: 150px; text-align: center">Surname</th>
<th style="width: 110px; text-align: center">Nickname</th>
</tr>
</table>
</div>
<div class="container-fluid p-0" style="max-height: 99px; overflow-y: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
CssClass="table-borderless"
CellPadding="1"
BorderStyle="None"
ShowHeader="false"
ShowFooter="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server" Width="185px" Text='<%#Eval("cls_Name") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtSurname" runat="server" Width="150px" Text='<%#Eval("cls_Surname") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtNickname" runat="server" Width="110px" Text='<%#Eval("cls_Nickname") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div>
<table class="table-borderless p-0"
border="1" id="FooterGridview1"
style="border-style: None; border-collapse: collapse;">
<tr>
<th>
<asp:TextBox ID="FtxtName" BackColor="#CCCCCC" runat="server" Width="185px" Text='<%#Eval("cls_Name") %>'></asp:TextBox>
</th>
<th>
<asp:TextBox ID="FtxtSurname" runat="server" Width="150px" Text='<%#Eval("cls_Surname") %>'></asp:TextBox>
</th>
<th>
<asp:TextBox ID="FtxtNickname" runat="server" Width="110px" Text='<%#Eval("cls_Nickname") %>'></asp:TextBox>
</th>
</tr>
</table>
</div>
<div class="p-0">
<asp:Button ID="Button1" runat="server" OnClick="AddNewRow_Click" UseSubmitBehavior="False" Text="Add new row" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
So, the whole body would look like this:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div class="modal fade" id="PopUpModal" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="container-fluid">
<br />
<div class="text-center">
<asp:Label ID="Label28" runat="server" Font-Size="X-Large" Text="GRID with table"></asp:Label>
</div>
</div>
</div>
<div class="modal-body ">
<div>
<table class="table-borderless p-0"
border="1" id="HeaderGridView1"
style="border-style: None; border-collapse: collapse;">
<tr>
<th style="width: 185px; text-align: center">Name</th>
<th style="width: 150px; text-align: center">Surname</th>
<th style="width: 110px; text-align: center">Nickname</th>
</tr>
</table>
</div>
<div class="container-fluid p-0" style="max-height: 99px; overflow-y: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
CssClass="table-borderless"
CellPadding="1"
BorderStyle="None"
ShowHeader="false"
ShowFooter="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server" Width="185px" Text='<%#Eval("cls_Name") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtSurname" runat="server" Width="150px" Text='<%#Eval("cls_Surname") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtNickname" runat="server" Width="110px" Text='<%#Eval("cls_Nickname") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div>
<table class="table-borderless p-0"
border="1" id="FooterGridview1"
style="border-style: None; border-collapse: collapse;">
<tr>
<th>
<asp:TextBox ID="FtxtName" BackColor="#CCCCCC" runat="server" Width="185px" Text='<%#Eval("cls_Name") %>'></asp:TextBox>
</th>
<th>
<asp:TextBox ID="FtxtSurname" runat="server" Width="150px" Text='<%#Eval("cls_Surname") %>'></asp:TextBox>
</th>
<th>
<asp:TextBox ID="FtxtNickname" runat="server" Width="110px" Text='<%#Eval("cls_Nickname") %>'></asp:TextBox>
</th>
</tr>
</table>
</div>
<div class="p-0">
<asp:Button ID="Button1" runat="server" OnClick="AddNewRow_Click" UseSubmitBehavior="False" Text="Add new row" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Prevent the closing of modal popup(bootstrap) window on postback of ASP.Net button click
How can I use a Modal Pop Up control in ASP.NET similar to a WinForms Message box?
How to use Gridview Paging in modal popup window ASP.NET Bootstrap 4.0
How to create a error modal pop inside a modal pop up in asp.net
Pop-Up with ASP.Net Button Click that is not blocked with popup blocker
How to prevent modal popup asp.net
Prevent bootstrap modal closing on postback in ASP.NET
Display a modal Pop up in ASP.NET MVC
ASP.NET MVC 5, bootstrap modal popup Not hit Controller method
Asp.Net Insert using bootstrap Modal Popup
Related Tags