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

下拉列表选择正在进行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中，在正文结束标记之前写入以下标记。

<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“ success：”中：

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

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

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

在mvc中选择dropdownlist项时出现的bootstrap模式

1 个答案: