单击带有 asp.net core MVC 的按钮后显示模式答案

【问题标题】：Show modal after clicking on a button with asp.net core MVC单击带有 asp.net core MVC 的按钮后显示模式
【发布时间】：2019-05-04 07:18:18
【问题描述】：

我正在尝试使用 asp.net-core 2.0 MVC 实现语义 UI 模式，它应该在单击按钮后显示，但在尝试和搜索 5 小时后，现在我没有解决方案。我如何为这种情况定义事件处理（它也不适用于控制器）。

JavaScript

<script>
        function toggle_modula(id) {
            document.getElementById(id).innerHTML = '<div class="ui container"><div class ="ui modal"><div class="header">Hi There!</div></div></div><div class ="Content">hello World</div>';
            run();
        }
</script>
        
<script>function run() {
            $('.ui.modal').modal('toggle');
}</script>

<script src="https://semantic-ui.com/dist/semantic.min.js"></script>
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<button id="editButton" onclick="toggle_modula('insertcodehere');">Click Me</button>


<div id="insertcodehere"></div>

参考：semantic-ui information

非常感谢，打扰了！

【问题讨论】：

我无法在 SO sn-p 编辑器中使用它，但在 codepen 中它似乎工作正常，我不认为这是代码问题，尽管您之前可能需要参考 jquery语义用户界面。你用的是什么编辑器？您在控制台中收到任何错误吗？
非常感谢您的评论。我正在使用 Visual Studio 2017 并且没有错误消息。它只是不起作用。

标签： javascript html events button modal-dialog

【解决方案1】：

如果我使用以下代码创建一个 html 页面，它会显示一个“点击我”按钮。

点击按钮后，在按钮下方显示“hello World”，并弹出“Hi there!”模态框。这是预期的行为吗？

唯一的变化是：

删除了多余的脚本标签

将 jquery 脚本标签移到语义脚本之上

<doctype html>
<head>
<!--NOTE!!!! Jquery script imported ABOVE semantic-ui to ensure it is available-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<script src="https://semantic-ui.com/dist/semantic.min.js"></script>
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/></script>
<script>
    function toggle_modula(id) {
        document.getElementById(id).innerHTML = '<div class="ui container"><div class ="ui modal"><div class="header">Hi There!</div></div></div><div class ="Content">hello World</div>';
        run();
    }
    function run() {
        $('.ui.modal').modal('toggle');
}
</script>
</head>
<body>
<button id="editButton" onclick="toggle_modula('insertcodehere');">Click Me</button>
<div id="insertcodehere"></div>
</body>

我相信脚本的顺序是这里的关键。希望这可以帮助！编辑添加：要测试，请将代码粘贴到文本文件中，另存为 index.html 并在浏览器中运行。与您的其他代码隔离可能有助于确认哪些有效，哪些无效。

【讨论】：