将模式对话框添加到 MVC 项目中的头文件不起作用

Question

我在MVC项目中实现了模态弹出窗口作为header.cshtml文件的一部分。 问题是它不显示对话框(不起作用) 我能够工作的唯一方法是将按钮和模态容器都放在头文件中。 模式正文是长文本，不应是头文件的一部分。

我尝试了几个教程，阅读了模式文档，并应用了堆栈溢出的修复程序，这对我没有任何作用。 我一定错过了一些非常简单和琐碎的东西，我只是看不到它。

下面是 Roles.cshtml 文件中的代码，其中创建了模式容器并编写了文本

@{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
@{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div class="modal" id="modal-active" aria-hidden="true">
<div class="modal__overlay bg-modal" tabindex="-1"
data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true"
aria-labelledby="modal-title-1">
<header class="modal__header">
<h1 class="modal__title h2" id="modal-title-1">
<h2>Roles</h2>
<br />
</h1>
</header>
<main class="modal__content">
BLABLA......
</main>
<footer class="modal__footer">
<button class="button button-primary"
aria-label="submit">
close
</button><button class="button button-secondary" data- 
micromodal-close
aria-label="closing">
close
</button>
</footer>  
</div>
</div>
</div>

然后 Header.cshtml 文件如下所示：我在其中添加了"btnTrigger"和 AJAX 脚本来调用和显示模态

@model TR.Service.Web.ViewModels
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<a href="#" title="Home" aria-label="Home" class="logo"></a>
<button class="button button-tertiary button-menu-open js-menu- 
open ml-auto" aria-haspopup="menu" title="mobil menu">Menu</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary"  id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>        
</div>
<div class="solution-header">
blabla........         
</div>
</header>
@section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '@Url.Action("Betingelser", "Rolles")', 
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}

然后在我的家庭控制器中，我有操作结果，应该返回 部分视图

public ActionResult Roles()
{
return PartialView("Roles");
}

我不明白为什么这不起作用。请帮忙。

当单击id = btnTrigger的按钮时，应该会出现Pupop

Answer 1

这是一个工作代码

首先，由于Header.cshtml是SubLayout.cshtml的一部分，因此将@section scripts移动到Roles.cshtml，如下所示，您也可以将其放在布局中，但没有@section scripts标签。我没有使用您在问题中的模态。但这是一种工作模式

@{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
@{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div id="exampleModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Roles</h4>
</div>
<div class="modal-body">
<p>Content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '@Url.Action("Betingelser", "Rolles")', 
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
} 

那么你的Header.cshtml现在看起来像这样

<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<a href="#" title="Home" aria-label="Home" class="logo"></a>
<button class="button button-tertiary button-menu-open js-menu-
open ml-auto" aria-haspopup="menu" title="mobil menu">
Menu
</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary" id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>
</div>
<div class="solution-header">
</div>
</header>

同时将主控制器方法更改为

public ActionResult Roles()
{
return View();
}