Asp.net mvc 在mvc中选择dropdownlist项时显示的引导模式

Asp.net mvc 在mvc中选择dropdownlist项时显示的引导模式,asp.net-mvc,bootstrap-modal,Asp.net Mvc,Bootstrap Modal,我希望在用户选择dropdownlist项目时弹出一个带有部分视图的引导模式。 对于每个选定的项目,当用户在dropdownlist中选择不同的项目时,弹出窗口应使用新内容刷新。从下面的代码中,我可以创建ajax,然后重定向到带有模型值的局部视图,但无法显示模式弹出窗口 Index.cshtml <div class="form-group"> @Html.LabelFor(model => model.SelectedIssue, htmlAttrib

我希望在用户选择dropdownlist项目时弹出一个带有部分视图的引导模式。 对于每个选定的项目,当用户在dropdownlist中选择不同的项目时,弹出窗口应使用新内容刷新。从下面的代码中,我可以创建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;
    });
然后重定向到下面的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>
当我运行代码时,屏幕变暗,但没有弹出窗口出现。调试时,我可以看到ajax调用控制器操作并重定向到部分视图,但弹出窗口没有出现。
不确定我缺少什么来显示带有模型属性的弹出窗口。任何人都可以帮忙。

因为您看到在调试时调用控制器操作,所以更难的部分正在工作。对您的问题最有可能的解释是您的javascript“success:”:


您可以选择将
更改为

,因为您在调试时看到控制器操作被调用,所以更难的部分正在工作。对您的问题最有可能的解释是您的javascript“success:”:


您可以选择将
更改为

打字:
$(“#IssueId”)
->
$(“#IssueId”)
使用控制台检查模态是否仍被某些内容隐藏键入:
$(“#IssueId”)
->
$(“#IssueId”)
使用控制台检查模态是否仍被某些内容隐藏
@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>
<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">

            </div>
        </div>
    </div>
.modal-content {
    width: 600px !important;
    margin: 30px auto !important;
}
//change from this:
$('#modal-content').html(data);

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