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>
}

当我单击详细信息容器时，我想在附加的 dialog/popup（尽管是嵌入的）中查看其他详细信息。我试过 jQuery 但我不确定应该在哪里声明对话框 div。

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

谢谢

P.S。对话框如下所示（包含 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());
});

Tip: You are adding classes two times. Instead add it only once and remove id from div as it will create duplicate ids which are against the HTML rule.

@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);
});

The above flow can still be optimized but just to make you understand I've made it part by part!

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

ASP.NET MVC show dialog with predefined data

asp.net-mvc

jquery

dialog