在MVC中选择下拉列表项目时出现Bootstrap模式

Question

我想要一个带有部分视图的引导模式，当用户选择下拉列表项目时弹出。对于每个选定的项目，当用户在下拉列表中选择其他项目时，弹出窗口应刷新新内容。从下面的代码中，我能够制作Ajax，然后重定向到具有模型值的部分视图，但无法显示模态弹出

index.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;
    });

下拉列表选择正在呼叫，并在控制器中调用以下方法

public ActionResult GetActionDetails(string id)
        {
            ActionDetails model = new ActionDetails();
            model.ActionTaken = "Action Taken ";
            model.AdviceGiven = "Advice Given to";
            return PartialView("ActionDetails", model);
        }

然后将其重定向到下面的部分视图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中，以下标记是在闭合标签之前编写的。

<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调用控制器操作并将其重定向到部分视图，但弹出窗口没有出现。不确定我缺少使用模型属性显示弹出窗口的内容。任何人都可以帮忙。

Answer 1

，由于您在调试时正在调用控制器操作，因此较难的部分在起作用。最有可能对您的问题的解释是在您的JavaScript中"成功："：

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

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