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

当我点击detail-container时，我希望在另一个对话框/弹出窗口中嵌入其他详细信息（虽然嵌入了）。我试过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());
});

提示：您要添加两次课程。而是只添加一次从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);
});

上述流程仍然可以优化，但只是为了让您理解 我已经成功了！

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

1 个答案: