如何解决ASP.NET如何使用模式弹出式Bootstrap 4上的按钮而不关闭或刷新弹出式窗口
我在主页上有一个按钮，该按钮会打开弹出窗口，在弹出窗口中，我有gridview，表格和按钮（添加新行），其中用户在表格中添加了一个新人，在按钮上（添加新行）中添加了从表格到网格视图的新行。问题是当单击按钮（添加新行）时，弹出窗口将关闭，再次打开时，弹出窗口将在gridview中具有该新行。 如何在单击按钮（添加新行）时防止弹出窗口关闭？
<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>
这是背后的代码：
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 = "";
}
解决方法
为了在使用ASP.NET WebForms时实现部分页面回发，应该使用ajax调用或使用UpdatePanel来完成所需的任务。
为此，请将ScriptManager放在具有form属性的runat="server"元素之后。
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
像这样将模态包装在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>
因此，整个身体看起来像这样：
<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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
