在 mvc 中选择下拉列表项时出现的引导模式答案

【问题标题】：bootstrap modal to appear when dropdownlist item is selected in mvc在 mvc 中选择下拉列表项时出现的引导模式
【发布时间】：2020-09-24 05:19:24
【问题描述】：

我希望在用户选择下拉列表项时弹出带有部分视图的引导模式。对于每个选定的项目，当用户在下拉列表中选择不同的项目时，弹出窗口应刷新新内容。从下面的代码中，我可以制作 ajax，然后使用模型值重定向到局部视图，但无法显示模态弹出窗口

索引.cshtml

<div class="form-group">
            @Html.LabelFor(model => model.SelectedIssue, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.DropDownListFor(model => model.SelectedIssue, Model.IssueDetails, "Please Select", new { @class = "form-control", @id = "IssueId" })
                @Html.ValidationMessageFor(model => model.SelectedIssue, "", new { @class = "text-danger" })
            </div>
        </div>


$("#IssueId").change(function () {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetActionDetails")',
            dataType: 'html',
            data: { id: $("#IssueId").val() },
            success: function (data) {
                $('#modal-content').html(data);
                $('#modal-container').modal('show');
            },
            error: function (ex) {
                alert('Failed to retrieve action details' + ex);
            }
        });
        return false;
    });

下拉选择正在进行 ajax 调用并在控制器中调用以下方法

public ActionResult GetActionDetails(string id)
        {
            ActionDetails model = new ActionDetails();

            model.ActionTaken = "Action Taken ";
            model.AdviceGiven = "Advice Given to";
            return PartialView("ActionDetails", model);
        }

然后重定向到下面的 PartialView ActionDetails 视图。

@model OnCallLogging.Models.ActionDetails

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 class="modal-title">Action Details</h3>
</div>

<div class="modal-body">
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(m => Model.ActionTaken, new { @class = "control-label col-sm-3"})
            <div class="col-sm-9">
                @Html.DisplayFor(m => m.ActionTaken, new { @class = "form-control" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(m => Model.AdviceGiven, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                @Html.DisplayFor(m => m.AdviceGiven, new { @class = "form-control" })
            </div>
        </div>
    </div>
</div>

<div class="modal-footer">
    <button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>

并且在 Layout.cshtml 中，在 body 结束标记之前写了以下标记。

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">

            </div>
        </div>
    </div>

在script.css中

.modal-content {
    width: 600px !important;
    margin: 30px auto !important;
}

当我运行代码时，屏幕变暗但没有弹出窗口出现。当我调试时，我可以看到 ajax 调用控制器操作并重定向到部分视图，但没有出现弹出窗口。不知道我缺少什么来显示带有模型属性的弹出窗口。谁能帮忙。

【问题讨论】：

错字：$("#IsssueId") -> $("#IssueId")
使用控制台检查模态是否仍然被某些东西隐藏

标签： asp.net-mvc bootstrap-modal

【解决方案1】：

由于您看到在调试时调用了控制器操作，因此更难的部分正在工作。对您的问题最有可能的解释是在您的 javascript "success:" 中：

//change from this:
$('#modal-content').html(data);

//to this:
$('.modal-content').html(data);

您可以选择将您的 <div class="modal-content"> 更改为 <div id="modal-content">

【讨论】：