带有预定义数据的 ASP.NET MVC 显示对话框

Question

我尝试使用 jquery.dialog，但它似乎不适合我的需要，因为我已经在需要显示详细信息弹出窗口的视图中加载了数据。

我当前的视图如下所示：

@foreach (var item in ViewData["Records"] as List<wow.Models.DetailsView>)
{
  <div class="detail-container" id="dialog-opener" class="detail-item">
     <p>@item.Title</p>
  </div>
}

当我单击详细信息容器时，我希望在附加对话框/弹出窗口中查看其他详细信息（尽管是嵌入的）。我尝试了 jQuery，但我不确定我应该在哪里声明对话框 div。

对不起，如果我错过了解释一些细节，但请问我，我会澄清......

谢谢

附：对话框如下所示（包含 VIewData 中包含的数据）：

<div "dialog">
    <p>@item.Title</p>
    <p>@item.Date</p>
    <p>@item.UserID</p>
    //etc.
</div>

Answer 1

你可以这样做：

DEMO

$( ".detail-container" ).click(function() {
      $( "#dialog" ).dialog( "open" );
      $(".ui-dialog-content").empty();
      $(".ui-dialog-content").append($(this).find('p').text());
});

提示：您要添加两次课程。而是只添加一次，然后 从 div 中删除 id，因为它会创建重复的 id HTML 规则。

@foreach (var item in ViewData["Records"] as List<wow.Models.DetailsView>)
{
  <div class="detail-container detail-item">
     <p>@item.Title</p>
  </div>
}

更新

要添加额外的数据首先需要把它放在html的某个地方，如果附加为data-*html5属性会更好，如下所示：

@foreach (var item in ViewData["Records"] as List<wow.Models.DetailsView>)
{
  <div class="detail-container" id="dialog-opener" data-date="@item.Date" data-uid="@item.UserID" class="detail-item">
     <p>@item.Title</p>
  </div>
}

现在您可以按如下方式检索它：

$( ".detail-container" ).click(function() {
      $( "#dialog" ).dialog( "open" );
      $(".ui-dialog-content").empty();
      var dateHTML="<p> Date : "+$(this).data("date")+"</p>";//get the data-date attribute of the element and store it as html element to append
      var uidHTML="<p> User ID : "+$(this).data("uid")+"</p>";//get the userID
      var titleHTML="<p> Title : "+$(this).find('p').text()+" </p>";
      var finalHTML=dateHTML + uidHTML + titleHTML;
      $(".ui-dialog-content").append(finalHTML);
});

上面的流程仍然可以优化，只是为了让你理解 我已经逐步完成了！