带有 ViewComponent 的 Net Core 中的模态窗口答案

【问题标题】：Modal Window in Net Core with ViewComponent带有 ViewComponent 的 Net Core 中的模态窗口
【发布时间】：2021-09-22 12:18:32
【问题描述】：

我遇到了使用 JQuery 打开模态窗口的问题。我不调用该函数。与普通页面相同的代码正常打开，但视图组件内的调用函数不调用。 razor 页面包含一个视图组件。这个 viewComponent 有模态窗口是从 JQuery 函数调用的

调用函数代码为：

<a href="#myModal" class="btnEditar btn btn-dark btn-sm" data-toggle="modal" title="Edit" 
data-id="@item.Id" Id="Edit">Edit</a>

节脚本是

@section Scripts {
    <script>
        $(".btnEditar").click(function (eve) {
        $(console.log("here click"));
        $("#modal-content").load("htmlpage.html");
        });
 </script>
 }

非常感谢问候

【问题讨论】：

标签： asp.net-core asp.net-core-viewcomponent

【解决方案1】：

如果你的模态是这样的：

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
      
    </div>
</div>
</div>

在您的组件中。

你可以改变你的主视图：

<a href="#myModal" class="btnEditar btn btn-dark btn-sm" data-toggle="modal" title="Edit" Id="Edit">Edit</a>
@await Component.InvokeAsync("YourCompoentName")

@section Scripts
{ 
    <script>
        $(".btnEditar").click(function (eve) {
        $(console.log("here click"));
        $('.modal-content').load("../htmlpage.html");
    });
    </script>

}

测试结果：

【讨论】：