MVC.net 动态引导模态内容调用另一个 cshtml 文件，但部分视图中的 javascript 不起作用答案

【问题标题】：MVC.net Dynamic bootstrap Modal content call another cshtml file but the javascript in the partial view is not workingMVC.net 动态引导模态内容调用另一个 cshtml 文件，但部分视图中的 javascript 不起作用
【发布时间】：2020-10-10 18:34:21
【问题描述】：

我有一个包含员工表格列表的页面，当用户单击其中一个列表时，它会触发一个函数来创建模式并根据单击的项目从控制器调用部分视图并发送参数，我使用 @url.Action 将参数发送到 javascript 以生成模式并正确显示，但是部分视图中的所有 javascript 都不起作用。如何启用部分视图 cshtml 文件 (ViewPMEmployee) 中的所有脚本？

HTML

<tbody>
                @foreach (var item in Employee)
                {
                    <tr>
                        <td class="text-center cb-width">
                            <input type="checkbox" name="cb" value="@item.EmployeeCd" onclick="return EmployeeProperties('@item.EmployeeCd')" />
                        </td>
                        <td class="form-control-static td1">
                            @*<a href="/PMEmployee/ViewPMEmployee?employeeCd=@item.EmployeeCd">@item.EmployeeCd.ToString()</a>*@
                            <a href="#" data-toggle="modal" class="modal-link" data-targeturl="@Url.Action("ViewPMEmployee", "PMEmployee", new { employeeCd = item.EmployeeCd })" data-backdrop="false">@item.EmployeeCd.ToString()</a>
                        </td>
                        <td class="td2">
                            <font class="form-control-static">@item.EmployeeNm</font>
                        </td>
                    </tr>
                }
            </tbody>

Javascript

$(function () {

    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $("#myModal").remove();
        $(".modal-backdrop").remove();

        $.get($(this).data("targeturl"), function (data) {
            $('<div id="myModal" class="modal right fade" role="dialog" style="left:350px">' +
                '<div class="modal-dialog">' +
                '<div class="modal-content">' +
                '<div class="modal-header"><h4 class="modal-title">Modal Heading</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>' +
                '<div class="modal-body">' +
                data + '</div>' +
                '<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal"> Close</button ></div ></div></div ></div>').modal();
            $(".modal-backdrop").addClass("d-none");
                            });
                        });
});

【问题讨论】：

看到局部视图是相关的。您的脚本是否在部分的@section 中？那是行不通的。
@SteveGreene 在 partialview 中没有“@section”，它只在“”标签中包含 html 和一些 javascript 函数。我没有发布部分视图，因为它太长了
替换 DOM 时会清除事件，因此请在更新 DOM 后设置事件。

标签： javascript asp.net-mvc razor bootstrap-modal

【解决方案1】：

您可以简单地将局部视图 JavaScript 代码放在局部视图中 HTML 部分的上方。或者，您可以将代码移动到单独的 javascript 文件中，并将脚本包含在部分视图 HTML 上方的部分视图中。希望它有效。

【讨论】：

我已经尝试将partialview的javascript放到该部分之外的父视图中，但仍然无法正常工作，我需要对每个列表使用“onClick”来触发js功能。但有些脚本无法实现 onClick 运行。