ASP.NET MVC Bootstrap动态模态内容

我正在使用MVC 5，我对viewModel每条记录都有一个 ，如下所示：

  @foreach (var item in Model.Questions) {  }
  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的容器。 
  
 X 
 
 
  
 现在，让我们用“modal-link”css类连接任何元素上的click事件。 我们之前将这些类添加到了按钮中。 
 $(function () { $('body').on('click', '.modal-link', function (e) { e.preventDefault(); $("#modal-container").remove(); $.get($(this).data("targeturl"), function (data) { $('
'+ '
'+ 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 
 
  ×  
Modal title
 
 
 
@Model.Title
 
@Model.Description
 
Some other content for the modal 
 
 
 Close Save changes 
  

		      	
 如果你想拥有动态模态，这段代码对你有用。（我希望如此） 
 
 
 
 @Html.DisplayNameFor(model => model.Questions.Single().QuestionType) 
 
 @Html.DisplayNameFor(model =>model.Questions.Single().Scheme) 
 
 
 @Html.DisplayFor(modelItem => item.QuestionType) 
 
  View  
 
 



	
 
  View  
 
 










 @{int i1 = 1; foreach (var item in Model.devices) { 
 
  
 
 
İşletim Sistemi ve Office Detayları
 × 
 
 
OS Adı:@Model.softwares[i1 - 1].OSName
 
OS Lisans:@Model.softwares[i1 - 1].OSLicenceCode
 
OS Fatura:@Model.softwares[i1 - 1].OSBillCode
 
Office Adı:@Model.softwares[i1 - 1].OfficeName
 
Office Lisans:@Model.softwares[i1 - 1].OfficeLicenceCode
 
Office Fatura:@Model.softwares[i1 - 1].OfficeBillCode
 
 
 Close 
 
 
 
 i1++; } } 
 
 
 
Sıra
 
PC Adı
 
Kullanıcı
 
Marka/Model
 
Departman
 
İşletim Sistemi
 
Office
 
 
 
 
@i1
 
@item.DeviceName
 
@item.DeviceOwner
 
@item.DeviceBrand
 
@item.DeviceDepartment
 
 @Model.softwares[i1 - 1].OSName
 
@Model.softwares[i1 - 1].OfficeName