ASP.NET MVC Bootstrap动态模态内容
我正在使用MVC 5，我对viewModel每条记录都有一个 ，如下所示：
@Html.DisplayNameFor(model => model.Questions.Single().QuestionType) @Html.DisplayNameFor(model =>model.Questions.Single().Scheme) @foreach (var item in Model.Questions) { @Html.DisplayFor(modelItem => item.QuestionType) }
Foreach (Var item in Model.Questions) ，会有一个打开modal的button 。 但是，我希望这个modal基于item.id的Model.Questions加载不同的内容。 我怎样才能做到这一点？
您可以使用带有ajax的bootstrap模式对话框将详细信息/视图局部视图结果加载到模式对话框。
首先，向按钮添加一个新的css类，我们将在稍后用于连接click事件以启动模式对话框。 我们还将使用Url.Action html帮助器方法生成详细信息视图的URL，并将其保留在按钮中的html5数据属性中（稍后我们将使用它进行ajax调用）
@foreach (var item in Model.Questions) { }
现在将以下代码添加到当前视图（甚至布局）。 这将充当我们的modal dialog的容器。
现在，让我们用“modal-link”css类连接任何元素上的click事件。 我们之前将这些类添加到了按钮中。
$(function () { $('body').on('click', '.modal-link', function (e) { e.preventDefault(); $("#modal-container").remove(); $.get($(this).data("targeturl"), function (data) { $(''+ '').modal(); }); }); });
因此，当用户单击该按钮时，它会读取targeturl数据属性的值（ 这是一个带有查询字符串中的项ID值的URL ），并对该URL进行ajax调用。 在我们的例子中，它将调用Details操作方法。 所以让我们确保它返回部分视图结果（输出modal dialog内容）
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); }
部分视图将具有modal dialog所需的html标记。
@model YourNameSpace.QuestionViewModel
如果你想拥有动态模态，这段代码对你有用。（我希望如此）
Sıra PC Adı Kullanıcı Marka/Model Departman İşletim Sistemi Office @{int i1 = 1; foreach (var item in Model.devices) { @i1 @item.DeviceName @item.DeviceOwner @item.DeviceBrand @item.DeviceDepartment @Model.softwares[i1 - 1].OSName @Model.softwares[i1 - 1].OfficeName i1++; } }
谢谢Shjiu.Code工作正常。要更改全屏模型，请添加此代码。 ‘。
$(function () { $('body').on('click', '.modal-link', function (e) { e.preventDefault(); $("#modal-container").remove(); $.get($(this).data("targeturl"), function (data) { $(' ' + data + '
').modal(); }); }); });