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

【问题标题】：Modal Dialog does not show on button click, but area grays out ASP.NET Core MVC单击按钮时不显示模态对话框，但区域变灰 ASP.NET Core MVC
【发布时间】：2020-06-22 16:01:35
【问题描述】：

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

<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();
}

当我单击按钮时，它会转到控制器并返回视图，但不显示模式对话框，并且网页区域显示为灰色。任何可能导致这种行为的指针都会有很大帮助。 Inspector 在调试时不会在控制台上抛出任何错误。

【问题讨论】：

标签： javascript asp.net-core asp.net-core-mvc partial-views asp.net-mvc-partialview

【解决方案1】：

首先，我发现RunModal在您的视图和部分视图中重复出现。然后您应该在视图和部分视图中都显示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>
}

结果：

【讨论】：