单击按钮时模态对话框不显示，但区域变灰 ASP.NET Core MVC

Question

我有一个按钮，我想使用它来呈现模式对话框。按钮是：

<button id="runButton" type="button" class="btn btn-sm btn-outline-secondary">Run</button>
<div class="modal fade" id="RunModal" role="dialog" data-url='@Url.Action("_Run", "Tests")'></div>

我的javascript函数是：

$(document).ready(function () {
        $('#runButton').click(function () {
            var url = $('#RunModal').data('url');
            $.get(url, function (data) {
                $("#RunModal").html(data);
                $("#RunModal").modal('show');
            });
        });
    });

模态对话框的局部视图是：

<div id="RunModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="RunModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Run</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form>
                    <fieldset>
                        <div class="form-group">
                            <label>Value Set Name</label>
                            <input type="text" placeholder="Enter the value set name" class="form-control small-input" id="newValueSet" />
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Run</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

我的控制器功能是：

public ActionResult _Run()
{
    return PartialView();
}

当我单击该按钮时，它转到控制器和 returns 视图，但模态对话框不显示，网页区域显示为灰色。任何指向可能导致此类行为的原因的指示都会有很大帮助。调试时 Inspector 不会在控制台上抛出任何错误。

Answer 1

首先，我发现 id RunModal 在你的视图和 parital view.And 中重复，那么你应该在视图和部分视图中都显示 dalog。

这是一个有效的演示（我将 id(RunModal) 更改为 RunModal1）：控制器：

        public IActionResult Index()
        {

            return View();
        }
        public ActionResult _Run()
        {
            return PartialView("~/Views/Tests/_Run.cshtml");
        }

查看：

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<button id="runButton" type="button" class="btn btn-sm btn-outline-secondary">Run</button>
<div class="modal fade" id="RunModal1" role="dialog" data-url='@Url.Action("_Run", "Tests")'></div>


@section scripts{ 
<script type="text/javascript">
    $(document).ready(function () {
       
    });
    $('#runButton').click(function () {
        var url = $('#RunModal1').data('url');
        
        $.get(url, function (data) {
            $("#RunModal1").html(data);
            $("#RunModal").modal('show');
            $("#RunModal1").modal('show');
          
        });
    });
</script>
}

结果：

单击按钮时模态对话框不显示，但区域变灰 ASP.NET Core MVC

Modal Dialog does not show on button click, but area grays out ASP.NET Core MVC

javascript

asp.net-core

asp.net-core-mvc

partial-views

asp.net-mvc-partialview