ASP.NET 如何在不关闭或刷新弹出窗口的情况下使用模态弹出引导程序 4 上的按钮
[英]ASP.NET How to use button on modal Pop Up Bootstrap 4 without closing or refreshing popup
问题描述
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 个解决方案
解决方案1
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.为了在使用 ASP.NET WebForms 时实现部分页面回发，您应该使用 ajax 调用或使用UpdatePanel来实现所需的任务。
For that, put the ScriptManager right after the form element of yours with runat="server" attribute.为此，将ScriptManager放在具有runat="server"属性的form元素之后。
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
and wrap your modal in the UpdatePanel like this:并将您的模式包装在UpdatePanel如下所示：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
防止在 ASP.Net 按钮单击回发时关闭模态弹出（引导程序）窗口 - Prevent the closing of modal popup(bootstrap) window on postback of ASP.Net button click
如何在 ASP.NET 中使用类似于 WinForms 消息框的 Modal Pop Up 控件？ - How can I use a Modal Pop Up control in ASP.NET similar to a WinForms Message box?
如何在模式弹出窗口中使用Gridview分页ASP.NET Bootstrap 4.0 - How to use Gridview Paging in modal popup window ASP.NET Bootstrap 4.0
如何在asp.net中的模式弹出窗口中创建一个错误模式弹出窗口 - How to create a error modal pop inside a modal pop up in asp.net
使用ASP.Net按钮弹出单击弹出窗口阻止程序未阻止 - Pop-Up with ASP.Net Button Click that is not blocked with popup blocker
如何防止模式弹出asp.net - How to prevent modal popup asp.net
防止在 ASP.NET 回发时关闭引导模式 - Prevent bootstrap modal closing on postback in ASP.NET
在ASP.NET MVC中显示模式弹出窗口 - Display a modal Pop up in ASP.NET MVC
ASP.NET MVC 5，引导程序模式弹出窗口未命中控制器方法 - ASP.NET MVC 5, bootstrap modal popup Not hit Controller method
Asp.Net 使用引导模式弹出窗口插入 - Asp.Net Insert using bootstrap Modal Popup
相关标签