我尝试使用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>
答案 0 :(得分:0)
您可以这样做:
<强> 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);
});
上述流程仍然可以优化,但只是为了让您理解 我已经成功了!