Asp.net mvc 在mvc中选择dropdownlist项时显示的引导模式
我希望在用户选择dropdownlist项目时弹出一个带有部分视图的引导模式。 对于每个选定的项目,当用户在dropdownlist中选择不同的项目时,弹出窗口应使用新内容刷新。从下面的代码中,我可以创建ajax,然后重定向到带有模型值的局部视图,但无法显示模式弹出窗口 Index.cshtmlAsp.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
<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);