我正在开发 ASP.NET Core Web 应用程序,但遇到了有关 Bootstrap 对话框模式的问题。我只想在单击按钮时将 partialView
加载到对话框模式中,并在代码中实现了它。但问题是对话框模式没有出现,而是页面刷新并立即出现黑色飞溅。
这很奇怪,因为我以前也实现过模态。
这是我在 View.cshtml
中的代码
@{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
ViewData["Title"] = "Create";
}
<div class="content-wrapper">
<section class="content">
<div class="col-md-12">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Add Queue</h3>
</div>
<form asp-action="Create">
<div class="box-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group col-md-6">
@* ....... *@
</div>
<div class="form-group col-md-6">
@* ...... *@
</div>
<div class="form-group col-md-6">
@* ...... *@
@* ---- button that triggers the modal ---- *@
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button>
</div>
<div class="form-group col-md-6"></div>
</div>
<div class="box-footer">
<input type="submit" value="Next" class="btn btn-primary" />
<input type="reset" value="Clear" class="btn btn-warning" />
</div>
</form>
</div>
</div>
</section>
</div>
@* ------- modal div ---------- *@
<div id="adHocAdd" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create a New Menu</h4>
</div>
<div class="modal-body">
@**Load View*@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
欢迎任何帮助。
最佳答案
问题似乎是因为您的按钮在 <form>
内标签。在 ASP.NET 中我也遇到过这个问题。
要解决这个问题,您可以添加 type="button"
在你的里面 <Button>
标记并运行代码。所以你的按钮的完整代码如下所示。
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button>
根据我的观点,这个问题是由于在启动模型的按钮点击时触发了表单提交。
如需进一步了解,请参阅此处 ( dotnetfiddle.net )。
- 有2个按钮,一个和上面问题一样,另一个按钮是
type="button"
分别。 - 没有
type="button"
的按钮将在几秒钟内出现并消失。但另一个将保持正常。
关于c# - 对话框模式在 asp.net core mvc 5 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44691719/