如何解决模态形式显示不是模态
新来的。我有 Index.cshtml,其中标签如下所示,通过按钮调用 _ModalFormSample.cshtml。
@{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-4">
<div class="btn-group" role="group" aria-label="..." style="padding-bottom: 15px;">
<a href="@Url.Action("ModalFormSample","Home",new {timeStamp = DateTime.UtcNow.ToString()})" class="btn btn-info showModal">Add Account</a>
</div>
</div>
</div>
_ModalFormSample.cshtml
<div class="modal" id="modalFormSample" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我希望 _ModalFormSample 在单击“添加帐户”按钮时显示为模态表单,但它没有。
我在这里错过了什么?我使用的是 VS 2019 C#.Net
解决方法
由于您想动态显示 modal
,您需要编写 js
代码来实现您想要的。
- 添加一个 div,您可以在其中附加预期模式的响应 div。在这里,我添加了 ID 为
myModal
的 div。 - 编写
.showModal
点击事件函数如下。评论中有解释。
// showModal button click event
$(".showModal").click(function(e) {
// to stop redirecting to href url
e.preventDefault();
// fetch url from href
let url = $(this).attr("href");
// do ajax call and append response in myModal div.
$.ajax({
url: url,success: function(response) {
// Append response in myModal div
$('#myModal').html(response);
// show modal
$('#modalFormSample').modal('show');
},dataType: "html"
});
});
<div class="row">
<div class="col-md-4">
<div class="btn-group" role="group" aria-label="..." style="padding-bottom: 15px;">
<a href="@Url.Action(" ModalFormSample ","Home ",new {timeStamp = DateTime.UtcNow.ToString()})" class="btn btn-info showModal">Add Account</a>
</div>
</div>
</div>
<div id="myModal"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。