twitter-bootstrap ASP.NET MVC Bootstrap 动态模态内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42984105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET MVC Bootstrap dynamic modal content
提问by Pow4Pow5
I am using MVC 5 and I have a <button>for each record in the viewModelas follows:
我正在使用 MVC 5，并且<button>每个记录都有一个，viewModel如下所示：
<table class="table table-hover">
<tr>
<th>
@Html.DisplayNameFor(model => model.Questions.Single().QuestionType)
</th>
<th>
@Html.DisplayNameFor(model =>model.Questions.Single().Scheme)
</th>
</tr>
@foreach (var item in Model.Questions)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.QuestionType)
</td>
<td>
<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" >
View
</button>
</td>
</tr>
}
Foreach (Var item in Model.Questions), there will be a buttonthat opens up a modal. However, I want this modalto load different contents based on the item.idfrom Model.Questions. How can I do this?
Foreach (Var item in Model.Questions)，会有一个button打开一个modal. 但是，我希望它modal根据item.idfrom加载不同的内容Model.Questions。我怎样才能做到这一点？
回答by Shyju
You can use bootstrap modal dialog with ajax to load the details/view partial view result to the modal dialog.
您可以使用带有 ajax 的 bootstrap 模态对话框将详细信息/视图部分视图结果加载到模态对话框中。
First, add a new css class to the button, which we will use to wire up the click event later to fire up the modal dialog. Also we will generate the url to the details view using the Url.Actionhtml helper method and keep that in html5 data attribute in the button(we will use this for our ajax call later)
首先，向按钮添加一个新的 css 类，稍后我们将使用它来连接 click 事件以启动模态对话框。此外，我们将使用Url.Actionhtml helper 方法生成详细信息视图的 url，并将其保存在按钮的 html5 数据属性中（稍后我们将在 ajax 调用中使用它）
@foreach (var item in Model.Questions)
{
<tr>
<td>
<button type="button" class="btn btn-success btn-sm modal-link"
data-targeturl="@Url.Action("Details","Home",new { id = item.Id })">
View
</button>
</td>
</tr>
}
Now add the below code to your current view (or even the layout). This will act as the container for our modal dialog.
现在将以下代码添加到您当前的视图（甚至布局）。这将作为我们模态对话框的容器。
<!-- The below code is for the modal dialog -->
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<a href="#close" title="Close" class="modal-close-btn">X</a>
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
Now, let's wire up the clickevent on any element with "modal-link" css class. We added this classes to our buttons earlier.
现在，让我们click用“modal-link”css 类在任何元素上连接事件。我们之前将这个类添加到我们的按钮中。
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade">'+
'<div class="modal-content" id= "modalbody" >'+
data + '</div></div>').modal();
});
});
});
So when user clicks on the button, it reads the value of targeturldata attribute (which is a URL with the item id value in the querystring) and make an ajax call to that URL. In our case, It will make a call to the Detailsaction method. So let's make sure that it returns the partial view result (out modal dialog content)
因此，当用户单击按钮时，它会读取targeturldata 属性的值（它是一个 URL，在 querystring 中具有 item id 值）并对该 URL 进行 ajax 调用。在我们的例子中，它将调用Detailsaction 方法。所以让我们确保它返回部分视图结果（模态对话框内容）
public ActionResult Details(int id)
{
// Get the data using the Id and pass the needed data to view.
var vm = new QuestionViewModel();
var question = db.Questions.FirstOrDefault(a=>a.Id==id);
// To do: Add null checks
vm.Id = question.Id;
vm.Title = question.Title;
vm.Description = question.Description;
return PartialView(vm);
}
And the partial view will have the needed html markup for the modal dialog.
并且局部视图将具有模式对话框所需的 html 标记。
@model YourNameSpace.QuestionViewModel
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h4>@Model.Title</h4>
<p>@Model.Description</p>
<p>Some other content for the modal </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
回答by aziz eser
if you want to have dynamic modal, this code useful for you.(I hope so)
如果你想要动态模态，这段代码对你有用。（我希望如此）
<table class="table table-hover " >
<thead>
<tr>
<th>S?ra</th>
<th>PC Ad?</th>
<th>Kullan?c?</th>
<th>Marka/Model</th>
<th>Departman</th>
<th>??letim Sistemi</th>
<th>Office</th>
</tr>
</thead>
<tbody>
@{int i1 = 1;
foreach (var item in Model.devices)
{
<tr style="font-size:13px" >
<td>@i1</td>
<td>@item.DeviceName</td>
<td>@item.DeviceOwner</td>
<td>@item.DeviceBrand</td>
<td>@item.DeviceDepartment</td>
<td data-toggle="modal" data-target="#@i1"> @Model.softwares[i1 - 1].OSName</td>
<td data-toggle="modal" data-target="#@i1">@Model.softwares[i1 - 1].OfficeName</td>
</tr>
<div id="@i1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">??letim Sistemi ve Office Detaylar?</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>OS Ad?:@Model.softwares[i1 - 1].OSName</p>
<p>OS Lisans:@Model.softwares[i1 - 1].OSLicenceCode</p>
<p>OS Fatura:@Model.softwares[i1 - 1].OSBillCode</p>
<p>Office Ad?:@Model.softwares[i1 - 1].OfficeName</p>
<p>Office Lisans:@Model.softwares[i1 - 1].OfficeLicenceCode</p>
<p>Office Fatura:@Model.softwares[i1 - 1].OfficeBillCode</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i1++;
}
}
</tbody>
</table>
回答by Sujithra
Thanks Shjiu.Code is working fine.To change the model fullscreen,add this code. ' .
谢谢Shjiu。代码工作正常。要全屏更改模型，请添加此代码。' .
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade"> <div class="modal-dialog modal-lg" style="width:500px;>' +
'<div class="modal-content" id= "modalbody" >' +
data +
'</div></div></div>').modal();
});
});
});
